之前找了好久没有找到，就自已动手写了一个：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <style type="text/css">

         *{margin:0; padding: 0;}

         .div1{position: relative; height: 150px; width: 680px;border:1px solid black;margin:10px auto;overflow: hidden;}

         .div1 ul {position: absolute;}

         .div1 ul li{list-style: none;float: left;width: 150px; height: 112px;padding: 10px;}

         .div1 ul li img{width: 150px; height: 112px;}

         #scale{ height: 20px; background: #ccc; position: relative; top: 130px;}

         #scale #tag{ width: 20px; height: 20px; background: red; position: absolute;}

         </style>

         <script type="text/javascript" src="move.js"></script>

         <script type="text/javascript">

         window.onload = function(){

             var oDiv= document.getElementById("div1");

             var oDiv2= document.getElementById("scale");

             var oTag= document.getElementById("tag");

             var oUl = getByClass(oDiv,"ul1")[0];

             var oLi = oUl.getElementsByTagName('li');

             oUl.innerHTML += oUl.innerHTML;//复制一份Ul,和原来的叠加在一起

             oUl.style.width = oLi.length * oLi[0].offsetWidth + "px";//设置Ul的宽度

             oTag.onmousedown = function(ev){

                 var oEvent = ev || event;

                 var disX = oEvent.clientX - oTag.offsetLeft;

                 document.onmousemove = function(ev){

                     var oEvent = ev || event;

                     var l = oEvent.clientX - disX;

                     if(l < 0){

                         l =0;

                     }else if(l > oDiv2.offsetWidth - oTag.offsetWidth){

                         l = oDiv2.offsetWidth - oTag.offsetWidth;

                     }

                     oTag.style.left = l + "px";

                     var scale = l/(oDiv2.offsetWidth - oTag.offsetWidth);

                     oUl.style.left = -(oUl.offsetWidth - oDiv.offsetWidth) * scale + 'px';

                 }

                 document.onmouseup = function(){

                     document.onmousemove = null;

                     document.onmouseup = null;

                 }

                 return false;

             }

         };

         function getByClass(obj,sClass){//用Class获取元素

             var aEle = document.getElementsByTagName("*");//获取所有的元素

             var i=0;

             var aResult = [];

             for(i=0;i<aEle.length;i++){

                 if(sClass == aEle[i].className){//如果当前元素等于数组中的一个元素，那么取出来放在数组aResult中

                     aResult.push(aEle[i]);

                 }

             }

             return aResult;

         }

         </script>

     </head>

     <body>

         <div class="div1" id="div1">

             <ul class="ul1">

                 <li><img src="data:image/item1.jpg"></li>

                 <li><img src="data:image/item2.jpg"></li>

                 <li><img src="data:image/item3.jpg"></li>

                 <li><img src="data:image/item4.jpg"></li>

                 <li><img src="data:image/item5.jpg"></li>

                 <li><img src="data:image/item6.jpg"></li>

                 <li><img src="data:image/item7.jpg"></li>

             </ul>

             <div id="scale">

                 <div id="tag"></div>

             </div>

         </div>

     </body>

 </html>

javascript学习之带滚动条的图片的更多相关文章

  1. JavaScript学习笔记 -- 带参数arguments的函数的用法

    JavaScript函数有带参数与不带参数两种形式,不带参数情况如下: function myFunction() { alert('HelloWorld!') } 在这种类型的函数中,输出值是确定的 ...

  2. javascript 学习之自定义滚动条加滚轮事件

    要自己写一个自定义滚动条加上滚轮事件,之前的没有滚轮事件不完整,今天整理了一个. 1.滚轮事件是不兼容的,firefox中是必需要用事件绑定的添加,用的DOMMouseScroll,当滚动鼠标的时候, ...

  3. JavaScript学习笔记- 自定义滚动条插件

    此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-us ...

  4. JavaScript学习笔记-自定义滚动条

    这是一个基本实现思路,如果有新手和我一样没什么事,喜欢瞎研究话,可以参考下. 一.Html <div class="scroll_con"> <div class ...

  5. JavaScript学习之自动轮播图片

    定时器 在实现轮播图之前需要首先了解一下JavaScript的定时器 setInterval()和clearInterval() 1.setInterval() 方法可按照指定的周期(以毫秒计)来调用 ...

  6. Android开发学习之路-带文字的图片分享

    有用过微信分享SDK的都应该知道,微信分享到朋友圈的时候是不能同时分享图片和文字的,只要有缩略图,那么文字就不会生效.那么问题就来了,如果我们想把APP内的某些内容连带图片一起分享到微信,是不是没办法 ...

  7. Javascript学习7 - 脚本化浏览器窗口

    原文:Javascript学习7 - 脚本化浏览器窗口 本节讨论了文档对象模型.客户端Javascript下Window中的各项属性,包括计时器.Location对象.Histroy对象.窗口.浏览器 ...

  8. 最棒的 JavaScript 学习指南（2018版）

    译者注:原文作者研究了近2.4万篇 JavaScript 文章得出这篇总结,全文包含学习指南.新人上手.Webpack.性能.基础概念.函数式编程.面试.教程案例.Async Await.并发.V8. ...

  9. jquery带按钮的图片切换效果

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

随机推荐

  1. WindowsPhone8.1RT建立空白应用挂起没反应的解决方案

    wp8.1下, 建立空白应用后遇到的问题:想要实现保存.提取数据都无法成功 在退出程序后无法进入到OnNavigatedFrom()中去. 网上说要手动的Invoke OnSuspending事件. ...

  2. sqlserver 自增ID插入指定数据

    set identity_insert 表名 ON --允许对自增列Id插入指定数据 insert into table_name(Id,Name) values(1,'test') set iden ...

  3. eclipse for php现有项目不能导入问题

    1.少了.project文件 解决办法:创建一个新项目,然后将新项目文件夹下的.project文件复制到将要导入的文件夹中.

  4. php之JavaScript

    JS对于大小写敏感 作用:增加跟html页面的交互性. 应用:验证表单.创建cookies(可插入html页面的编程代码)js插入页面后可由所有现代的浏览器执行.应用于<body>< ...

  5. [codevs1105][COJ0183][NOIP2005]过河

    [codevs1105][COJ0183][NOIP2005]过河 试题描述 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青 ...

  6. Ural 1057 Amount of Degrees

    Description 问[L,R]中有多少能表示k个b次幂之和. Sol 数位DP. 当2进制时. 建出一个二叉树, \(f[i][j]\) 表示长度为 \(i\) 有 \(j\) 个1的个数. 递 ...

  7. 安装配置LDAP遇到的问题

    问题1:安装完启动ldap服务报错: ldap: unrecognized service? 原因在于新版的openldap将服务名改为了slapd,使用service slapd start即可启动 ...

  8. linux操作oracle

    1.su - oracle 2.sqlplus / as sysdba; 1.登录linux,以oracle用户登录(如果是root用户登录的,登录后用 su - oracle命令切换成oracle用 ...

  9. 整合Spring、SpringMVC、MyBatis

    spring+springmvc+mybatis集成 一个核心:将对象交给spring管理. 1新建web项目 2添加项目jar包 spring包见上一篇博客 3建立项目的目录结构 4完成Mapper ...

  10. 微信开发中网页授权access_token与基础支持的access_token异同

    问题1:网页授权access_token与分享的jssdk中的access_token一样吗? 答:不一样.网页授权access_token 是一次性的,而基础支持的access_token的是有时间 ...