zoukankan      html  css  js  c++  java
  • 网页特效图片连续滚动(上下左右)

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

    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>

  • 相关阅读:
    Algorithm Gossip (48) 上三角、下三角、对称矩阵
    .Algorithm Gossip (47) 多维矩阵转一维矩阵
    Algorithm Gossip (46) 稀疏矩阵存储
    Algorithm Gossip (45) 费氏搜寻法
    Algorithm Gossip (44) 插补搜寻法
    Algorithm Gossip (43) 二分搜寻法
    Algorithm Gossip (42) 循序搜寻法(使用卫兵)
    Algorithm Gossip (41) 基数排序法
    Algorithm Gossip (40) 合并排序法
    AlgorithmGossip (39) 快速排序法 ( 三 )
  • 原文地址:https://www.cnblogs.com/conquer/p/1345581.html
Copyright © 2011-2022 走看看