Js 鼠标按住拖拽移动效果
前言：通过鼠标对元素的左右移动，达到两张图片切换效果
示例：
题外话：分享一个gif制作小工具：Screen To Gif : )
思路：
选择两张图片，一个相对定位，一个绝对定位，小滑块定位在垂直居中的位置，通过移动小滑块的位移，改变第二张图的显示元素大小。
重点：
event.clientX, event.clientY: 浏览器窗口的可视区域，鼠标相对于浏览器窗口的坐标x，y（窗口坐标）
offsetWidth读取width，style.width写入width，写入的内联式
onmousedown 鼠标按下触发事件
onmousemove 鼠标按下时持续触发事件
onmouseup 鼠标抬起触发事件
解析：
1.建议将鼠标持续移动和抬起事件，嵌于按下事件里面，因为并列事件会使onmouseup失效，我也不知道为什么 (*￣︶￣)
2.onmousedown获取鼠标按下后距离文档左侧的值，获取小滑块对应事件源的left值（相减，这是一个固定值）
3.onmousemove，获取鼠标移动后距离文档左侧的距离，减去上面的固定值就是小滑块移动后的left值。写入得到新的left值，完成移动。left+滑块宽度的二分之一就是第二张图的显示大小。
注意临界点，left值最小是0，最大值是图片宽度-小滑块宽度
4.onmouseup 鼠标抬起后清除所有事件。
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片左右滑动</title> <style> body{ position: relative; margin:0; padding:0; width:100%; height: 1000px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } #box{ display: inline-block; height: 500px; width:500px; position: relative; z-index: 0; } img{ width: 100%; z-index:5; } #small-box{ height: 50px; width:50px; position: absolute; left:calc( 50% - 25px); top:calc( 50% - 25px); background: #FF66CC; cursor:move ; opacity: 0.7; z-index:30; } #img{ position: absolute; left: 0; top:0; clip: rect(0px, 250px, 500px, 0px); z-index:10; } </style> </head> <body> <div id="box"> <img src="http://webdesign-finder.com/nutritia/wp-content/uploads/2017/11/before.jpg"> <img src="http://webdesign-finder.com/nutritia/wp-content/uploads/2017/11/after.jpg" id="img"> <div id="small-box" class="box"></div> </div> <script> let box = document.getElementById('small-box'); var body=document.getElementById('box'); var img=document.getElementById('img'); box.onmousedown = function(e){ //e是点击事件的e , this是box元素的this //因为当前物体是在文档的（0,0）位置，所以e.clientX(鼠标到文档的左侧距离) - this.offsetLeft(拖拽物left的值)就是鼠标到拖拽物的距离。 let x = e.clientX - this.offsetLeft; body.onmousemove = function(e){ // 获取鼠标移动后到文档左侧的距离 - 鼠标到拖拽物的距离 （就是移动后拖拽物的left值） var a = e.clientX; var l = a - x; var maxL = body.offsetWidth - box.offsetWidth; // 右界临界点 if(l>=maxL){ l=maxL; } if(l<=0){ // 左界临界点 l=0; } box.style.left= l +'px'; //拖拽物赋值 var b = box.offsetWidth/2; var m = l + b; img.style.clip = "rect(0px "+m+"px 500px 0px)"; //图片显示区域赋值 } document.onmouseup = function(){ //清除事件 body.onmouseup = null; body.onmousemove = null; } } </script> </body> </html>
小结：
1.style.width与offsetWidth
style.width只能读取内联样式，offsetWidth都可以读取
style.width读取带“px”单位， offsetWidth只读取纯数值
style.width读取div的width，不包括border和padding，offsetWidth获取的宽度是width+padding+border（不包括margin）
style.width可读可写，offsetWidth是只读的（包括style.left与offsetLeft）
2.pageX, offsetX, clientX, screenX
e.pageX，e.pageY： 返回的是相对于文档的定位，文档的左上角为(0,0)，向右为正，向下为正，IE不支持；
e.offsetX，e.offsetY：返回的是相对于文档的坐标，和e.pageX，e.pageY作用相同，但是只有IE支持。
e.clientX，e.clientY：返回的值是相对于屏幕可见区域的坐标，如果页面有滚动条，滚动条隐藏的那部分不进行计算，也可以说是相对于屏幕的坐标，但是不计算上方的工具栏；（窗口坐标）
e.screenX，e.screenY：返回的是相对于屏幕的坐标，包含浏览器上面的工具栏；
所以：e.pageY=e.pageY | | e.offsetY=e.clientY+滚动条滚动的距离
