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

 <!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. PHP数组函数： array_walk()

    定义和用法 array_walk() 函数对数组中的每个元素应用回调函数.如果成功则返回 TRUE,否则返回 FALSE. 典型情况下 function 接受两个参数.array 参数的值作为第一个, ...

  2. CentOS6.3 编译安装LAMP(2)：编译安装 Apache2.4.6

    Apache官方说: 与Apache 2.2.x相比,Apache 2.4.x提供了很多性能方面的提升,包括支持更大流量.更好地支持云计算.利用更少的内存处理更多的并发等.除此之外,还包括性能提升.内 ...

  3. iOS开发——高级篇——二维码的生产和读取

    一.二维码的生成 从iOS7开始集成了二维码的生成和读取功能此前被广泛使用的zbarsdk目前不支持64位处理器 生成二维码的步骤:导入CoreImage框架通过滤镜CIFilter生成二维码 二维码 ...

  4. CPU时间片

    CPU时间片 为了提高程序执行效率,大家在很多应用中都采用了多线程模式,这样可以将原来的序列化执行变为并行执行,任务的分解以及并行执行能够极大地提高程序的运行效率. 但这都是代码级别的表现,而硬件是如 ...

  5. java12

    1:List的子类(掌握) (1)List的子类特点 ArrayList: 底层数据结构是数组,查询快,增删慢 线程不安全,效率高 Vector: 底层数据结构是数组,查询快,增删慢 线程安全,效率低 ...

  6. css3部分选择器整理

    整理些选择器,加深印象和理解 标签选择器 body{} 表示body标签 类选择器 .className{} 表示类名class为className的所有标签 id选择器 #idName{} 表示id ...

  7. apache自带的web监控器配置

    第一:将mod_status模块放开,即去掉httpd.conf中的# 第二:在httpd.conf后面添加下面内容 <Location /server-status> SetHandle ...

  8. 一则奇怪的案例处理：ORA-00257: archiver error. Connect internal only, until freed

    前天,业务反应数据库不能连接 在操作系统通过字符串尝试登陆数据库报:ORA-00257: archiver error. Connect internal only, until freed 解决思路 ...

  9. UVA 10780 Again Prime No Time.(数学)

    给定两个整数m和n,求最大的k使得m^k是n!的约数 对m质因子分解,然后使用勒让德定理求得n!包含的质数p的阶数,min(b[i] / a[i])即为结果k, 若为0无解 #include<c ...

  10. WPF使用IDataErrorInfo进行数据校验

    这篇博客将介绍如何使用IDataErrorInfo进行数据校验.下面直接看例子.一个Customer类,两个属性(FirstName, Age) class Customer { public str ...