1.无缝滚动——基础

物体运动基础
让Div移动起来
offsetLeft的作用
用定时器让物体连续移动
 
offsetLeft:
获取物体的左边距;最大的优点在于可以综合考虑所有影响这个物体位置的因素之后,得出来一个最终的结论。
如果仅仅取left,margin就考虑不到;
 
offsetLeft/offsetTop : offsetTop获取物体的上边距
offsetWidth/offsetHeight : 获取物体的宽度以及高度;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute; left:200px; top:150px; margin:50px;}
</style>
</head> <body>
<div id="div1" onclick="alert(this.offsetLeft);">
</div>
</body>
</html>
 无缝滚动demo:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
* {margin:0; padding:0;}
#div1 {width:712px; height:108px; margin:100px auto; position:relative; background:red; overflow:hidden;}
#div1 ul {position:absolute; left:0; top:0;}
#div1 ul li {float:left; width:178px; height:108px; list-style:none;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li'); var speed=-2; oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'; function move(){
if(oUl.offsetLeft<-oUl.offsetWidth/2)
{
oUl.style.left='0';
}
if(oUl.offsetLeft>0)
{
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft+speed+'px';
}
var timer=setInterval(move, 30); oDiv.onmouseover=function ()
{
clearInterval(timer);
}; oDiv.onmouseout=function ()
{
timer=setInterval(move, 30);
}; document.getElementsByTagName('a')[0].onclick=function ()
{
speed=-2;
};
document.getElementsByTagName('a')[1].onclick=function ()
{
speed=2;
};
};
</script>
</head> <body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
<ul>
<li><img src="img2/1.jpg" /></li>
<li><img src="img2/2.jpg" /></li>
<li><img src="img2/3.jpg" /></li>
<li><img src="img2/4.jpg" /></li>
</ul>
</div>
</body>
</html>
 
 

 
 
 
 
 
------------

学习blus老师js(3)--定时器的使用的更多相关文章

  1. 学习blus老师js(6)--js运动基础

    运动基础 一.匀速运动 运动框架 在开始运动时,关闭已有定时器 把运动和停止隔开(if/else) <!DOCTYPE HTML> <html> <head> &l ...

  2. 学习blus老师js(5)--DOM操作应用高级

    一.表格应用 - 1 获取 tBodies.tHead.tFoot.rows.cells 一个表格可以有很多tbody,所以tBodies是数组: 一个表格只能有一个thead和tfoot,所以tHe ...

  3. 学习blus老师js(1)--基础

    1.网页换肤: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <t ...

  4. 学习blus老师js(4)--DOM

    一.DOM节点 1.获取子节点: childNodes  nodeType         节点类型 children            只包括元素,不包括文本:  子节点只算第一层.只算孩子一级 ...

  5. 学习blus老师js(2)--深入JavaScript

    1.函数传参 可变参(不定参):arguments 参数的个数可变,参数数组   例1.求和 求所有参数的和 <!DOCTYPE HTML> <html> <head&g ...

  6. Javascript学习记录——原生JS实现旋转木马特效

    昨天学习到了JS特效部分,然后老师讲了旋转木马特效的实现,如上图.不过只是讲了通过点击箭头实现图片的切换,对于点击图片本身以及二者联动却是没有讲解. 本着一颗追求完美的心,今天花费了一个中午终于将整个 ...

  7. 【JavaScript基础】Js的定时器(你想看的原理也在哟)

    [JavaScript基础]Js的定时器(你想看的原理也在哟) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 本章是经历 ...

  8. bootstrap插件学习-bootstrap.dropdown.js

    bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...

  9. bootstrap插件学习-bootstrap.modal.js

    bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...

随机推荐

  1. 获取lambda表达式类型,获取attributes是注意事项

    1.获取lambda表达式的MemberExpression所属类的类型,要使用:m.Expression.Type   而不要使用 m.Member.DeclaringType: 后者获取的是实际定 ...

  2. UVa 10891 Sum游戏

    https://vjudge.net/problem/UVA-10891 题意: 有一个长度为n的整数序列,两个游戏者A和B轮流取数,A先取.每次玩家只能从左端或者右端取任意数量个数,但不能两端都取. ...

  3. hdu 4745 Two Rabbits 区间DP

    http://acm.hdu.edu.cn/showproblem.php?pid=4745 题意: 有两只兔子Tom Jerry, 他们在一个用石头围城的环形的路上跳, Tom只能顺时针跳,Jerr ...

  4. python 输出时间

    import datetime print(datetime.datetime.now().time())

  5. Mediator(中介者)

    意图: 用一个中介对象来封装一系列的对象交互.中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互. 适用性: 一组对象以定义良好但是复杂的方式进行通信.产生的相互依 ...

  6. 后端利用Redis队列及哈希实现定时推送提醒的三个思路

    周煦辰 2016年8月31日 本文介绍了一下本人在开发过程中遇到"定时推送提醒"的需求的时候所思考的三种解决方案. 明确问题 首先明确一下这个需求可能包含的几个"坑&qu ...

  7. C# 使用Dictionary、linq实现根据集合里面的字符串进行分组

    //对下面集合里面的字符串按照“_”进行分组. List<string> list = new List<string>() { "1_32", " ...

  8. windows使用git记录

    1.免密码clone远程服务器代码开启ssh 生成私钥公钥 命令:查看自己配置的邮箱 git config user.name git config user.email 生成密钥:邮箱填写上面查看出 ...

  9. IOS-网络(小文件下载)

    // // ViewController.m // IOS_0131_小文件下载 // // Created by ma c on 16/1/31. // Copyright © 2016年 博文科技 ...

  10. 040——VUE中组件之组件间的数据参props的使用实例操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...