zoukankan      html  css  js  c++  java
  • 无缝滚动[转]

    <head>
    <title>21Andy.com - 兼容IE和FireFox的间隔滚动代码</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style type="text/css">
    <!--
    body {
     text-align:center;
    }
    #andyscroll {
     overflow: hidden;
     background: #E8F8F8;
     padding: 0 10px;
     text-align: left;
     400px;
     height:150px;
     overflow:hidden;
    }
    #andyscroll a {
     font:12px/18px tahoma;
     color: #000;
     float:left;
     100%;
     text-decoration: none;
     display:block;
    }
    #andyscroll a:hover {
     font:12px/18px tahoma;
     color: #F60;
    }
    -->
    </style>
    </head>
    <body>
    <div id="andyscroll">
     <div id="scrollmessage">
      <a href="http://www.kmyuda.com">育达育发网新闻报纸滚动效果1……</a>
      <a href="http://www.kmyuda.com">育达育发网新闻报纸滚动效果2……</a>
      <a href="http://www.kmyuda.com">育达育发网新闻报纸滚动效果3……</a>
      <a href="http://www.kmyuda.com">育达育发网新闻报纸滚动效果4……</a>
      <a href="http://www.kmyuda.com">育达育发网新闻报纸滚动效果5……</a>
      <a href="http://www.kmyuda.com">育达育发网新闻报纸滚动效果6……</a>
      <a href="http://www.kmyuda.com">育达育发网新闻报纸滚动效果7……</a>
      <a href="http://www.kmyuda.com">育达育发网新闻报纸滚动效果8……</a>
      <a href="http://www.kmyuda.com">育达育发网新闻报纸滚动效果9……</a>
      <a href="http://www.kmyuda.com">育达育发网新闻报纸滚动效果10……</a>
      <a href="http://www.kmyuda.com">育达育发网新闻报纸滚动效果11……</a>
      <a href="http://www.kmyuda.com">育达育发网新闻报纸滚动效果12……</a>
      <a href="http://www.kmyuda.com">育达育发网新闻报纸滚动效果13……</a>
      <a href="http://www.kmyuda.com">育达育发网新闻报纸滚动效果14……</a>
      <a href="http://www.kmyuda.com">育达育发网新闻报纸滚动效果15……</a>
      <a href="http://www.kmyuda.com">育达育发网新闻报纸滚动效果16……</a>
      <a href="http://www.kmyuda.com">育达育发网新闻报纸滚动效果17……</a>
      <a href="http://www.kmyuda.com">育达育发网新闻报纸滚动效果18……</a>
      <a href="http://www.kmyuda.com">育达育发网新闻报纸滚动效果19……</a>
    </div>
    <script type="text/javascript">
    <!--
    var stopscroll = false;
    var scrollElem = document.getElementById("andyscroll");
    var marqueesHeight = scrollElem.style.height;
    scrollElem.onmouseover = new Function('stopscroll = true');
    scrollElem.onmouseout  = new Function('stopscroll = false');
    var preTop = 0;
    var currentTop = 0;
    var stoptime = 0;
    var leftElem = document.getElementById("scrollmessage");
    scrollElem.appendChild(leftElem.cloneNode(true));
    init_srolltext();
    function init_srolltext(){
     scrollElem.scrollTop = 0;
     setInterval('scrollUp()', 115);//的面的这个参数25, 是确定滚动速度的, 数值越小, 速度越快
    }
    function scrollUp(){
     if(stopscroll) return;
     currentTop += 2; //设为1, 可以实现间歇式的滚动; 设为2, 则是连续滚动
     if(currentTop == 19) {
      stoptime += 1;
      currentTop -= 1;
      if(stoptime == 180) {
       currentTop = 0;
       stoptime = 0;
      }
     }else{
      preTop = scrollElem.scrollTop;
      scrollElem.scrollTop += 1;
      if(preTop == scrollElem.scrollTop){
       scrollElem.scrollTop = 0;
       scrollElem.scrollTop += 1;
      }
     }
    }
    //-->
    </script>
    </body>
    </html>
  • 相关阅读:
    【javascript 面试笔试】1、几道笔试题
    【菜鸟学习jquery源码】数据缓存与data()
    【javascript杂谈】你所不知道的replace函数
    001-编译hadoop-2.5.2总结
    静态工厂 + DbHelper
    用Socket来简单实现IIS服务器
    JS产生徐特尔图表
    JS中图片飞飞效果
    基础类型
    Linux-切换启动方式
  • 原文地址:https://www.cnblogs.com/witer666/p/957261.html
Copyright © 2011-2022 走看看