动画效果:
下面是代码介绍:
CSS部分:
<style type="text/css"> /*基本框架CSS*/ body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none} h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal} body>div{margin:0 auto} div {text-align:left} a img {border:0} body { color: #333; text-align: center; font: 12px "宋体"; } ul, ol, li {list-style-type:none;vertical-align:0} a {outline-style:none;color:#535353;text-decoration:none} a:hover { color: #D40000; text-decoration: none} /*基本框架CSS结束,应用特效时,以上样式可删除*/ /* 效果CSS开始 */ .brands-list { width: 480px; height: 113px; overflow: hidden; margin: 20px auto 0 auto; } .brands-list li { float: left; width: 155px; margin: 0 4px 7px 0; display: inline; } .brands-list li img{width: 160px;height: 104px;} .brands-list li a { position: relative; height: 104px; display: block; overflow: hidden; cursor: pointer; } .brands-list li a .title { z-index: 2; position: absolute; bottom: 10px; left: -160px; width: 150px; height: 20px; padding: 0 0 0 10px; color: #f1e8eb; line-height: 17px; background: url(./images/img_caption_bg.png) no-repeat; } .brands-list 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; } .brands-list li a .title { _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='./images/img_caption_bg.png'); } .brands-list li a .shine { _background: none; } /* 效果CSS结束 */ </style>
HTML代码部分:
<div class="brands-list"> <ul> <li><a href="http://www.blogxuan.com/"><img src="images/01.jpg" alt="玄玄博客"/><span class="title">玄玄博客</span><span class="shine"> </span></a></li> <li><a href="http://www.blogxuan.com/"><img src="images/02.jpg" alt="玄玄博客"/><span class="title">玄玄博客</span><span class="shine"> </span></a></li> <li><a href="http://www.blogxuan.com/"><img src="images/03.jpg" alt="玄玄博客"/><span class="title">玄玄博客</span><span class="shine"> </span></a></li> </ul> </div>
JQiery:
<script type="text/javascript"> $(document).ready(function(){ $(".brands-list li a").hover(function(){ //移入动画 $(this).find(".shine").stop(); $(this).find(".shine").css('background-position',"-160px 0"); $(this).find(".shine").animate({ 'background-position-x': '150px', 'background-position-y': '0' },500); $(this).find(".title").stop().animate({left:'0px'},{queue:false,duration:450}); },function(){ //移出动画 $(this).find(".title").stop().animate({left:'-160px'},{queue:false,duration:200}); }) }); </script>
<!---------- 请记得加载JQ库 -------->