jquery+css鼠标滑过图片出现闪光和滑出标题(一)

3344

动画效果:

下面是代码介绍:

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">&nbsp;</span></a></li>
    <li><a href="http://www.blogxuan.com/"><img src="images/02.jpg" alt="玄玄博客"/><span class="title">玄玄博客</span><span class="shine">&nbsp;</span></a></li>
    <li><a href="http://www.blogxuan.com/"><img src="images/03.jpg" alt="玄玄博客"/><span class="title">玄玄博客</span><span class="shine">&nbsp;</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库 -------->

玄玄博客 http://www.blogxuan.com/