标签：border element AC top doc auto meta code int
鼠标放到图片上半部分，图片向上滑动。鼠标放到图片下半部分，图片向下滑动。
<!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>
标签：border element AC top doc auto meta code int
原文地址：https://www.cnblogs.com/yuebanzhou/p/9133263.html
