jQuery hover demo

最新推荐文章于 2024-07-20 10:36:53 发布

weixin_30364325

最新推荐文章于 2024-07-20 10:36:53 发布

阅读量56

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/moyuling/p/4619792.html

版权

先放效果图：

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>

转载于:https://www.cnblogs.com/moyuling/p/4619792.html

weixin_30364325

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery hover 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">...
复制链接

扫一扫