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 中获取登录的用户名和密码与数据库进行验证并返回数据给客户端 需求:实现注册功能 为了区分登录和注册是两个不同的请求,在端口后面加上 ...
随机推荐
- 谢欣伦 - OpenDev原创教程 - 设备查找类CxDeviceFind & CxDeviceMapFind
这是一个精练的设备查找类,类名.函数名和变量名均采用匈牙利命名法.小写的x代表我的姓氏首字母(谢欣伦),个人习惯而已,如有雷同,纯属巧合. CxDeviceFind的使用如下: void CUsbSc ...
- ccf模板生成
问题描述 成成最近在搭建一个网站,其中一些页面的部分内容来自数据库中不同的数据记录,但是页面的基本结构是相同的.例如,对于展示用户信息的页面,当用户为 Tom 时,网页的源代码是 而当用户为 Jerr ...
- bzoj 3438: 小M的作物
Description 背景 小M还是个特么喜欢玩MC的孩纸... 描述 小M在MC里开辟了两块巨大的耕地A和B(你可以认为容量是无穷),现在,小P有n中作物的种子,每种作物的种子有1个(就是可以种一 ...
- 关于页面中table中相同的列自动合并
代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- Educational Codeforces Round 6 E dfs序+线段树
题意:给出一颗有根树的构造和一开始每个点的颜色 有两种操作 1 : 给定点的子树群体涂色 2 : 求给定点的子树中有多少种颜色 比较容易想到dfs序+线段树去做 dfs序是很久以前看的bilibili ...
- NC57,NC63-NC二开经验总结
版主2010级市场营销专业本科生 2013年8月入达内培训Java相关技术 12月入职,做用友NC的二次开发工作 2015年4月离职,4中下旬入职一家互联网金融企业 下面是做NC二开期间积累的一些常用 ...
- MySQL触发器使用详解
MySQL包含对触发器的支持.触发器是一种与表操作有关的数据库对象,当触发器所在表上出现指定事件时,将调用该对象,即表的操作事件触发表上的触发器的执行. 创建触发器在MySQL中,创建触发器语法如下: ...
- oracle分组取第一条
SELECT * FROM (SELECT ROW_NUMBER() OVER(PARTITION BY x ORDER BY y DESC) rn,test1.* FROM test1) WHERE ...
- bootstrap 部分css样式
clip: rect(0, 0, 0, 0);剪裁绝对定位元素.outline: 0; cursor: not-allowed;
- C++求一个十进制的二进制中1的个数
int oneNumInBinary(int n){ ; while(n){ n = n&(n-); cnt++; } return cnt; }