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>

  • 相关阅读:
    测试精进之路
    访问Apache服务器自动跳转到https协议
    如何安装Chrome OS系统
    遇到Project Target Framework Not Installed解决方法
    2019开发者调查结果和总结
    「工具神器」推荐一个扒网页的神器
    Linux 使用Unzip提示write error (disk full?). Continue? (y/n/^C)的解决方法
    安卓编译Failed to authenticate Jack server certificate错误问题解决办法
    如何手动给APK文件签名
    如何给个人网站添加免费的SSL
  • 原文地址:https://www.cnblogs.com/kuyuecs/p/1531667.html
Copyright © 2011-2022 走看看