效果：

代码：

 <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. linux安装配置redis

    redis是支持linux的,所以linux安装redis非常简单,按照官网的提示操作即可. 下载 $ wget http://download.redis.io/releases/redis-3.2 ...

  2. SecureCRT connecting VM Linux show error message: The remote system refused the connection.

    SecureCRT connecting VM Linux show error message: The remote system refused the connection.

  3. Oracle 11gR2 RAC连接时ORA-12545错误

    刚装成的Oracle 11gR2的RAC集群 三个节点 创建好数据库,一切都在正常的进行中 然后去安装了一个oracle client,进行链接时出现了ORA-12545 然后简单的baidu了一下, ...

  4. iview2.x版本升级3.x版本icon修改清单

    当前公司使用有一个旧项目的前端组件库是iview2.x,入职以来维护该项目过程中碰到2.x版本无数的坑. 最近需求不多,闲来无事把2.x升级到3.x版本了. 新版本除了网上轻易可查到的button组件 ...

  5. 理解Flow静态类型检查

    一.为什么在JavaScript中使用静态类型 了解静态类型的最快方法是将其与动态类型进行对比. 有静态类型参数的语言被称为静态类型语言. 另一方面,有动态类型参数的语言被称为动态类型语言.核心区别是 ...

  6. 你以为border-radius只是圆角吗？【各种角度】

    border-radius,国内翻译成圆角,你可能以为这个属性就是用来画圆角,没错,但是除此之外,它还可以做点别的事情. radius其实指的是边框所在圆的半径,这个CSS3属性不仅能够创建圆角,还可 ...

  7. 代码练习之 登陆 PHP会话控制 session cookie

    log.html <html> <head><title>Home Page</title></head> <body> < ...

  8. JMeter 六：Listener

    参考:http://jmeter.apache.org/usermanual/listeners.html Listener是用来展示Sampler结果的元件. 结果可以被展示在树.表格.图表或者简单 ...

  9. jQuery EasyUI API 中文文档 - 表单（form补充）

    继承(表单验证) 第一个参数如果是true那么就算key相同也会接着追加,相反怎会覆盖 $.extend([bool],obj,obj1); var obj = {name:"zhangsa ...

  10. 百度地图JS--2

    转载请注明出处 本文为原创 作者:injuer 严禁用于商业用途,仅学习交流 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transiti ...