<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xhtml="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title> 间断滚动 </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
body,div {margin:0;padding:0;}
#out {width:300px;height:100px;border:1px red solid;overflow:hidden;}
#run {width:300px;overflow:hidden;}
#inside {width:300px;height:100px;float:left;}
#inside2 {width:300px;height:100px;float:left;}
img {float:left;}
</style>
</head>
<body>
<div id='out'>
<div id='run'>
<div id='inside'>
<img src='images/tu1.jpg'/>
<img src='images/tu2.jpg'/>
<img src='images/tu3.jpg'/>
</div>
<div id='inside2'></div>
</div>
</div>
<script type="text/javascript">
var outer=document.getElementByIdx_x("out"); //获取外层div
var in_one=document.getElementByIdx_x("inside"); //获取内层需要实现滚动效果的div
var in_two=document.getElementByIdx_x("inside2"); //获取内层需要重复滚动效果的div
in_two.innerHTML=in_one.innerHTML; //将第一个div的html内容赋给第二个div
var ff; //声明全局变量
function begin(){
if (outer.scrollTop>=in_one.scrollHeight)//当向上滚动的距离等于子标签的高度
{
outer.scrollTop=0; //向上的位移重新为归零
}
else{
outer.scrollTop++;
}
if (outer.scrollTop%in_one.offsetHeight==0)//通过求余计算循环滚动的条件
{
clearInterval(t);
ff=setTimeout("t=window.setInterval(begin,10)",1000);//达到条件时执行定时器
}
}
var t=window.setInterval(begin,10);
outer.οnmοuseοver=function (){clearTimeout(ff);clearInterval(t);} //定义鼠标事件清除定时器
outer.οnmοuseοut=function (){t=window.setInterval(begin,10);} //定义鼠标事件重新执行定时器
</script>
</body>
</html>
转载于:https://www.cnblogs.com/zt611/archive/2012/07/10/2585504.html
778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
