码迷,mamicode.com
首页 > Web开发 > 详细

js基础教程四之无缝滚动

时间:2014-12-30 16:47:12      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:

前面学习了相关js的一些基础知识,这节主要针对定时器作综合运用:

无缝滚动-基础

效果演示:

*物体运动基础

*让div移动起来

*offsetLeft的作用

*用定时器让物体连续移动

<style type="text/css">
#div1{ width:100px; height:100px; background:#CCC; margin-top:10px; position:absolute; left:0px;}
</style>
<script type="text/javascript">
window.onload=function()
{
	var begin = document.getElementById("begin");
	var stopp = document.getElementById("stopp");
	var div1 = document.getElementById("div1");
	var timer = null;
	
	begin.onclick = function()
	{
	    timer = setInterval(function(){	
	    div1.style.left = div1.offsetLeft + 5 + "px";
	     },30);
             //alert(div1.offsetLeft);   返回0
             ////在用offsetLeft时一定要在css里设置其left,否则取到的将是Null值,还有相应的position
		
	};
	stopp.onclick = function()
	{
        clearTimeout(timer);
	};
};
</script>
</head>
<body>
<input id="begin" type="button" value="向左移动" />
<input id="stopp" type="button" value="停止移动" />
<div id="div1"></div>
</body>

--效果原理

让ul一直向左移动

复制li

a),innerHTML和 + ‘‘

b),修改ul的width

滚动过界后,重设位置

 a).判断过界

相关代码:

<style type="text/css">
#div1{ width:100px; height:100px; background:#CCC; margin-top:10px; position:absolute; left:0px;}
.roll{ width:400px; height:120px; margin:50px auto 0; position:relative;} 
img{ width:100px; height:100px; border:#FC9 1px solid;}
.btnLeft { display:block; width:30px; height:30px; background:url(pic/PagePre.png) no-repeat 12px 10px; position:absolute; top:50px; left:1px; z-index:1px; }
.btnLeft:hover { background:url(pic/PagePre.png) no-repeat 12px 9px;}
.btnRight{ display:block; width:30px; height:30px; background:url(pic/PageNext.png) no-repeat 1px 16px; position:absolute; top:50px; right: 0; z-index:1;}
.btnRight:hover { background:url(pic/PageNext.png) no-repeat 1px 15px;}
.warp { width:400px; height:120px; margin:0 auto; position:relative; overflow:hidden;}
ul{ list-style-type:none; position:absolute;}
li{ float:left; width:100px; height:100px; text-align:center;}
</style>
<script type="text/javascript">                                                                     
window.onload=function() 
{
	var oDiv= document.getElementById("roll");
	var oUI = document.getElementsByTagName("ul")[0];
	var oLi = document.getElementsByTagName("li");
	
	//var oLeft = document.getElementById("left"); 向左按钮
	//var oRight = document.getElementById("right"); 向右按钮
	
	var wapDiv = document.getElementById("wap");
	var timer = null;
	var isSpeed = -5;
	
    oUI.innerHTML += oUI.innerHTML;
    oUI.style.width = oLi[0].offsetWidth * oLi.length + "px"; //400  
	
	timer = setInterval(function margin(){
	    oUI.style.left = oUI.offsetLeft + isSpeed + "px";
	    if(oUI.offsetLeft < -oUI.offsetWidth/2)
		{	
		  oUI.style.left = ‘0px‘ ;
		}else if(oUI.offsetLeft > 0)
		{
           oUI.style.left = -oUI.offsetWidth /2;
		}
	    },30);
	
	wapDiv.onmouseout = function()  //鼠标放上去
	{
	    timer = setInterval(function margin(){
	    oUI.style.left = oUI.offsetLeft + isSpeed + "px";
	    if(oUI.offsetLeft < -oUI.offsetWidth/2)
		{	
		  oUI.style.left = ‘0px‘ ;
		}else if(oUI.offsetLeft > 0)
		{
                 oUI.style.left = -oUI.offsetWidth /2;
		}
	    },30);
	};
	
	wapDiv.onmouseover = function() //鼠标移走
	{
		clearTimeout(timer);
	};

 

<div class="roll" id="roll">
<a href="javascript:void(0);" id="left" class="btnLeft"></a>
<a href="javascript:void(0);" id="right" class="btnRight"></a>
<div id="wap" class="warp">
 <ul>
  <li> <img src="pic/1.jpg" /> </li>
  <li> <img src="pic/2.jpg" /> </li>
  <li> <img src="pic/3.jpg" /> </li>
  <li> <img src="pic/4.jpg" /> </li>
  <li> <img src="pic/1.jpg" /> </li>
  <li> <img src="pic/2.jpg" /> </li>
  <li> <img src="pic/3.jpg" /> </li>
  <li> <img src="pic/4.jpg" /> </li>
</ul>
</div>
</div>

 向左向右的功能还有待完善,只需改变isSpeed=5;的参数,这里只有鼠标移入移出事件,类似效果图:

技术分享

 

js基础教程四之无缝滚动

标签:

原文地址:http://www.cnblogs.com/Annayang/p/4180142.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!