js基础教程四之无缝滚动

前面学习了相关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基础教程四之无缝滚动的更多相关文章

Qt零基础教程(四) QWidget详解篇
在博客园里面转载我自己写的关于Qt的基础教程,没次写一篇我会在这里更新一下目录: Qt零基础教程(四) QWidget详解(1):创建一个窗口 Qt零基础教程(四) QWidget详解(2):QWid ...
Qt零基础教程(四)QWidget详解(3):QWidget的几何结构
Qt零基础教程(四) QWidget详解(3):QWidget的几何结构这篇文章里面分析了QWidget中常用的几种几何结构下图是Qt提供的分析QWidget几何结构的一幅图,在帮助的 Wind ...
GSAP JS基础教程--动画的控制及事件
好多天没有写无博文啦,今天无聊就再写一下! 今天要讲的是TweenLite的一些事件以及,TweenLite动画的控制,TweenMax类似,请自行参考官方文档:http://api.greensoc ...
GSAP JS基础教程--TweenLite操作元素的相关属性
今天来学习用TweenLite操作元素的各种属性,以Div为例,其他元素的操作也是一样的,只是可能一些元素有它们的特殊属性,就可能不同罢了. 代码里用详细注释,我就不再重复啦,大家看代码就可以啦! ...
GSAP JS基础教程--使用缓动函数
今天来了解一下缓动easeing函数. 开始,如果你还没有GSAP的类包,可以到GreenSock的官网去下载最新版本的类包,或者直接点击这里来下载学习之前,先来准备一下: <!DO ...
js函数——倒计时模块和无缝滚动
倒计时效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
js原生选项卡（包含无缝滚动轮播图）一
原生js选项卡的几种写法,整片文章我会由简及难的描述几种常用的原生选项卡的写法: Improve little by little every day! 1>基本选项卡: 思路:循环中先清除再添 ...
SpringCloud2.0 Ribbon 服务发现基础教程(四)
1.启动[服务中心]集群,即 Eureka Server 参考 SpringCloud2.0 Eureka Server 服务中心基础教程(二) 2.启动[服务提供者]集群,即 Eureka Cli ...
Node.js基础学习四之注册功能
前言:在Node.js学习(二)和(三)中介绍了如何在Node.js 中获取登录的用户名和密码与数据库进行验证并返回数据给客户端需求:实现注册功能为了区分登录和注册是两个不同的请求,在端口后面加上 ...

随机推荐

【JAVA】 Java 连接池的工作原理
什么是连接? 连接,是我们的编程语言与数据库交互的一种方式.我们经常会听到这么一句话“数据库连接很昂贵“. 有人接受这种说法,却不知道它的真正含义.因此,下面我将解释它 ...
jsonp模拟获取百度搜索相关词汇
随便写了个jsonp模拟百度搜索相关词汇的小demo,帮助新手理解jsonp的用法. <!DOCTYPE html><html lang="en">< ...
cocos2d-x初步了解
1.渲染 2.帧率(FPS) 超过75一般就不容易察觉到有明显的流畅度提升 >50 非常好! 30~40 一般, 20~30 及格,有点勉强. 3.渲染驱动游戏事件驱动游戏 4.cocos ...
linux install wineQQ
Linux上没有QQ太麻烦了,查了一下讲wineQQ安装上去了,亲测可以使用滴---就是版本低,安装步骤如下: 一.安装Wine 1.添加PPA sudo add-apt-repository ppa ...
运用ASP.NET实现
calation.cs using System; using System.Collections.Generic; using System.Linq; using System.Web; /// ...
mallmold开源商城系统网银在线chinabank支付插件
最近没事捣鼓项目,找了个轻型商城系统mallmold,用起来还觉的挺不错的,尤其是mallmold中文版,赞一个.中文版集成了大部分主流支付系统,但因是个人网站,没法获得对应的服务,最终选择了网银在线 ...
Unity3D优化总结（一）
1.如使用碰撞器,简单的模型尽量使用自带的碰撞器如BoxCollider,少使用Mesh Collider. 2.如要使用Mesh Collider,可以做一个专用的模型(尽量少网格)做为Mesh C ...
CNUOJ 0486 800401反质数
难度级别:A: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述将正整数 x 的约数个数表示为 g(x).例如,g(1)=1,g(4)=3, g ...
O(n) 筛法求素数
var tot,i,j,k,m,n:longint; prime:array[0..100000] of boolean; p:array[0..100000] of longint;begin re ...
javaScript中其他类型的值转换为Boolean类型
将javaScript中其他任意类型的值转换为对应Boolean类型的值. 一将number类型的值转换为Boolean类型数值为0: var myBoolean = new Boolean(0 ...

js基础教程四之无缝滚动

js基础教程四之无缝滚动的更多相关文章

随机推荐

热门专题