效果：

代码：

 <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. virtualbox4.2.18 ubuntu12.04 The system is running in low-graphics mode

    参考1:http://askubuntu.com/questions/225090/the-system-is-running-in-low-graphics-mode-error-in-virtua ...

  2. 使用BusyBox制作linux根文件系统（CramFS+mdev）

    转:http://www.360doc.com/content/10/0428/11/496343_25245348.shtml 操作系统:Ubuntu9.04 内核版本:linux-2.6.24.7 ...

  3. web及网络基础

    关于本http系列博客 本系列博客内容全部来自或参考自<图解http>,不过博客中的图示基本上为博主自己手动绘制,部分图可能来自其它地方,但都有标注. 常见协议的分类 分层 常见协议 应用 ...

  4. 某公司java面试经历

    为什么说某公司.由于确实面完了最后挂了回来也没记住公司叫啥名字.是老乡兼好友内推去的小公司,名字有点长,所以也没记住. 公司确实太小,所说是外包公司.然后面回来后跟ACM的前学长说了,他们仅仅说所以不 ...

  5. 【好】strong-password-checker，我自己做出来的：）

    我自己做出来的,分了几种情况来考虑.(再后面有加了注释的版本) https://leetcode.com/problems/strong-password-checker/ // 加油! public ...

  6. shadow 优化

    http://gamedevs.org/uploads/rendering-in-battlefield3.pdf mark 当初看过 ======= sm有两阶段 1生成sm 2采样 第一阶段的优化 ...

  7. tensorflow c++接口的编译安装与一些问题记录

    参考这篇文章安装,依次安装bazel,protocbuf,eigen3,然后下载tensorflow源码,编译c++ api,将编译结果拷贝到搜索路径 最后测试案例时遇到一些问题 (1)fatal e ...

  8. 使用Sublime经验分享

    Sublime轻量级.可是绝对是神一样的编辑器. 1.代码清晰美观 2.能够选择文件夹作为文件结构文件夹显示在左側 3.以tab的形式打开多个页面在同一个窗体内 设置方法例如以下: Preferenc ...

  9. Win7盗版提示，屏幕右下角出现 Windows内部版本7601此Windows副本不是正版怎么办

    Windows7 屏幕右下角出现 Windows内部版本7601此Windows副本不是正版 有很多人反应windows7会出现提示"Win7内部版本7600此Windows副本不是正版&q ...

  10. vue - static(.gitkeep)

    描述:git上传忽略的文件,与.gitnoignore一样.