JS无缝向上轮显滚动代码_网站建设_北京网站建设-侠客工作室

服务在线

北京网站建设咨询
13718388147
QQ咨询：1300105556
24小时问题解答
咨询热线：13718388147

学习心得

JS无缝向上轮显滚动代码

JS无缝向上轮显滚动代码
发布时间：2011-04-22 类别：javascript技术来源：侠客工作室
- 1
- 2
- 3
- 4
- 5
先创建文件Rotator.html 拷贝下面的代码进去（带颜色的为有用部分）
----------------------------------------------------------------------
<!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>JS无缝向上轮显滚动代码-我是侠客工作室-北京最好的网站建设工作室</title>
<style>
    .border1pxblack{ border:solid 1px black;}
    .RotatorBlock{ width:300px; height:100px; height:40px; overflow:hidden; line-height:20px;}
    .RotatorBlock div{ height:20px;}
</style>
<script src="Rotator.js" language="javascript" ></script>
</head>
<body>
<div class="border1pxblack RotatorBlock" id="testR">
    <div><a href="http://www.54xiake.cn">我是侠客工作室-北京最好的网站建设工作室</a></div>
    <div><a href="http://www.54xiake.cn">我是侠客工作室-北京优秀网站建设工作室</a></div>
    <div><a href="http://www.54xiake.cn">我是侠客工作室-北京优质网站建设工作室</a></div>
    <div><a href="http://www.54xiake.cn">我是侠客工作室-北京完美网站建设工作室</a></div>
</div>
<script language="javascript">
    RotatorDiv("testR",40,2);
</script>
</body>
</html>

------------------------------------------

再创建文件Rotator.js，拷贝下面的代码进去
-------------------------------------------------------------------------------------
///滚动轮显
///id: div的id
///rotatorHeight: 每一次滚动的高度(单位px)
///interval: 轮流显示停留时间(单位秒)
function RotatorDiv(id, rotatorHeight, interval)
{
    var obj = document.getElementById(id);
    if(!obj) return;
    obj.style.overflow = "hidden";
    obj.originalHeight = obj.scrollHeight;//原始高度
    obj.currentRotatorHeight = 0;//当前滚动到的高度
    obj.rotatorInterval = interval;
    obj.innerHTML = obj.innerHTML + obj.innerHTML;
    obj.isMouseOn = false;
    obj.onmouseover = function(){this.isMouseOn = true;};
    obj.onmouseout = function(){this.isMouseOn = false;};

    window["scroll_interval_"+id] = setInterval(rotatorScroll(id,rotatorHeight),50)
}
function rotatorScroll(id,rotatorHeight)
{
    return function()
    {
        var obj = document.getElementById(id);
        if(!obj) return;
        if(obj.isMouseOn) return;
        var step = parseInt(rotatorHeight/10);
        if(obj.currentRotatorHeight<rotatorHeight && obj.currentRotatorHeight+step>rotatorHeight)
        {
            step = rotatorHeight - obj.currentRotatorHeight;
            obj.currentRotatorHeight = rotatorHeight;
        }
        else
        {
            obj.currentRotatorHeight = obj.currentRotatorHeight+step;
        }
        if(obj.currentRotatorHeight > rotatorHeight)
        {
            obj.currentRotatorHeight = 0;
            clearInterval(window["scroll_interval_"+id]);
            setTimeout(function(id,rotatorHeight){return function(){window["scroll_interval_"+id] = setInterval(rotatorScroll(id,rotatorHeight),50)}}

(id,rotatorHeight),obj.rotatorInterval*1000);
            return;
        }
        var ct = obj.scrollTop;
        ct+=step;
        obj.scrollTop = ct;
        if(obj.scrollTop >= obj.originalHeight)
        {
            obj.scrollTop = obj.scrollTop-obj.originalHeight;
        }
    }

}
中搜索：JS无缝向上轮显滚动代码   中搜索：JS无缝向上轮显滚动代码
中搜索：JS无缝向上轮显滚动代码   中搜索：JS无缝向上轮显滚动代码
中搜索：JS无缝向上轮显滚动代码  中搜索：JS无缝向上轮显滚动代码
☆☆☆技术交流群：5684178☆☆☆
上一篇：JS随机整数的函数
下一篇：js用层实现篇幅过长的文章分页