您的位置：首页 > Web前端 > JQuery

jquery 视觉特效（水平滚动图片）

2012-10-04 09:32 288 查看

效果描述：

所有图片排队向左移动，从左边界依次消失，当最后一副图片消失后。所有图片再排队，依次从右边界出现，进入scroller范围。再排队依次消失。。周而复始。

HTML:

<div id="scroller">
<div id="images">
<a href="#"><img src="pic1.jpg" alt="" width="150" height="150" /></a>
<a href="#"><img src="pic2.jpg" alt="" width="150" height="150"/></a>
<a href="#"><img src="pic3.jpg" alt="" width="150" height="150" /></a>
<a href="#"><img src="pic4.jpg" alt="" width="150" height="150" /></a>
<a href="#"><img src="pic5.jpg" alt="" width="150" height="150"/></a>
<a href="#"><img src="pic6.jpg" alt="" width="150" height="150" /></a>
</div>
</div>

继续看其CSS：

/*只能容纳显示一张图片*/
#scroller{
margin: auto;
height: 150px;
width: 460px;
/*设置 position为relative，让图片移动以scroller的左上角为基点*/
position: relative;
/*超出范围的隐藏*/
overflow: hidden;
/*设置边框样式*/
border: 1px saddlebrown dashed;
}

#images{
width: 950px;

}
#images a img{
border: 0;
/*图片要实现动画效果，必须要设置此CSS属性*/
position: relative;
}

继续看jquery：

var $wrapper = $('#scroller a img');
var animator = function(img){
img.animate({left:-950},5000,function(){
img.css({left:450});
animator($(this));
});
}

animator($wrapper);

到此已经完成了水平滚动图片的效果。

如果此时想添加鼠标悬停效果呢？代码如下：

$wrapper.hover(function(){
//                    stop()方法停止当前动画
$wrapper.stop();
},function(){
animator($wrapper);
})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航