zoukankan      html  css  js  c++  java
  • javascript向上滚动(放上鼠标就停)

    本文使用Javascript实现DIV的内容不断的向上滚动,当鼠标移动到DIV上时,就停止滚动,当鼠标离开后又继续滚动。
    主要使用了JS的setInterval 函数。



    以下是完整代码:

    <!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>
    <title>javascript向上滚动(放上鼠标就停)--柯乐义</title>
    </head>
    <body>
    <div id="keleyi_com" style="overflow:hidden;height:90px;350px;border:1px solid silver;padding:5px">
    <div id="demo1">
    <a href="http://www.keleyi.com/menu/net/" target="_blank">.NET</a><br />
    <a href="http://www.keleyi.com/menu/javascript/" target="_blank">javascript</a><br />
    <a href="http://www.keleyi.com/menu/jquery/" target="_blank">jquery</a><br />
    <a href="http://www.keleyi.com/menu/csharp/" target="_blank">C#</a><br />
    <a href="http://www.keleyi.com/menu/other/" target="_blank">其他</a><br />
    <a href="http://www.keleyi.com/dev/4d233db8987beb38.htm" target="_blank">jquery四种选择器</a><br />
    <a href="http://www.keleyi.com/dev/84501a98b64d8bb8.htm" target="_blank">Javascript获取页面的标题(title)</a><br />
    <a href="http://www.keleyi.com/dev/da9ad054d87d5178.htm" target="_blank">jQuery向上弹出导航菜单</a><br />
    <a href="http://www.keleyi.com/dev/d4fcaae705f598a.htm" target="_blank">javascript向上滚动(放上鼠标就停)</a><br />
    <a href="http://www.keleyi.com" target="_blank">柯乐义</a><br />
    </div>
    <div id="demo2"></div>
    </div>
    <script type="text/javascript">
    var speed = 50
    demo2.innerHTML = demo1.innerHTML
    function Marquee() {
    if (demo2.offsetTop - keleyi_com.scrollTop <= 0)
    keleyi_com.scrollTop -= demo1.offsetHeight
    else {
    keleyi_com.scrollTop++
    }
    }
    var MyMar = setInterval(Marquee, speed)
    keleyi_com.onmouseover = function () { clearInterval(MyMar) }
    keleyi_com.onmouseout = function () { MyMar = setInterval(Marquee, speed) }
    </script>
    </body>
    </html>

  • 相关阅读:
    linux初学者-普通磁盘分区篇
    linux初学者-延迟及定时任务篇
    linux初学者-网络管理篇
    linux初学者-虚拟机联网篇
    贪吃蛇Ground Java实现(二)
    贪吃蛇 Java实现(一)
    创建异常
    IO流
    实训第一天
    Array 遍历数组
  • 原文地址:https://www.cnblogs.com/roucheng/p/2796955.html
Copyright © 2011-2022 走看看