单行文本滚动

最新推荐文章于 2024-02-02 19:02:47 发布

weixin_30371875

最新推荐文章于 2024-02-02 19:02:47 发布

阅读量148

点赞数

原文链接：http://www.cnblogs.com/liupeng110112/archive/2012/01/02/2310502.html

版权

我们经常在实际应用中要用到单行文本滚动或者多行的，为了更好地在今后的工作中应用自如，今天把自己的的理解记录下来

首先在做这个效果之前要理解scrollHeight和scrollTop两个概念是

scrollHeigh是返回整个网页或整个元素内容的高度然后在加上滚动条可以滚动的高度（具体来看下这个实例）.以数值来表示
scrollTop是获取网页或网页内某个元素滚动条向下拉动的值．也就是说滚动条往下拉了多少．以数值来表示

当我们把div的高度设为60时，并且overflow为auto;我们可以看到弹出210的高度，当然此时的scrollHeigh为数值型
我们可以知道元素内容的高度为60(这里要注意元素内容的高度和元素的高度的概念，标准模式下元素的高度是等于元素内容的高度+上下边框+内填充（padding）+空白边（margin）），那可以滚动的高度是多少呢？根据前面的概念知道210-60为150。我们可以通过给div加一个onscroll事件来验证
如
div.οnscrοll=function(){
alert(div.scrollTop);
}
当滚动最下面时会弹出150
为了是想单行文本滚动的效果我们必须把高度设为30（仅在此实例中）并且overflow为hidden此时的scrollHeigh还是210，虽然看不到滚动条了但是仍然存在!

既然说到关于元素大小的概念顺便介绍其他两个

1.偏移量

offsetHeight:元素在垂直方向上所占用的空间大小，以像素计.包括元素内容的高度，内填充，上边框和下边框以及水平滚动条的高度如图所示

2.客户区大小

客户区大小是指元素的内容及其内填充所占的空间大小如图所示

介绍完这些就需要如何是单行文本滚动的效果
原来：通过改变scrollTop的值。

第一：如何实现无缝滚动呢？通过复制要滚动的内容，这时候就有两段一样的内容，当scrollTop等于scrollHeigh的一半时我们在把它拉回到初始状态也就是scrollTop为零时，因为是瞬间改变人的肉眼捕捉不到形成错觉就会形成无缝滚动

第二：当滚动到第几条信息时，需要停顿（这里所说的停顿只是间隔时间长一点而已而不是清除定时器）。这就需要通过scrollTop判断是否是div高度的整数倍，执行不同的定时器

单行文本滚动具体实现代码如下

View Code

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单行滚动</title>
<style>
a{display:block;font-size:15px;line-height:30px;text-decoration:none;color:#333;font-family:Arial;font-size:12px;}
.core{
    height:30px;
    overflow:hidden;
     border:1px solid red;
}
</style>
</head>

<body>
<div id="div" class="core">
<a href="http://www.css158.com/">段落一段落一段落一段落一段落一</a>
<a href="http://www.css158.com/">段落二段落二段落二段落二段落二 </a>
<a href="http://www.css158.com/">段落三段落三段落三段落三段落三</a>
<a href="http://www.css158.com/">段落四段落四段落四段落四段落四</a>
<a href="http://www.css158.com/">段落五段落五段落五段落五段落五</a>
<a href="http://www.css158.com/">段落六段落六段落六段落六段落六</a>
<a href="http://www.css158.com/">段落七段落七段落七段落七段落七 </a>
</div>
</body>
<script type="text/javascript">
var div=document.getElementById("div");
    div.innerHTML+=div.innerHTML;//复制一份div
var half=div.scrollHeight/2;
var b=true;//通过该变量来判断是否运动
    (function(){
var sp=div.scrollTop%30;//对div的scrollTop取模，判读什么时候停顿      
var isScroll=sp&&!b;//sp如果大于零则为true否则为false.这时候isScroll始终是fasle,因为b为true，如果不这样设置isScroll的话，当isScroll大于零时就不会执行下面的代码也就不会运动了
if(!isScroll){
if(div.scrollTop==half){//如果scrollTop等于half时则将scrollTop重置为零形成无缝滚动
                div.scrollTop=0;
            }
            div.scrollTop+=1;//自加,以便形成动画效果
        }
if(div.scrollTop%30){//如果没有滚到第几条信息时
            setTimeout(arguments.callee,50);
        }
else{//如果刚好滚到第几条信息
            setTimeout(arguments.callee,2000);
        }

    })();
</script>