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

 <!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. Shell入门教程：算术运算

    Bash的算术运算有以下几种方法: 序号 名称 语法 范例 1 算术扩展 $((算术式)) r=$((2+5*8)) 2 使用外部程序 expr 算术式 r=`expr 4 + 5` 3 使用 $[] ...

  2. 编译PHP 报错：node.c: In function dom_canonicalization

    编译PHP 报错:node.c: In function dom_canonicalization  /opt/php-5.2.17/ext/dom/node.c:1953: error: deref ...

  3. java基础 泛型

    泛型的存在,是为了使用不确定的类型. 为什么有泛型? 1. 为了提高安全 2. 提高代码的重用率 (自动 装箱,拆箱功能) 一切好处看代码: package test1; import java.la ...

  4. JS正则表达式元字符

    https://segmentfault.com/a/1190000002471140

  5. 拖拽对DOM的影响

    前一段时间公司要对上传列表中多文本输入框添加富文本编辑功能,所以最初的想法是引入富文本编辑器插件,对每个多文本输入框实例化一次.但是上传列表还有一个可以拖拽排序的功能,在初次实例化以后,再拖拽元素就会 ...

  6. Visual Studio 的代码片段工具

    当安装完Visual Studio之后,会有附带一些原生的代码片段文件(*.snippet),对于vs2013参考目录如下: X:\Program Files (x86)\Microsoft Visu ...

  7. Eclipse 的单步调试

    1.设置断点在程序里面放置一个断点,也就是双击需要放置断点的程序左边的栏目上. 2.调试(1)点击"打开透视图"按钮,选择调试透视图,则打开调试透视图界面,然后先设置断点,按调试按 ...

  8. Day20160425

    技术要求: 1.git使用 pull.push.cheakout.master.clone(本地提交有优势) 2.Maven(依赖init.install.compile.package.clean. ...

  9. xampp环境搭建+bugfree

    一.xampp安装 1.下载xampp安装文件,下载地址:http://pan.baidu.com/s/1eSp5wVw 2.上传到Linux服务器,执行赋权并安装(我安装在/opt目录下) 3.安装 ...

  10. ASP.Net 在Update Panel局部刷新后 重新绑定JS方法

    我们知道Asp.Net中的Update Panel可以完成页面的局部刷新(实质上是Ajax),但是局部刷新完后,此区域的控件上所绑定的JS方法就会失效,因为我们用如下方法来重新绑定. var prm ...