zoukankan      html  css  js  c++  java
  • 连续滚动javascript(js)代码

    向上滚动

    <div id=”marquees”>
    <a href=”#”>链接一</a><br>
    <br>
    <a href=”#”>链接二</a><br>
    <br>
    <a href=”#”>链接三</a><br>
    <br>
    <a href=”#”>链接四</a>
    <br>
    </div>
    <script language=”JavaScript”>

    marqueesHeight=200;
    stopscroll=false;

    with(marquees){
    style.width=0;
    style.height=marqueesHeight;
    style.overflowX=”visible”;
    style.overflowY=”hidden”;
    noWrap=true;
    onmouseover=new Function(”stopscroll=true”);
    onmouseout=new Function(”stopscroll=false”);
    }
    document.write(’<div id=”templayer” style=”position:absolute;z-index:1;visibility:hidden”></div>’);

    preTop=0; currentTop=0;

    function init(){
    templayer.innerHTML=””;
    while(templayer.offsetHeight<marqueesHeight){
    templayer.innerHTML+=marquees.innerHTML;
    }
    marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
    setInterval(”scrollUp()”,10);
    }
    document.body.onload=init;

    function scrollUp(){
    if(stopscroll==true) return;
    preTop=marquees.scrollTop;
    marquees.scrollTop+=1;
    if(preTop==marquees.scrollTop){
    marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
    marquees.scrollTop+=1;
    }
    }
    </script>

    向下滚动

    <div id=”marquees”> <a href=”#”>链接一</a><br>
    <br>
    <a href=”#”>链接二</a><br>
    <br>
    <a href=”#”>链接三</a><br>
    <br>
    <a href=”#”>链接四</a><br>
    <br>
    </div>
    <script language=”JavaScript”>

    marqueesHeight=200;

    with(marquees){
    style.width=0;
    style.height=marqueesHeight;
    style.overflowX=”visible”;
    style.overflowY=”hidden”;
    noWrap=true;
    onmouseover=new Function(”stopscroll=true”);
    onmouseout=new Function(”stopscroll=false”);
    }
    document.write(’<div id=”templayer” style=”position:absolute;z-index:1;visibility:hidden”></div>’);
    preTop=0; currentTop=0;getlimit=0;stopscroll=false;

    function init(){
    templayer.innerHTML=””;
    while(templayer.offsetHeight<marqueesHeight){
    templayer.innerHTML+=marquees.innerHTML;
    }
    marquees.innerHTML+=templayer.innerHTML;
    setInterval(”scrollDown()”,10);
    }init();

    function scrollDown(){
    if(stopscroll==true) return;

    preTop=marquees.scrollTop;
    marquees.scrollTop-=1;
    if(preTop==marquees.scrollTop){
    if(!getlimit){
    marquees.scrollTop=templayer.offsetHeight*2;
    getlimit=marquees.scrollTop;
    }
    marquees.scrollTop=getlimit-templayer.offsetHeight+marqueesHeight;
    marquees.scrollTop-=1;
    }
    }
    </script>

    向左滚动

    <div id=”marquees”>
    <a href=”#”>链接一</a>
    <a href=”#”>链接二</a>
    <a href=”#”>链接三</a>
    <a href=”#”>链接四</a>
    </div>

    <div id=”templayer” style=”position:absolute;left:0;top:0;visibility:hidden”></div>
    <script language=”JavaScript”>

    marqueesWidth=200;

    with(marquees){
    style.height=0;
    style.width=marqueesWidth;
    style.overflowX=”hidden”;
    style.overflowY=”visible”;
    noWrap=true;
    onmouseover=new Function(”stopscroll=true”);
    onmouseout=new Function(”stopscroll=false”);
    }
    preLeft=0; currentLeft=0; stopscroll=false;

    function init(){
    templayer.innerHTML=””;
    while(templayer.offsetWidth<marqueesWidth){
    templayer.innerHTML+=marquees.innerHTML;
    }
    marquees.innerHTML+=templayer.innerHTML;
    setInterval(”scrollLeft()”,10);
    }init();

    function scrollLeft(){
    if(stopscroll==true) return;
    preLeft=marquees.scrollLeft;
    marquees.scrollLeft+=1;
    if(preLeft==marquees.scrollLeft){
    marquees.scrollLeft=templayer.offsetWidth-marqueesWidth+1;
    }
    }
    </script>

    向右滚动

    <div id=”marquees”>
    <a href=”#”>链接一</a>
    <a href=”#”>链接二</a>
    <a href=”#”>链接三</a>
    <a href=”#”>链接四</a>
    </div>
    <div id=”templayer” style=”position:absolute;left:0;top:0;visibility:hidden”></div>
    <script language=”JavaScript”>

    marqueesWidth=200;

    with(marquees){
    style.height=0;
    style.width=marqueesWidth;
    style.overflowX=”hidden”;
    style.overflowY=”visible”;
    noWrap=true;
    onmouseover=new Function(”stopscroll=true”);
    onmouseout=new Function(”stopscroll=false”);
    }
    preTop=0; currentTop=0; getlimit=0; stopscroll=false;

    function init(){
    templayer.innerHTML=””;
    while(templayer.offsetWidth<marqueesWidth){
    templayer.innerHTML+=marquees.innerHTML;
    }
    marquees.innerHTML+=templayer.innerHTML;
    setInterval(”scrollRight()”,10);
    }init();

    function scrollRight(){
    if(stopscroll==true) return;

    preLeft=marquees.scrollLeft;
    marquees.scrollLeft-=1;
    if(preLeft==marquees.scrollLeft){
    if(!getlimit){
    marquees.scrollLeft=templayer.offsetWidth*2;
    getlimit=marquees.scrollLeft;
    }
    marquees.scrollLeft=getlimit-templayer.offsetWidth+marqueesWidth;
    marquees.scrollLeft-=1;
    }
    }
    </script>

  • 相关阅读:
    ES6 一些新特性的总结
    前端模块化开发的规范:AMD与CDM
    webpack与grunt/glub 的比较
    前端总结(一)
    前端性能的优化
    Typescript 常见写法
    显示模式------行内元素、块元素,行内块元素
    浏览器前缀及内核
    BFC规范
    数据库习题练习
  • 原文地址:https://www.cnblogs.com/kuyuecs/p/1531667.html
Copyright © 2011-2022 走看看