效果：

代码：

 <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. CentOS 6.9修改网卡名eth1为eth0

    vi /etc/udev/rules.d/70-persistent-net.rules 把NAME="eth1"修改为NAME="eth0",并将多余的记录删 ...

  2. HDU 1845 Jimmy’s Assignment（二分匹配）

    Jimmy’s Assignment Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Other ...

  3. 20 Inno Setup制作安装包的几个问题

    系统开发好之后,通常需要制作成安装包,才能卖给用户.利用Inno Setup的向导可以制作简单的安装包,但是如果要做个好的安装包的话可能会遇到一些麻烦,今日终于抽空解决了,Inno Setup打包的一 ...

  4. 【maven】ecplise新建maven项目 报错Could not calculate build plan: Plugin org.apache.maven.plugins:maven-resources-plugin

    在ecplise上新建maven项目 报错: Could not calculate build plan: Plugin org.apache.maven.plugins:maven-resourc ...

  5. 关于push动画中尺寸问题

    由于是在sb中写的VC, 所以在跳转动画时, 就会有一些问题. 这是sb中的约束: 当在push动画时, 在中间界面添加imageView时, 如图: imageView的尺寸是如上图所示, 并不是屏 ...

  6. requests访问https网站

    如果报证书校验失败的问题,可以去除证书校验1 import requests requests.get('https://www.zhihu.com/',verify=False)

  7. 流畅的python第十六章协程学习记录

    从句法上看,协程与生成器类似,都是定义体中包含 yield 关键字的函数.可是,在协程中,yield 通常出现在表达式的右边(例如,datum = yield),可以产出值,也可以不产出——如果 yi ...

  8. Spring框架学习（8）spring mvc上传下载

    内容源自:spring mvc上传下载 如下示例: 页面: web.xml: <?xml version="1.0" encoding="UTF-8"?& ...

  9. 安装PIL的坑

    今天在centos中使用pip安装PIL死活不成功,报错: Could not find a version that satisfies the requirement PIL (from vers ...

  10. 【转】Go maps in action

    原文: https://blog.golang.org/go-maps-in-action ------------------------------------------------------ ...