效果：

代码：

 <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. 1前端案例-tag标签+随机位置

    tag标签随机位置+js数组随机+js添加一段html代码段 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  2. Tomcat监控—Status页面

    原文:http://jingyan.baidu.com/article/925f8cb8f3d925c0dce05677.html 修改配置文件tomcat-users(该文件在Tomcat安装程序根 ...

  3. Laravel简⃣单⃣的⃣路⃣由⃣

    在⃣routes.php文⃣件⃣中⃣写⃣如⃣下⃣几⃣个⃣函⃣数⃣: Route::get('/', function () { return view('welcome'); }); // 获⃣取⃣a ...

  4. Linux远程执行Windows机器任务

    Linux远程执行Windows机器任务     近期测试人员提出需求需要在Linux下调用Windows系统下的cmd的命令完成自动构建和测试并生成测试报告. 环境: Windows Server2 ...

  5. vim 命令的使用

    稍微再研究一下vim的命令使用. ----------------------------------------------------------------------------------- ...

  6. android 带文字阴影的button

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  7. 在笛卡尔坐标系上描绘y=x^2-4/x^2-2x-3曲线

    <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type&quo ...

  8. 深入理解C#中的泛型（一）

    为什么要有泛型? 请大家思考一个问题:由你来实现一个最简单的冒泡排序算法.假设没有使用泛型的经验.可能会毫不犹豫的写出下面代码: public class SortHelper { //參数为int数 ...

  9. swift 常用第三方库

    1.Network: Alamofire:著名的AFNetworking网络基础库Swift版  -https://github.com/Alamofire/Alamofire SwiftyJSON: ...

  10. connect(mapStateToProps,mapDispatchToProps) 的写法

    1.写法 import { connect } from 'redux'; import { loading, asyncRequset } from '../../actions/common'; ...