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
  • 相关阅读:
    有个名字叫随便乱记——css3
    CSS3伸缩布局
    路政整理
    GIst
    SVN回滚版本
    你需要知道的CSS3 动画技术
    iScroll框架的使用和修改
    CSS3阴影 box-shadow的使用和技巧总结
    Javascript异步编程的4种方法
    zepto学习零碎
  • 原文地址:https://www.cnblogs.com/zwl12549/p/752164.html
Copyright © 2011-2022 走看看