滚动效果--转

cocofuyi

浏览: 5966 次
性别:
来自: 济南

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" language="javascript">
        //定义一变量，存储需要滚动的容器对象
        var divObject;
        //定义一变量，决定是否滚动
        var fagStopScroll = false;
        //这个方法主要初始化滚动容器对象的一些事件
        //也可以直接写在外面，但是这样就需要把这段JS加在页面的最后
        function SetObject() {
            //获取需要滚动的容器对象
            divObject = document.all.div_scroll;
            //检查对象是否为空，如果不为空执行初始化操作
            with (divObject) {
                //为divObject对象初始化两个事件，一个为鼠标放上去，一个为鼠标移开
                //在这里，我们主要修改一个属性的值就可以了，让它来决定是否需要滚动
                //鼠标放上去
                onmouseover = new Function("fagStopScroll=true");
                //鼠标移开
                onmouseout = new Function("fagStopScroll=false");
            }
        }
        //实现滚动方法
        function TimeScorrl() {
            //判断是否需要进行滚动，如果为True就直接返回
            if (fagStopScroll == true) return;
            //得到当前容器的scrollTop高度
            //一般第一次进来都为0
            var divScrollTop = divObject.scrollTop;
            //所以在这里，我们进行加1，
            divObject.scrollTop += 1;
            //判断该容器是否滚动到了最后
            if (divScrollTop == divObject.scrollTop) {
                //如果是，就直接把内容在赋值一下，这样就达到了无缝隙的滚动
                //这样就会有个小BUG，就是如果用户停留页面时间太长，就会出现很多沉于数据
                divObject.innerHTML += divObject.innerHTML;
                //这样设置就是直接重新开始滚动
                //divObject.scrollTop += 1;
            }
        }

        function TimeMain() {
            //如果这里不写成一个方法调用，那么就需要把这段JS写在页面的最后
            //因为如果写在外面，那么JS是重上往下执行，就导致初始化得不到对象和设置相应的事件
            SetObject();
            //利用定时器调用我们的方法并指定一个时间
            //大概意思就是每过多少时间就执行一次这个方法
            setInterval("TimeScorrl()", 50);
        }

</script>
</head>
<body>
    <div id="div_scroll" style="width:300px; height:150px; overflow:hidden; ">
<table>
<tr><td>>>>>>>>>>>>>>>>>>>lzg123</td></tr>
<tr><td>>>>>>>>>>>>>>>>>>>lzg1234</td></tr>
<tr><td>>>>>>>>>>>>>>>>>>>lzg1235</td></tr>
<tr><td>>>>>>>>>>>>>>>>>>>lzg1236</td></tr>
<tr><td>>>>>>>>>>>>>>>>>>>lzg1237</td></tr>
<tr><td>>>>>>>>>>>>>>>>>>>lzg1238</td></tr>
<tr><td>>>>>>>>>>>>>>>>>>>lzg1239</td></tr>
<tr><td>>>>>>>>>>>>>>>>>>>lzg1234</td></tr>
<tr><td>>>>>>>>>>>>>>>>>>>lzg1235</td></tr>
<tr><td>>>>>>>>>>>>>>>>>>>lzg1236</td></tr>
<tr><td>>>>>>>>>>>>>>>>>>>lzg1237</td></tr>
<tr><td>>>>>>>>>>>>>>>>>>>lzg1238</td></tr>
<tr><td>>>>>>>>>>>>>>>>>>>lzg1239</td></tr>
<tr><td>>>>>>>>>>>>>>>>>>>lzg1234</td></tr>
<tr><td>>>>>>>>>>>>>>>>>>>lzg1235</td></tr>
<tr><td>>>>>>>>>>>>>>>>>>>lzg1236</td></tr>
<tr><td>>>>>>>>>>>>>>>>>>>lzg1237</td></tr>
<tr><td>>>>>>>>>>>>>>>>>>>lzg1238</td></tr>
<tr><td>>>>>>>>>>>>>>>>>>>lzg1239</td></tr>
<tr><td>>>>>>>>>>>>>>>>>>>lzg123</td></tr>
<tr><td>>>>>>>>>>>>>>>>>>>lzg123</td></tr>
<tr><td>>>>>>>>>>>>>>>>>>>lzg123</td></tr>
<tr><td>>>>>>>>>>>>>>>>>>>lzg123</td></tr>
<tr><td>>>>>>>>>>>>>>>>>>>lzg123</td></tr>
</table>

    </div>
    <script type="text/javascript">
        TimeMain();

</script>
</body>
</html>

分享到：

j调试用于打印错误 | jquery获得鼠标坐标

2014-02-24 17:41
浏览 310
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论