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. apm的学习资料

    百度搜索    apm博客园 实现自己的APM http://www.cnblogs.com/Kevin-moon/archive/2009/02/23/1395039.html 异步机制,一共5篇文 ...

  2. CAfile: /etc/ssl/certs/ca-certificates.crt CRLfile: none 解决方法

    参考:CAfile: /etc/ssl/certs/ca-certificates.crt CRLfile: none 环境 主系统 OS X,虚拟机,Ubuntu 14.04 64bit. 问题描述 ...

  3. SQL——DDL简单语句

    基于MySQL的: status 命令查看MySQL当前信息 show databases; 命令列出所有数据库模式 use test; use命令切换到指定数据库模式 show tables; 列出 ...

  4. 2016"百度之星" - 初赛（Astar Round2B）1003 瞬间移动 组合数学+逆元

    瞬间移动  Accepts: 1018  Submissions: 3620  Time Limit: 4000/2000 MS (Java/Others)  Memory Limit: 65536/ ...

  5. MVC结构之Service概念

    所有的逻辑都放到M层,M层会臃肿. 所有的逻辑都放到C层,C层会臃肿. 这个时候需要一个中间层,Service层. Service可以倾向于Model层,比如处理订单查询相关的逻辑. Service可 ...

  6. PrestaShop 1.7 订单生成后下载服务器出现 505 的错误

    PrestaShop 生成订单后下载,服务器上有 505 的错误. 经查看应该是服务器上的错误: Allowed memory size of 134217728 bytes exhausted (t ...

  7. Linux如何修改命令提示符

    1.什么是命令提示符 命令提示符是CLI(command-line interface,命令行界面)在人机交互的过程中提示用户可以进行命令输入的特殊符号,在Linux中普通用户的prompt为“$”, ...

  8. Java 调用PHP的Web Service（三）

    usoap是PHP环境中的开源soap工具,算是用得比较多的一个工具了. 在utf-8环境中,nusoap可以工作得很好.但是当用于中文环境中时,nusoap经常会出现一些让人不得其解的问题. 最近一 ...

  9. 009PHP文件处理——文件处理 file_get_contents file_put_contents fgetc fgets fgetss

    <?php /** * 文件处理 file_get_contents file_put_contents fgetc fgets fgetss */ //fgetc() 传入文件操作句柄.每次获 ...

  10. CF 483B. Friends and Presents 数学 (二分) 难度:1

    B. Friends and Presents time limit per test 1 second memory limit per test 256 megabytes input stand ...