jQuery如何实现滑入滑出效果(跟随鼠标滑入滑出蒙板)
2018-01-23 20:29
573 查看
效果图:
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin:0; padding:0; list-style: none } #box{ position:relative; margin: 100px auto; width:300px; height:400px; background-image:url(img/timg1.jpg); background-size:300px 400px; border:1px solid black; overflow: hidden; } #zzc{ position: absolute; width: 300px; height: 400px; background-color: red; opacity:0.4; left:-20000px; } </style> </head> <body style="height:1000px; width:1000px;"> <div id="box"> <div id="zzc"></div> </div> </body> </html> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> function inDirection(evt) { //1、拿出鼠标距离四个边的距离 //1)、盒子left,top,right,bottom let left= $("#box").offset().left; let top = $("#box").offset().top; let right = left+$("#box").width(); let bottom = top+$("#box").height(); //2)、计算鼠标距离每个边的距离 let leftDis =Math.abs(left-evt.pageX); let rightDis =Math.abs(right-evt.pageX); let topDis =Math.abs(top-evt.pageY); let bottomDis =Math.abs(bottom-evt.pageY); let obj = { "左":leftDis, "上":topDis, "右":rightDis, "下":bottomDis } let min = obj["左"]; let minKey = "左"; for(let key in obj){ if(obj[key]<min){ min = obj[key]; minKey = key; } } return minKey; } function leftIn() { $("#zzc").css({"left":-300}); $("#zzc").animate({"left":0,"top":0},200); } function rightIn() { $("#zzc").css({"left":300}); $("#zzc").animate({"left":0,"top":0},200); } function upIn() { $("#zzc").css({"top":-400}); $("#zzc").animate({"left":0,"top":0},200); } function bottomIn() { $("#zzc").css({"top":400}); $("#zzc").animate({"left":0,"top":0},200); } function leftOut() { $("#zzc").animate({"left":-300,"top":0},200); } function rightOut() { $("#zzc").animate({"left":300,"top":0},200); } function upOut() { $("#zzc").animate({"left":0,"top":-400},200); } function bottomOut() { $("#zzc").animate({"left":0,"top":400},200); } let inFuncObj ={ "左":leftIn, "上":upIn, "右":rightIn, "下":bottomIn }; let outFuncObj ={ "左":leftOut, "上":upOut, "右":rightOut, "下":bottomOut }; $(function () { $("#box").mouseenter(function (evt) { let direction = inDirection(evt); console.log("从"+direction+"边进入"); inFuncObj[direction](); }); $("#box").mouseleave(function (evt) { let direction = inDirection(evt); console.log("从"+direction+"边出去"); outFuncObj[direction](); }); }); </script>
相关文章推荐
- jQuery实现的 “滑动门”(跟随鼠标滑动滑动的tab选项卡)效果
- Jquery实现如何实现DIV由下向上展开的效果,鼠标浮动时div由下向上缓慢展开。
- JQuery实现一个简单的鼠标跟随提示效果
- jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
- jQuery实现鼠标跟随效果
- jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
- JQuery实现一个简单的鼠标跟随提示效果
- jQuery实现跟随鼠标运动图层效果的方法
- jQuery实现跟随鼠标运动图层效果的方法
- js实现精美的图片跟随鼠标效果实例
- 如何用jQuery实现在鼠标滚动后导航栏保持固定
- jquery实现鼠标滑过显示二级下拉菜单效果
- jQuery实现的右下角广告窗体跟随效果示例
- 鼠标悬浮显示二级菜单效果的jquery实现
- AngularJS如何实现鼠标移入显示,鼠标移出隐藏的效果
- jQuery实现鼠标滚动图片延迟加载效果附源码下载
- Jquery实现Mouseover显示跟随的提示信息效果
- 如何实现鼠标放在图片上出现文字说明效果?
- CSS3+jQuery鼠标跟随图片悬停效果 零玖玖教育