鼠标悬浮图片出现透明层效果
分类:实例代码
本章节分享一段代码实例,它实现了鼠标悬浮在图片上出现透明图层效果。
并且图层的出现方位和鼠标移入的方位有关联,代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> * { margin: 0; padding: 0; } a, img { border: 0; } ul, li { list-style: none; } body { background: #eee; } .jq22 { width: 490px; margin: 30px auto; } .box { float: left; width: 100px; height: 100px; border: 1px solid white; background: #EEE; margin: 10px; position: relative; display: inline; } .boxBor { position: absolute; border: 1px solid white; z-index: 4; background: #fff; background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.77)); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.77)); background: -o-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.77)); width: 100px; height: 100px; left:0px; top:0px; opacity: 0; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(function () { $('.box').bind('mouseover', function () { var oPosition = $(this).position(); $(".boxBor").stop(false, false).animate({ opacity: 0.8, left: oPosition.left + 10, top: oPosition.top + 10, }, 1000) }); }) </script> </head> <body> <div class="boxBor" deta-switch="true"></div> <div class="jq22"> <div class="box"><img width="100" height="100" src="demo/jQuery/ant/1.jpg" alt=""></div> <div class="box"><img width="100" height="100" src="demo/jQuery/ant/2.jpg" alt=""></div> <div class="box"><img width="100" height="100" src="demo/jQuery/ant/3.jpg" alt=""></div> <div class="box"><img width="100" height="100" src="demo/jQuery/ant/4.jpg" alt=""></div> <div class="box"><img width="100" height="100" src="demo/jQuery/ant/5.jpg" alt=""></div> <div class="box"><img width="100" height="100" src="demo/jQuery/ant/6.jpg" alt=""></div> <div class="box"><img width="100" height="100" src="demo/jQuery/ant/7.jpg" alt=""></div> <div class="box"><img width="100" height="100" src="demo/jQuery/ant/1.jpg" alt=""></div> <div class="box"><img width="100" height="100" src="demo/jQuery/ant/2.jpg" alt=""></div> <div class="box"><img width="100" height="100" src="demo/jQuery/ant/3.jpg" alt=""></div> <div class="box"><img width="100" height="100" src="demo/jQuery/ant/4.jpg" alt=""></div> <div class="box"><img width="100" height="100" src="demo/jQuery/ant/5.jpg" alt=""></div> </div> </body> </html>
上面的代码实现了我们的要求,下面就介绍一下它的实现过程。
一.代码注释:
(1).$(function () {}),当文档结构完全加载完毕再去执行函数中的代码。
(2).$('.box').bind('mouseover', function () {}),为class属性值为box的元素注册mouseover事件处理函数。
(3).var oPosition = $(this).position(),获取当前元素的坐标。
(4).$(".boxBor").stop(false, false).animate({ opacity: 0.8,
left: oPosition.left + 10,
top: oPosition.top + 10,
}, 250),动画效果。
left: oPosition.left + 10和top: oPosition.top + 10为了实现半透明层覆盖于图片之上,加10是因为box元素有10px的外边距。
二.相关阅读:
(1).position()可以参阅jquery position()一章节。
(2).stop()可以参阅jQuery stop()一章节。
(3).animate()可以参阅jQuery animate()一章节。
网站出售中,有意者加微信:javadudu