本章节分享一段代码实例,它实现了鼠标悬浮出现这招层效果。
并且这个遮罩层出现和消失的方向与鼠标移入和移出的方向有关系。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <style> *{ margin: 0; padding: 0; border: 0; box-sizing: border-box; } .container { width: 1200px; margin: 0 auto; padding: 40px 0px; } .box { padding: 40px; } .iwrap { position: relative; width: 220px; height: 166px; margin: 0 auto; border: 1px solid #e2e2e2; overflow: hidden; } .iwrap .float { position: absolute; width: 100%; height: 100%; background-color: #6bc30d; padding: 15px; top: -100%; left: -100%; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(function () { var iwrap = $(".iwrap"); var float = $(".float"); iwrap.hover(function (e) { float.css(moveForward(iwrap, e)).stop(true, true).animate({ "left": 0, "top": 0 }, 500); }, function (e) { float.animate(moveForward(iwrap, e), 500); }); }); var moveForward = function (elem, e) { var w = elem.width(), h = elem.height(), direction = 0, obj = {}; var x = (e.pageX - elem.offset().left - (w / 2)) * (w > h ? (h / w) : 1); var y = (e.pageY - elem.offset().top - (h / 2)) * (h > w ? (w / h) : 1); direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; switch (direction) { case 0://from top obj.left = 0; obj.top = "-100%"; break; case 1://from right obj.left = "100%"; obj.top = 0; break; case 2://from bottom obj.left = 0; obj.top = "100%"; break; case 3://from left obj.left = "-100%"; obj.top = 0; break; } return obj; } </script> </head> <body> <div class="container"> <div class="box"> <div class="iwrap"> <div class="float"></div> </div> </div> </div> </body> </html>
根据鼠标的方位出现遮罩层效果代码实例,这样的场景在实际项目中还是用的比较多的,关于根据鼠标的方位出现遮罩层效果代码实例就介绍到这了。
根据鼠标的方位出现遮罩层效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。
本文地址: http://www.zzsi.net/code/web/98645.html
本站部分资源来源与网络,仅供学习参考使用,请勿商用,如侵犯了您的权益,请联系我们删除。