前言：通過鼠標對元素的左右移動，達到兩張圖片切換效果
示例：
題外話：分享一個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+滾動條滾動的距離