zoukankan      html  css  js  c++  java
  • scrollLeft的相关问题(js横向无缝滚动)

    <div id="demo">
    	<div id="innerdemo">
    		<div id="demo1">
    			<img src="images/0.jpg" />
    			<img src="images/1.jpg" />
    			<img src="images/2.jpg" />
    			<img src="images/3.jpg" />
    			<img src="images/4.jpg" />
    			<img src="images/5.jpg" />
    		</div>
    		<div id="demo2"></div>
    	</div>
    </div>
    
    #demo{ 600px; height:200px; border:1px solid #CCC; margin:20px auto; overflow:hidden;}
    #innerdemo{ 800%; }
    #demo1,#demo2{float:left;}
    
    function crossMarquee(){
    	var speed=10;
    	var oDemo=document.getElementById("demo");
    	var oinnerDemo=document.getElementById("innerdemo");
    	var oDemo1=document.getElementById("demo1");
    	var oDemo2=document.getElementById("demo2");
    	oDemo2.innerHTML=oDemo1.innerHTML;
    	function Marquee(){
    		if(oDemo1.offsetWidth<=oDemo.scrollLeft){
    			oDemo.scrollLeft-=oDemo1.offsetWidth;
    		}else{
    			oDemo.scrollLeft++;
    		}
    	}
    	var myMar=setInterval(Marquee,speed);
    	oDemo.onmouseover=function(){clearInterval(myMar);}
    	oDemo.onmouseout=function(){myMar=setInterval(Marquee,speed);}
    }
    window.onload=function(){
    	crossMarquee()
    
    };
    

    这是一个简单的js无缝滚动代码,有个需要注意的地方

    1、scrollLeft必须在最外层容器上执行

    2、scrollLeft无需加单位px

  • 相关阅读:
    Linux JDK安装
    Redis集群搭建
    Struts2 中添加 Servlet
    js小技巧:数组去重
    修改Request 中的数据
    JAVA 图形界面开发基础详解
    JAVA 类和对象基础知识详解
    Java 类的继承详解
    C++ 大学课堂知识点总结
    数据库简单练习 建表+select
  • 原文地址:https://www.cnblogs.com/diantao/p/4970094.html
Copyright © 2011-2022 走看看