你的位置:首页 > Java教程

[Java教程]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"><html ="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>