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


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

    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>

  • 相关阅读:
    基于密度的dbScan轨迹聚类
    更新yum 源
    搭建git linux 服务器
    富文本编辑器
    轨迹聚类分析问题
    hdu3078(lca / RMQ在线)
    zoj3195(lca / RMQ在线)
    hdu2874(lca / tarjan离线 + RMQ在线)
    hdu2586(lca模板 / tarjan离线 + RMQ在线)
    高斯消元求解方程组(模板)
  • 原文地址:https://www.cnblogs.com/conquer/p/1345581.html
Copyright © 2020-2023  润新知