• 网页特效图片连续滚动(上下左右)


    图片连续滚动的解决方法先来认识一下几个参数:

    innerHTML:设置或获取位于对象起始和结束标签内的 HTML
    scrollHeight: 获取对象的滚动高度。
    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
    scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
    scrollWidth:获取对象的滚动宽度
    offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
    offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
    offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
    offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度


    图片上下连续滚动

    <table border=1><tr><td><div id="marquees">
    <a href="#">链接一</a><br>
    <br>
    <a href="#">链接二</a><br>
    <br>
    <a href="#">链接三</a><br>
    <br>
    <a href="#">链接四</a><br>
    <br>
    </div></td></tr></table>
    <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 style="200px;overflow:hidden">
    <div style="position:relative;top:0px;left:0px;white-space:nowrap" id=news>
    <span id=nbo><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></B><B><font color="#22FF22">观</font><font color="#FF2222">往</font><font color="#001199">知</font><font color="#00fffa">来</font></B></span>
    <script language=javascript>
    //重复一次新闻内容
    document.write(nbo.innerHTML);
    </script>
    </div>
    </div>
    <script language=javascript>
    //实现不间断滚动
    function newsScroll()
    {
    news.style.pixelLeft=(news.style.pixelLeft-1)%nbo.offsetWidth;
    }
    timer1=setInterval('newsScroll()',10) //更改第二个参数可以改变速度,值越小,速度越快。
    </script>

  • 相关阅读:
    考驾照的心得
    VS2005+ACCESS WEB程序出错数据访问权限错误的解决方法
    delphi开发回忆录——面向对象的基础,继承(续)
    用人不疑,疑人不用
    delphi开发回忆录——示例源码下载
    delphi开发回忆录——面向对象的基础,继承
    delphi开发回忆录——面向对象的基础,继承(续)
    delphi开发回忆录——示例源码下载
    考驾照的心得
    Win32 API消息函数:GetMessagePos
  • 原文地址:https://www.cnblogs.com/conquer/p/1345581.html
Copyright © 2020-2023  润新知