首页 > 代码库 > 鼠标悬浮图片一道光闪过
鼠标悬浮图片一道光闪过
看到有些网站logo鼠标悬浮上面的时候，会出现一道光，一闪而过，刚开始以为是gif图，已审查，居然不是；现在就实现在这种效果：
先看看CSS实现的效果图：
看到没，就是这道刺眼的白光。。。。 啊啊。。我的眼睛。。。。
代码：
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> * { margin: 0px; padding: 0px; } #main { position: relative; margin: 50px auto; width: 600px; height: 400px; background: url(img/1.jpg) no-repeat; background-size: cover; overflow: hidden; } #main #guang { display: block; position: absolute; width: 300px; height: 100%; top: 0; left: -450px; overflow: hidden; transform: skewX(-30deg); transition: left 1s linear 0s; background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0)0, rgba(255, 255, 255, .8)50%, rgba(255, 255, 255, 0)100%); } #main:hover #guang { left: 1500px; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <!--<script type="text/javascript"> $(function() { $("#main").hover(function() { $("#guang").animate({ left: ‘1450‘ }, 1000); }, function() { $("#guang").stop(true, true).css(‘left‘, ‘-450px‘); }) }) </script>--> </head> <body> <div id="main"> <div id="guang"></div> </div> </body></html>
不知各位看官看出里面的问题没，就是鼠标离开的时候，一道光回回退回去，就是这个。。。
现在js实现，打开上面的注释，加hover事件，我们用动画animate实现：
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> * { margin: 0px; padding: 0px; } #main { position: relative; margin: 50px auto; width: 600px; height: 400px; background: url(img/1.jpg) no-repeat; background-size: cover; overflow: hidden; } #main #guang { display: block; position: absolute; width: 300px; height: 100%; top: 0; left: -450px; overflow: hidden; transform: skewX(-30deg); /*transition: left 1s linear 0s;*/ background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0)0, rgba(255, 255, 255, .8)50%, rgba(255, 255, 255, 0)100%); } /*#main:hover #guang { left: 1500px; }*/ </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("#main").hover(function() { $("#guang").animate({ left: ‘1450‘ }, 1000); }, function() { $("#guang").stop(true, true).css(‘left‘, ‘-450px‘); }) }) </script> </head> <body> <div id="main"> <div id="guang"></div> </div> </body></html>
几天不写代码，有点生疏，各位看官，国庆玩的如何。。。。。。
鼠标悬浮图片一道光闪过
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。