前端小demo——鼠標控制圖片上下滑動
阿新 • • 發佈：2018-06-04
time pos relative flow 制圖 tle code interval 部分
鼠標放到圖片上半部分，圖片向上滑動。鼠標放到圖片下半部分，圖片向下滑動。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .xiaomi { width: 512px; height: 400px; border: 1px solid #f00; margin:100px auto; overflow: hidden; position: relative; } .xiaomi span { position: absolute; left: 0; width: 100%; height: 200px; cursor: pointer; } .up { top: 0; } .down{ bottom: 0; } .xiaomi img { position: absolute; top: 0; left: 0; } </style> </head> <body> <div class="xiaomi"> <img src="img/mi.png" alt="" id="pic"/> <span class="up" id="goUp"></span> <span class="down" id="goDown"></span> </div> <script> //獲取向上元素 var goUp=document.getElementById("goUp"); //獲取向下元素 var goDown=document.getElementById("goDown"); //獲取圖片 var pic=document.getElementById("pic"); var dist=0; var timer=null; //鼠標進入 goUp.onmouseover=function () { clearInterval(timer); timer=setInterval(function () { dist-=2; //大於-1070向上 if (dist>-1070) { pic.style.top=dist+"px"; }else { clearInterval(timer); } },15); }; goDown.onmouseover=function () { clearInterval(timer); timer=setInterval(function () { dist+=2; //小於0向下 if (dist<0) { pic.style.top=dist+"px"; }else { clearInterval(timer); } },15); }; </script> </body> </html>
前端小demo——鼠標控制圖片上下滑動