javascript - js常见的新闻连续滚动
本文介绍了javascript - js常见的新闻连续滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
为什么这里滚动不连续呢
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻滚动</title>
<style>
*{margin:0px;padding:0px}
</style>
</head>
<body>
<div style="height:100px"></div>
<div id="marquee" style="overflow:hidden;height:120px;width:220px;margin-left:20px;">
<div id="marqueecont">
<ul style="margin:0px;list-style:none;">
<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>
</ul>
</div>
<div id='marqueecont2'></div>
</div>
<script>
var marquee = document.getElementById('marquee');
var marqueecont = document.getElementById('marqueecont');
var marqueecont2 = document.getElementById('marqueecont2');
MarqTop(marquee,marqueecont,marqueecont2,30);
function MarqTop(marquee,marqueecont,marqueecont2,speed){
marqueecont2.innerHTML=marqueecont.innerHTML;
// 用这个函数这个滚动不连续
function Marquee(){
if(marqueecont.offsetTop<=marquee.scrollTop)
marquee.scrollTop-=marqueecont.offsetHeight;
else{
marquee.scrollTop++;
}
}
// 这个滚动是连续的
/*function Marquee(){
if(marquee.scrollTop>=marqueecont.offsetHeight){
marquee.scrollTop=0;
}else{
marquee.scrollTop++;
}
}*/
var MyMar=setInterval(Marquee,speed);
marquee.onmouseover=function() {clearInterval(MyMar);}
marquee.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
}
</script>
</body>
</html> 解决方案
为了看着更加直观。。我加几个css属性
#marquee {
overflow: auto;/*为了直观的查看滚动量*/
border: 2px solid;
}
#marqueecont{
border: 1px solid #f55;
}然后说下不能连续滚动的原因：
因为你的offsetTop用错了
offsetTop是值当前元素距离offsetParent指定的元素的上侧相对距离。。你这里就是指marqueecont这个元素，但是如果offsetParent没指定,那么marqueecont.offsetTop就是marqueecont和最外层body的上侧相对距离
所以此时marqueecont.offsetTop为100(如果按我加了边框就是102)，因为你最上面的顶了个100高的div...
实际你需要完整滚动完一个marqueecont的高度是189...滚动100你就归0了，自然不连续了。。
修改要直接看正常效果就是：
if(marqueecont.offsetHeight<=marquee.scrollTop)最后你HTML结构最上面的DIV太多余。。if改为上面那样后可以最上面的100高的DIV删除
这篇关于javascript - js常见的新闻连续滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
