效果：

代码：

 <head runat="server">

     <title></title>

     <style type="text/css">

         #div1

         {

             width: 245px;

             height: 150px;

             background: red;

             margin: 250px;

             margin-left: 500px;

             position: absolute;

             overflow: hidden;

         }

         #div1 ul li

         {

             float: left;

             width: 44px;

             height: 66px;

             margin-top: 20px;

             margin-right: 5px;

             list-style: none;

         }

         #div1 ul

         {

             width: 250px;

             position: absolute;

             padding: 0;

         }

     </style>

     <script type="text/javascript">

         window.onload = function () {

             var oul = document.getElementsByTagName('ul')[0];

             var odiv = document.getElementById('div1');

             var ali = document.getElementsByTagName('li');

             oul.innerHTML = oul.innerHTML + oul.innerHTML;

             oul.style.width = (ali[0].offsetWidth + 5) * ali.length + 'px';

             function roll() {

                 if (oul.offsetLeft <= -oul.offsetWidth / 2) {

                     oul.style.left = '0';

                 }

                 oul.style.left = oul.offsetLeft - 2 + 'px';

             }

             var timer = null;

             timer = setInterval(roll, 30);

             odiv.onmouseover = function () {

                 clearInterval(timer);

             }

             odiv.onmouseout = function () {

                 timer = setInterval(roll, 30);

             }

         };

     </script>

 </head>

 <body>

     <div id="div1">

         <ul>

             <li>

                 <img src="../Images/Number1/0.jpg" /></li>

             <li>

                 <img src="../Images/Number1/1.jpg" /></li>

             <li>

                 <img src="../Images/Number1/2.jpg" /></li>

             <li>

                 <img src="../Images/Number1/3.jpg" /></li>

             <li>

                 <img src="../Images/Number1/4.jpg" /></li>

         </ul>

     </div>

 </body>

点滴积累【JS】---JS小功能(offsetLeft实现图片滚动效果）的更多相关文章

  1. JS类小功能

    工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...

  2. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  3. 点滴积累【JS】---JS小功能（JS实现匀速运动）

    效果: 思路: 利用setInerval()计时器,进行运动.然后关键的一点是在最后停止的时候给它一个填充缝隙的判断. 代码: <head runat="server"> ...

  4. 点滴积累【JS】---JS小功能（onmousedown实现鼠标拖拽div移动）

    效果: 思路: 利用onmousedown事件实现拖拽.首先获得鼠标横坐标点和纵坐标点到div的距离,然后当鼠标移动后再用可视区的距离减去横纵坐标与div的距离.然后在判断不让DIV移出可视区,然后再 ...

  5. 点滴积累【JS】---JS小功能（onmousemove鼠标移动坐标接龙DIV)

    效果: 思路: 利用onmousemove事件,然后获取鼠标的坐标,之后把DIV挨个遍历,最后把鼠标的坐标赋给DIV. 代码: <head runat="server"> ...

  6. 点滴积累【JS】---JS小功能（JS实现模仿微博发布效果)

    效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: <hea ...

  7. 点滴积累【JS】---JS小功能（JS实现多功能缓冲运动框架)

    效果: 思路: 首先,多功能框架实现的功能是:css中所有的属性都可以添加进去(也可以把方法作为参数传递过去!),然后进行缓冲运动,比如:物体的高度.长度.颜色.字体大小.透明度等,都可以直接传入参数 ...

  8. 点滴积累【JS】---JS小功能（JS实现隐藏显示侧边栏，也就是分享栏的隐藏显示）

    效果: 思路: 首先,利用计时器setInterval实现DIV的隐藏显示功能,然后在进行一个判断,之后在把要移动的相应距离进行一个参数传递,再根据参数判断出移动的方向也就是offsetLeft移动的 ...

  9. 点滴积累【JS】---JS小功能（createElement和insertBefore添加div下面的节点）

    效果: 代码: <head runat="server"> <title></title> <script type="text ...

随机推荐

  1. bcp功能

    #include "MyBCP.h" #include "odbcss.h" //1,Allocate an environment handle and a ...

  2. wamp php.ini 配置的坑

    wampserver是windows平台下一键部署PHP+apache+MySQL的开发环境安装包,非常方便,但修改php.ini时需要注意,wamp目录下有两个php.ini, 第一个是apatch ...

  3. 常见前端UI框架

    祈澈姑娘 程序员一枚 本文作者祈澈姑娘,转载请声明 前端的技术日渐更新,最近得空,将前端常见的框架总结了一下,在开发的过程之中,有了这些,不断能够提高自己的工作效率,还可以在工作之余了解更多. 1.L ...

  4. [Android-Demo]Android View的拖动

    ↑ 请善用目录 Demo下载地址:http://download.csdn.net/detail/u011634756/5959637 (免积分哦~) ------------------------ ...

  5. MapReduce报错：Error: java.io.IOException: Initialization of all the collectors failed. Error in last collector was :interface javax.xml.soap.Text

    这个问题折腾了我一天了,最主要的是真的不懂在哪里看log,所以虽然折腾地很没有道理但还是一直在折腾. 这个问题很好解决,在main函数处错误import了 javax.xml.soap.Text,应该 ...

  6. DevExpress:下拉框绑定数据源 (ComboBoxEdit,LookUpEdit)

    DevExpress:下拉框绑定数据源 (ComboBoxEdit,LookUpEdit) DevExpress:下拉框绑定数据源 (ComboBoxEdit,LookUpEdit) // 设置下拉框 ...

  7. 下载论坛源码GBK UTF8 BIG5分别是什么意思

    下载论坛源码GBK UTF8 BIG5分别是什么意思? 提问者:ly1987520 | 浏览次数:4010次 下载论坛源码简体中文GBK 简体中文UTF8 繁体中文BIG5 分别是什么意思?他们的区别 ...

  8. python fabric使用 http://fabric-chs.readthedocs.io/zh_CN/chs/tutorial.html

    fab -u username -p password  -H hostname -P -- cmd   或root@'hostname'  -H多个主机是引号用逗号隔开 -P异步

  9. Android获取前台进程的方法

    概述 项目中很多场景交互非常依赖于客户端的前后景状态以及其他一些辅助信息上传,譬如当前新闻在前台(看到的是新闻界面)播放时,语音开启音乐应用,此时我们希望能看到音乐界面,并且音乐在播;而在导航应用在前 ...

  10. 算法笔记_057:蓝桥杯练习 最大的算式 （Java）

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 题目很简单,给出N个数字,不改变它们的相对位置,在中间加入K个乘号和N-K-1个加号,(括号随便加)使最终结果尽量大.因为乘号和加号一共就 ...