波斯马BOSSMA Information Technology

Jquery结合div+css实现图片垂直纵向不间断滚动效果

发布时间:2011年3月8日 / 分类:JavaScript / 12,599 次浏览 / 评论

关于实现滚动效果现在提供一个新的类库,功能更多,浏览器兼容性更强,点此移步过去看看。

年前写过一篇使用jquery结合div+css实现图片水平横向不间断滚动效果的文章,发现文章浏览量很高,看来大家都比较需要这种东西。
这篇文章再提供一个例子,实现图片垂直纵向不间断滚动,除了使用jquery、div+css、兼容多种浏览器,还提供了鼠标事件:鼠标停留时停止滚动,移开继续滚动。

点击这里下载这个例子

直接查看代码:

<html>
<head>
<title>多张图片垂直不间断循环滚动</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
//定时器间隔
var interval=30;
var objInterval=null;

$(document).ready(
function(){
//用上部的内容填充下部
$("#bottom").html($("#top").html());

//给显示的区域绑定鼠标事件
$("#content").bind("mouseover",function(){StopScroll();});
$("#content").bind("mouseout",function(){StartScroll();});

//启动定时器
StartScroll();
}
);

//启动定时器,开始滚动
function StartScroll(){
objInterval=setInterval("verticalloop()",interval);
}

//清除定时器,停止滚动
function StopScroll(){
window.clearInterval(objInterval);
}

//控制滚动
function verticalloop(){
//判断是否上部内容全部移出显示区域
//如果是,从新开始;否则,继续向上移动
if($("#top").outerHeight()-$("#content").scrollTop()<=0){
var top=$("#content").scrollTop()-$("#top").outerHeight();
$("#content").scrollTop(top);
}else{
var top=$("#content").scrollTop()+1;
$("#content").scrollTop(top);
}

$("#foot").html("scrollTop:"+$("#content").scrollTop());
}
</script>
</head>
<body>
<div id="title" style="width:100%;height:40px;">看看滚动图片</div>
<!--//?
使用display:inline;white-space:nowrap,使不换行。
使用overflow:hidden隐藏超出的部分。
保持top、bottom的高度一致
//-->

<div id="content" style="width:718px;height:600px;overflow:hidden;">
<div id="top" style="width:718px;height:1008px;">
<img src="images/1.png" /><br/>
<img src="images/2.png" /><br/>
<img src="images/3.png" /><br/>
</ul>
</div>
<div id="bottom" style="width:1636px;height:1008px;"></div>
</div>
<div id="foot"></div>
</body>
</html>
本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自波斯马,原文地址《Jquery结合div+css实现图片垂直纵向不间断滚动效果

关键字:

建议订阅本站,及时阅读最新文章!
【上一篇】 【下一篇】

发表评论