JS实现拖动事件，鼠标滚轴滑动进行内容移动，同时移动与鼠标的拖动同步，例如阴阳师京都商业街部分。

鼠标实现拖动事件

例子

在页面中可对图片实现拖动到任意位置。

html页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>拖拽</title>
</head>
<body><img id="angle" src="../img/拖1.gif" alt=""><script src="拖拽.js"></script></body>
</html>

JS页面

const angle=document.querySelector("#angle")angle.onmousedown=function(event) {let shiftX=event.clientX-angle.getBoundingClientRect().left;let shiftY=event.clientY-angle.getBoundingClientRect().top;angle.style.position='absolute';angle.style.zIdex=1000;document.body.append(angle);moveAt(event.pageX,event.pageY);//移动现在位于坐标(pageX,pageY)上的图片//将初始的偏移考虑在内function moveAt(pageX,pageY) {angle.style.left=pageX-shiftX+'px';angle.style.top=pageY-shiftY+'px';}function onMouseMove(event) {moveAt(event.pageX,event.pageY);}//在Mousemove事件上移动图片document.addEventListener('mousemove',onMouseMove);//放下图片，并移除不需要的程序angle.onmouseup=function(){document.removeEventListener('mousemove',onMouseMove);angle.onmouseup=null;};};angle.ondragstart=function(){return false;}

滚轴滑动与拖动同步

例子

鼠标滚轴滑动实现页面图片的滚动，同时下方的拖动随之进行移动同步。同理，对点击拖动进行拖拽时上方的内容也会随之变换。

html页面


```javascript
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="商业街.css"><script src="商业街.js"></script>
</head>
<body><div class="city"><div class="city-first"></div><div class="city-second"><ul><li><img src="../img/t1.png"><p>阴阳师花与雨主题透明伞-玉藻前</p><div class="line-last"></div></li><li><img src="../img/t2.png"><p>阴阳师式神L型短抱枕</p><div class="line-last"></div></li><li><img src="../img/t3.png"><p>阴阳师犬神大公仔</p><div class="line-last"></div></li><li><img src="../img/t4.png"><p>阴阳师立绘人形立牌</p><div class="line-last"></div></li><li><img src="../img/t5.png"><p>阴阳师结缘吊坠</p><div class="line-last"></div></li><li><img src="../img/t6.png"><p>阴阳师五芒星手镯</p><div class="line-last"></div></li><li><img src="../img/t7.jpg"><p>阴阳师器の道式神Q版手办观山海</p><div class="line-last"></div></li><li><img src="../img/t8.jpg"><p>阴阳师茨球乐队保温杯</p><div class="line-last"></div></li><li><img src="../img/t9.jpg"><p>阴阳师 · 素纸魂心 Moleskine定制款笔记本</p><div class="line-last"></div></li><li><img src="../img/t1.png"><p>阴阳师花与雨主题透明伞-玉藻前</p><div class="line-last"></div></li><li><img src="../img/t2.png"><p>阴阳师式神L型短抱枕</p><div class="line-last"></div></li><li><img src="../img/t3.png"><p>阴阳师犬神大公仔</p><div class="line-last"></div></li><li><img src="../img/t4.png"><p>阴阳师立绘人形立牌</p><div class="line-last"></div></li><li><img src="../img/t5.png"><p>阴阳师结缘吊坠</p><div class="line-last"></div></li><li><img src="../img/t6.png"><p>阴阳师五芒星手镯</p><div class="line-last"></div></li><li><img src="../img/t7.jpg"><p>阴阳师器の道式神Q版手办观山海</p><div class="line-last"></div></li><li><img src="../img/t8.jpg"><p>阴阳师茨球乐队保温杯</p><div class="line-last"></div></li><li><img src="../img/t9.jpg"><p>阴阳师 · 素纸魂心 Moleskine定制款笔记本</p><div class="line-last"></div></li><li><img src="../img/t1.png"><p>阴阳师花与雨主题透明伞-玉藻前</p><div class="line-last"></div></li><li><img src="../img/t2.png"><p>阴阳师式神L型短抱枕</p><div class="line-last"></div></li><li><img src="../img/t3.png"><p>阴阳师犬神大公仔</p><div class="line-last"></div></li><li><img src="../img/t4.png"><p>阴阳师立绘人形立牌</p><div class="line-last"></div></li><li><img src="../img/t5.png"><p>阴阳师结缘吊坠</p><div class="line-last"></div></li><li><img src="../img/t6.png"><p>阴阳师五芒星手镯</p><div class="line-last"></div></li><li><img src="../img/t7.jpg"><p>阴阳师器の道式神Q版手办观山海</p><div class="line-last"></div></li><li><img src="../img/t8.jpg"><p>阴阳师茨球乐队保温杯</p><div class="line-last"></div></li><li><img src="../img/t9.jpg"><p>阴阳师 · 素纸魂心 Moleskine定制款笔记本</p><div class="line-last"></div></li><li><img src="../img/t3.png"><p>阴阳师犬神大公仔</p><div class="line-last"></div></li><li><img src="../img/t4.png"><p>阴阳师立绘人形立牌</p><div class="line-last"></div></li><li><img src="../img/t5.png"><p>阴阳师结缘吊坠</p><div class="line-last"></div></li></ul></div><div class="boxx"><div class="city-box"><p>拖动</p></div><div class="boxx-circle"></div></div></div>
</body>
</html>

## CSS页面```javascript
ul,ol,li {list-style: none;
}
.city {position: relative;top: 50px;width: 1180px;height: 277px;margin: 0px auto;/* background-color: red; */
}.city-first {float: left;width: 53px;height: 184px;background: url(images/sprites.png) no-repeat -1112px -297px;
}.city-second {width: 1060px;height: 257px;float: left;margin-left: 67px;padding-top: 20px;position: relative;top: -20px;overflow: hidden;/* background-color: #fff; */
}.city-second ul {position: relative;width: 8100px;height: 244px;
}.city-second ul li {transition: all .4s ease;float: left;width: 250px;height: 174px;margin-right: 20px;position: relative;
}.city-second ul li p {position: relative;top: 10px;margin-left: 39px;transition: all .5s;
}.city-second ul li:hover {transform: translateY(-20px);
}.line-last {position: absolute;top: 122px;left: 26px;width: 1px;height: 60px;background-color: black;
}.boxx {position: absolute;top: 235px;left: 120px;width: 1060px;height: 3px;background-color: rgb(226, 224, 224);
}.city-box {position: absolute;cursor: pointer;top: -14px;z-index: 1;width: 139px;height: 28px;background-color: rgb(255, 255, 255);border: 1px solid rgb(194, 160, 96);background-clip: padding-box;
}.city-box p {text-align: center;line-height: 28px;color: rgb(194, 160, 96);margin-top: 0px;
}.boxx-circle {position: absolute;bottom: -3px;right: 0px;height: 10px;width: 10px;border-radius: 10px;background-color: rgb(226, 224, 224);
}

JS内容

window.addEventListener('load',function(){var city_second = document.querySelector('.city-second');var city_ul = document.querySelector('.city-second').querySelector('ul');var city_box = document.querySelector('.city-box');var city_ul_with = city_ul.offsetWidth - 1060;//offetWidth 自身在页面中所占的宽高var mouse1X, mouse2X, dx, mdx, dnx;city_box.addEventListener('mousedown', function(e) {//拖动的那个盒子var e = e || window.event;//兼容性问题e.preventDefault();//阻止默认事件的发生mouse1X = e.pageX;//类似clientX相对于浏览器窗口可视区域的坐标 不包括工具栏和滚动条 dx = city_box.offsetLeft;//获取的是相对于父对象的左边距mdx = mouse1X - dx;//相减后得到边上的区域document.addEventListener('mousemove', mouseMove2);//拖着移动时document.addEventListener('mouseup', mouseUp2);//鼠标抬起时})function mouseMove2(e) {dx = city_box.offsetLeft;var e = e || window.event;//兼容事件mouse2X = e.pageX;dnx = mouse2X - mdx;//可视区域减去边上区域if (dnx < 0) {dnx = 0;} else if (dnx > 921) {dnx = 921;}// console.log(dnx)city_box.style.left = dnx + "px";var cssIndex = (city_ul_with / 921) * dnx;city_ul.style.cssText = `transform:translate3d(${-cssIndex}px,0px,0px);`}function mouseUp2() {document.removeEventListener('mousemove', mouseMove2);}var dx;var city_second = document.querySelector('.city-second');city_second.addEventListener('mousewheel', function(e) {var e = e || window.event;e.preventDefault();dx = city_box.offsetLeft;if (dx < 10) {dx = 10;} else if (dx > 911) {dx = 911;}if (e.wheelDelta < 0) {city_box.style.left = dx + 10 + 'px';var cssIndex_1 = (city_ul_with / 921) * (dx + 10);city_ul.style.cssText = `transform:translate3d(${-cssIndex_1}px,0px,0px);transition:transform 0.8s ease-out 0s;`} else {city_box.style.left = dx - 10 + 'px';var cssIndex_2 = (city_ul_with / 921) * (dx - 10);city_ul.style.cssText = `transform:translate3d(${-cssIndex_2}px,0px,0px);transition:transform 0.8s ease-out 0s;`}})
})

JS实现拖动事件，滚轴滑动与拖动同步事件相关推荐

小程序 bindtouchmove 使用拖动按钮页面跟着滑动并拖动卡顿感问题
修改 bindtouchmove="buttonMove" 为 catchtouchmove="buttonMove" 使用touchmove监听滑动要更新视图 ...
android 同步事件,与Android的谷歌日历同步事件
即时通讯尝试将事件添加到 Android日历这将自动将这些事件同步到谷歌日历但它没有工作!! 事件添加manualy做同步但从我的代码添加的事件,出现在日历但不与谷歌日历同步为什么??? 这是我的 ...
【Cocoa(mac) Application 开发系列之四】动作编辑器（Cocos2dx）制作流程详解及附上响应鼠标滚轴事件、反转坐标系、导入/创建资源目录等知识点代码！
本站文章均为李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-cocos2dx/911.htm ...
【Android 事件分发】ItemTouchHelper 简介 ( 拖动/滑动事件 | ItemTouchHelper.Callback 回调 )
Android 事件分发系列文章目录 [Android 事件分发]事件分发源码分析 ( 驱动层通过中断传递事件 | WindowManagerService 向 View 层传递事件 ) [Andr ...
苹果设置播放html5视频,类似苹果官网,使用滚轴事件控制视频播放
苹果官网的效果网址:https://www.apple.com/homepod/ 完成的效果:滚动滚轴播放相同比例时间的视频,向上滚动倒播视频. 目前碰到的问题是只有一下下滚动滚轴才可以完成这个效 ...
拖拽排序插件Sortable.js在拖动的时候不能滑动鼠标滚轮滚动屏幕的问题
只是一个小问题在使用sortable.js的时候遇到拖动的时候不能滑动鼠标滚轮控制滚动条,找了很多地方,也看了文档,原来是没有找到那个点: forceFallback: false, // igno ...
ExtJs4 笔记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件...
本篇要登场的有三个控件,分别是滚轴控件.进度条控件和编辑控件. 一.滚轴控件 Ext.slider 1.滚轴控件的定义下面我们定义三个具有代表意义滚轴控件,分别展示滚轴横向.纵向,以及单值.多值选择 ...
HTML5滑动(swipe)事件,移动端触摸（touch）事件
目有个交互需要实现手指滑动的交互,pc端使用mousedown,mousemove,mouseup监听实现. 但在ios设备上mousemove是不好监听的,同类的方法是touchstart,touc ...
[转载]ExtJs4 笔记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件...
作者:李盼(Lipan) 出处:[Lipan] (http://www.cnblogs.com/lipan/) 版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其 ...

JS实现拖动事件，滚轴滑动与拖动同步事件

鼠标实现拖动事件

例子

html页面

JS页面

滚轴滑动与拖动同步

例子

html页面

JS内容

JS实现拖动事件，滚轴滑动与拖动同步事件相关推荐

最新文章

热门文章