标签：javascript dom案例 javascript 平滑滚动
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>平滑滚动</title>
</head>
<style>
<!--
#div1{
width:300px;
height:100px;
float:left;
overflow:hidden;
}
#div2,#div2 img,#div3 img{
float:left;
}
#div3{
float:left;
}
#in1{
float:left;
width:800%;
}
#div4{
position:relative;
left:30%;
top:20%;
width:170px;
height:105px;
overflow:hidden;
}
#in2{
float:left;
height:800%;
}
-->
</style>
<body>
<br /><h1 style="text-align:center">图片</h1><hr />
<div id="div1">
<div id="in1">
<div id="div2">
<img src="imgs/11.png"/>
<img src="imgs/22.png"/>
<img src="imgs/33.png"/>
</div>
<div id="div3"></div>
</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><h1 style="text-align:center">文字</h1><hr />
<div id="div4">
<div id="in2">
<ul id="ul1">
<li>这里是第1条新闻</li>
<li>这里是第2条新闻</li>
<li>这里是第3条新闻</li>
<li>这里是第4条新闻</li>
<li>这里是第5条新闻</li>
<li>这里是第6条新闻</li>
<li>这里是第7条新闻</li>
<li>这里是第8条新闻</li>
<li>这里是第9条新闻</li>
<li>这里是第10条新闻</li>
</ul>
<ul id="ul2"></ul>
</div>
</div>
</body>
<script language="javascript" type="text/javascript">
//图片控制
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
div3.innerHTML = div2.innerHTML;
var speed = 10;
function Marquee(){
if(div3.offsetWidth - div1.scrollLeft <= 0){
div1.scrollLeft -= div2.offsetWidth;
}else{
div1.scrollLeft++;
}
}
var id = setInterval(Marquee,speed);
div1.onmouseover = function(){
clearTimeout(id);
}
div1.onmouseout = function(){
id = setInterval(Marquee,speed);
}
//文字控制
var div4 = document.getElementById('div4');
var ul1 = document.getElementById('ul1');
var ul2 = document.getElementById('ul2');
var speed1 = 100;
ul2.innerHTML = ul1.innerHTML;
function Marquee1(){
if(ul2.offsetHeight - div4.scrollTop <= 0){
div4.scrollTop -= ul1.offsetHeight;
}else{
div4.scrollTop++;
}
}
var id1 = setInterval(Marquee1,speed1);
div4.onmouseover = function(){
clearTimeout(id1);
}
div4.onmouseout = function(){
id1 = setInterval(Marquee1,speed1);
}
</script>
</html>
javaScript滚动新闻之平滑滚动,布布扣,bubuko.com
标签：javascript dom案例 javascript 平滑滚动
原文地址：http://blog.csdn.net/u012453619/article/details/38331591
