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

 <!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. Programming with Objective-C ----------Encapsulating Data

    Most Properties Are Backed by Instance Variables By default, a readwrite property will be backed by ...

  2. C#使用Quartz.NET详细讲解

    Quartz.NET是一个开源的作业调度框架,是OpenSymphony 的 Quartz API的.NET移植,它用C#写成,可用于winform和asp.net应用中.它提供了巨大的灵活性而不牺牲 ...

  3. JS自动缩放页面图片

    /** * 缩略图 * * @param bool isScaling 是否缩放 * @param int width 宽度 * @param int height 高度 * @param strin ...

  4. PHP 动态生成验证码

    ……机器人会在网站中搜寻允许他们插入广告的输入表单,在虚拟世界没有什么能阻挡它们胡作非为.这些机器人效率极高,完全不关心所攻击的表单的本来用途.它们唯一的目标就是用它们的垃圾广告覆盖你的内容,残忍地为 ...

  5. UIStackView

    既要温故又要知新...温故而知新,我懂. 在Cocoachina上看到了,UIStackView. 没用过额,试iOS9的新特性.一研究,妈的还挺眼熟.一想,这不和Android上的线性布局一样么.. ...

  6. 学习JVM GarbageCollection

    前言 Java和C++之间显著的一个区别就是对内存的管理.Java和C++把内存管理的权利赋予给开发人员的方式不同,Java拥有一套自动的内存回收系统(Garbage Collection,GC)简称 ...

  7. SQL Server 日期和时间函数

    http://www.cnblogs.com/adandelion/archive/2006/11/08/554312.html 1.常用日期方法(下面的GetDate() = '2006-11-08 ...

  8. .NET LINQ标准查询运算符

    标准查询运算符概述      “标准查询运算符”是组成语言集成查询 (LINQ) 模式的方法. 大多数这些方法都在序列上运行,其中的序列是一个对象,其类型实现了 IEnumerable<T> ...

  9. SQL入门语句之ORDER BY 和GROUP BY

    一.SQL入门语句之ORDER BY ORDER BY 是用来基于一个或多个列按升序或降序顺序排列数据 1.从数据库表获取全部数据按字段A的升序排列 select *from table_name o ...

  10. 安装numpy库

    1.先安装pip: 下载地址:http://pypi.python.org/pypi/pip#downloads 下载pip-8.1.2.tar.gz(md5,pgp)完成之后,解压到一个文件夹,cm ...