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

     1<style>
     2{font-size:9pt;color:#333;text-decoration:none;}
     3a:hover {color:#111;text-decoration:underline;}
     4
    </style>
     5
     6<div id="marquees">
     7  <href="#">你可曾有过无数的梦想</a><br><br>
     8  <href="#">却在时光的流逝里幻灭</a><br><br>
     9  <href="#">你可曾对未来期待憧憬</a><br><br>
    10  <href="#">却在成长的岁月中迷失</a><br><br>
    11</div> 
    12<script language="JavaScript">
    13marqueesHeight=200;
    14stopscroll=false;
    15with(marquees){
    16  style.width=0;
    17  style.height=marqueesHeight;
    18  style.overflowX="visible";
    19  style.overflowY="hidden";
    20  noWrap=true;
    21  onmouseover=new Function("stopscroll=true");
    22  onmouseout=new Function("stopscroll=false");
    23}

    24document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
    25
    26preTop=0; currentTop=0
    27
    28function init(){
    29  templayer.innerHTML="";
    30  while(templayer.offsetHeight<marqueesHeight){
    31    templayer.innerHTML+=marquees.innerHTML;
    32  }

    33  marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
    34  setInterval("scrollUp()",50);
    35}

    36document.body.onload=init;
    37
    38function scrollUp(){
    39  if(stopscroll==truereturn;
    40  preTop=marquees.scrollTop;
    41  marquees.scrollTop+=1;
    42  if(preTop==marquees.scrollTop){
    43    marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
    44    marquees.scrollTop+=1;
    45  }

    46}

    47
    </script> 
    48
  • 相关阅读:
    @media screen响应式
    gulp轻松上手
    Node.js基本讲解
    百度地图
    SQL语言(增删改查)
    AJAX基本介绍(web前端)
    找出链表的第一个公共节点
    微软算法100题58 从尾到头输出链表(java)
    最长递增子序列
    各种排序算法
  • 原文地址:https://www.cnblogs.com/zwl12549/p/752164.html
Copyright © 2011-2022 走看看