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. log4j2配置按照日志级别将日志输出到不同的文件

    背景 在项目中,可能会产生非常多的日志记录,为了方便日志分析,可以将日志按级别输出到指定文件. log4j2.xml配置文件 <!--将info级别的日志单独输出到info.log中--> ...

  2. 【熊猫TV】《程序员》：聚光灯下的熊猫TV技术架构演进

    2015年开始的百播大战,熊猫TV是其中比较特别的一员. 说熊猫TV是含着金钥匙出生的公子哥不为过.还未上线,就频频曝光,科技号,微博稿,站上风口浪尖.内测期间更是有不少淘宝店高价倒卖邀请码,光内测时 ...

  3. cf 429 B Working out

    B. Working out time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  4. Cuda 9.2 CuDnn7.0 官方文档解读

    目录 Cuda 9.2 CuDnn7.0 官方文档解读 准备工作(下载) 显卡驱动重装 CUDA安装 系统要求 处理之前安装的cuda文件 下载的deb安装过程 下载的runfile的安装过程 安装完 ...

  5. python 字典元素值的乘积

    my_dict = {,,} result= for key in my_dict: result=result * my_dict[key] print(result)

  6. Redis为什么要把所有数据放到内存中？

    Redis为了达到最快的读写速度将数据都读到内存中,并通过异步的方式将数据写入磁盘.所以Redis具有快速和数据持久化的特性. 如果不将数据放到内存中,磁盘的I/O速度会严重影响redis的性能.在内 ...

  7. 将keras模型在django中应用时出现的小问题——ValueError: Tensor Tensor("dense_2/Softmax:0", shape=(?, 8), dtype=float32) is not an element of this graph.

    本文原出处(感谢作者提供):https://zhuanlan.zhihu.com/p/27101000 将keras模型在django中应用时出现的小问题 王岳王院长 10 个月前 keras 一个做 ...

  8. 巴什博奕——hdu2149

    #include <bits/stdc++.h> using namespace std; typedef long long ll; const int INF = 0x3f3f3f3f ...

  9. js取整，保留小数位数、四舍五入、科学记数法及去掉数字末尾多余的0

    1.向下取整 var num1 = 12.10345; var num2 =12.9801; var newnum1=Math.floor(num1)     //结果 12 var newnum2= ...

  10. IOS-Core Data的使用

    二.Core Data的使用(一) CoreData 1.  常用类和方法   ( 注意需要导入   coredata  框架   ) 表结构:NSEntityDescription 表记录:NSMa ...