• js上下滚动代码


    编辑器加载中...

    <div id="div_babyhome" style="overflow: hidden; height: 253px;  100%;">
    <div id="div_scorlltop1">

    </div>
    </div>
    <div id="div_scorlltop2">
    </div>

    <script type="text/javascript">
    var speed = 30;
    var MyMar1 = null;
    var MyMar2 = null;
    var colee2 = document.getElementById("div_scorlltop2");
    var colee1 = document.getElementById("div_scorlltop1");
    var colee = document.getElementById("div_babyhome");
    colee2.innerHTML = colee1.innerHTML; //克隆colee1为colee2
    function Marquee1() {
    //当滚动至colee1与colee2交界时
    if (colee2.offsetTop - colee.scrollTop <= 0) {
    clearInterval(MyMar1);
    MyMar1 = null;
    MyMar2 = setInterval(Marquee2, speed); //colee.scrollTop -= colee1.offsetHeight; //colee跳到最顶端
    } else {
    colee.scrollTop = colee.scrollTop + 1;
    }
    }
    MyMar1 = setInterval(Marquee1, speed)//设置定时器
    //鼠标移上时清除定时器达到滚动停止的目的
    colee.onmouseover = function() {
    if (MyMar1 != null)
    clearInterval(MyMar1);
    if (MyMar2 != null)
    clearInterval(MyMar2);
    }
    //鼠标移开时重设定时器
    colee.onmouseout = function() {
    if (MyMar1 != null)
    MyMar1 = setInterval(Marquee1, speed);
    if (MyMar2 != null)
    MyMar2 = setInterval(Marquee2, speed);
    }

    function Marquee2() {
    if (colee2.offsetTop - colee.scrollTop >= 0) {
    colee.scrollTop--;
    if (colee.scrollTop == 0) {
    clearInterval(MyMar2);
    MyMar2 = null;
    MyMar1 = setInterval(Marquee1, speed);
    }
    }
    else {
    colee.scrollTop += colee2.offsetHeight;
    }
    }
    </script>

  • 相关阅读:
    【简报】一款使用静态图片生成动画的jQuery插件:JZoopraxiscope
    使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效
    超酷信息图分享:你属于哪类geek?
    数据库操作优化
    android R.java aapt
    xml sax 解析 & 符号
    sql server2000 完全卸载
    cmd 命令总结
    手动打包 解释
    bat 执行 java jar包
  • 原文地址:https://www.cnblogs.com/jonhson/p/2196240.html
Copyright © 2020-2023  润新知