Fork me on GitHub
魔芋铃
Menu

jQuery hover demo

先放效果图：

demo

 

百度云下载地址：http://pan.baidu.com/s/1dDpn1Sl

 

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery hover鼠标滑过图片背景高亮闪烁</title>
<!--<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
-->
<script src="js/jquery.1.4.2-min.js"></script>
</head>
<body>
<div class="headeline"></div>
<!--演示内容开始-->
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "宋体";}
/* box */
.box{width:480px;height:460px;overflow:hidden;margin:20px auto 0 auto;}
.box li{float:left;width:155px;margin:0 4px 7px 0;display:inline;}
.box li a{position:relative;height:104px;display:block;overflow:hidden;cursor:pointer;}
.box li a .title{z-index:2;position:absolute;bottom:10px;left:-160px;width:150px;height:20px;padding:0 0 0 10px;line-height:20px;color:#000;font-size:20px;}
.box li a .shine{z-index:3;position:absolute;top:0;left:0;width:160px;height:104px;background:url(images/shine_brands.png) no-repeat -160px 0;}



</style>

<div class="box">
    <ul>
         <li><a href=""><img src="images/01.jpg"/><span class="title">Prada</span><span class="shine">&nbsp;</span></a></li>
         <li><a href=""><img src="images/01.jpg"/><span class="title">Prada</span><span class="shine"></span></a></li>
         <li><a href=""><img src="images/01.jpg"/><span class="title">Prada</span><span class="shine"></span></a></li>
         <li><a href=""><img src="images/01.jpg"/><span class="title">Prada</span><span class="shine"></span></a></li>
         <li><a href=""><img src="images/01.jpg"/><span class="title">Prada</span><span class="shine"></span></a></li>
         <li><a href=""><img src="images/01.jpg"/><span class="title">Prada</span><span class="shine"></span></a></li>
         <li><a href=""><img src="images/01.jpg"/><span class="title">Prada</span><span class="shine"></span></a></li>
         <li><a href=""><img src="images/01.jpg"/><span class="title">Prada</span><span class="shine"></span></a></li>
         <li><a href=""><img src="images/01.jpg"/><span class="title">Prada</span><span class="shine"></span></a></li>
        
    </ul>
</div><!--box end-->

<script type="text/javascript">
$(document).ready(function(){
    $(".box li a").hover(function(){
        var shine = $(this).find(".shine");
        var title = $(this).find(".title");
        
        shine.stop().css("backgroundPosition","-160px 0");
        
        shine.animate({backgroundPosition: '160px 0'},500);
        title.stop().animate({left:'0px'},{queue:false,duration:450});
    },
    function(){
        $(this).find(".title").stop().animate({left:'-160px'},{queue:false,duration:200});
    });

});
</script>

</body>
</html>

 

posted @ 2015-07-03 22:08  魔芋铃  阅读(378)  评论(0)  编辑  收藏  举报