zoukankan      html  css  js  c++  java
  • Javascript实现无缝滚动的问题讨论

    <div id="demo" style="overflow: hidden; height: 80px;  180px;">
    	<div id="demo1" class="demo1">
    		<ul>
    			<li><img src="list.gif" /> <a title=".net开发工程师" href="#">.net开发工程师</a></li>
    			<li><img src="list.gif" /> <a title="项目经理" href="#">项目经理 </a></li>
    			<li><img src="list.gif" /> <a title="虚拟化测试工程师" href="#">虚拟化测试工程师</a></li>
    			<li><img src="list.gif" /> <a title="销售经理" href="#">销售经理 </a></li>
    			<li><img src="list.gif" /> <a title="协议测试工程师" href="#">协议测试工程师</a></li>
    			<li><img src="list.gif" /> <a title="协议开发工程师" href="#">协议开发工程师</a></li>
    			<li><img src="list.gif" /> <a title="驱动工程师" href="#">驱动工程师 </a></li>
    			<li><img src="list.gif" /> <a title="J2ee软件开发工程师" href="#">J2ee软件开发工程师</a></li>
    			<li><img src="list.gif" /> <a title="赴IBM 大机技术支持工程师" href="#">赴IBM大机技术支持工程师</a></li>
    			<li><img src="list.gif" /> <a title="赴IBM Websphere portal server实施工程师" href="#">赴IBMWebsphere portal server实施工程师 </a></li>
    			<li><img src="list.gif" /> <a title="赴IBM AIX系统管理员" href="#">赴IBMAIX系统管理员 </a></li>
    		</ul>
    	</div>
    	<div id="demo2" class="demo2"></div>
    </div>

      

    //方法1
    function Marquee1(){
    if(2*demo1.offsetHeight-demo.scrollTop<=80)
    {
    demo.scrollTop-=demo1.offsetHeight;
      }
    else{
    demo.scrollTop++ ; 
    }
    }
    //方法2
    function Marquee21(){
     if(demo2.offsetTop-demo.scrollTop<=0)
    {
     demo.scrollTop-=demo1.offsetHeight;
    }
    else{
    demo.scrollTop++ ; 
    }
    }
    

      

    注:offsetTop指的是demo2对应的div到当前对象到其上级层顶部的距离,如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象),直到body或一个table上级层(Table时则不会有问题,不会跳过的)。

    scrollTop:对象的最顶部到对象在当前窗口显示的范围内的顶边的距离.即是在出现了纵向滚动条的情况下,因滚动条拉动而隐藏的距离.

    offsetHeight:当前对象的高度。

    当使用第一个方法的时候请注意一个问题,就是当demo2.offsetTop地距离大于demo1和demo2高度和的时候,滚动只会执行一次

  • 相关阅读:
    凯撒密码、GDP格式化输出、99乘法表
    字符串基本操作
    第四次作业
    第三次作业
    012黄意芳
    test指令的测试功能
    date命令
    zendstudio 10 项目导入乱码的解决
    用modelsim和debussy协同仿真VHDL Verilog的流程
    使用Debussy+ModelSim快速查看前仿真波形
  • 原文地址:https://www.cnblogs.com/heshan664754022/p/2384714.html
Copyright © 2011-2022 走看看