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

 <!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. （转载）JavaWeb学习总结(五十一)——邮件的发送与接收原理

    博客源地址:http://www.cnblogs.com/xdp-gacl/p/4209586.html 一. 邮件开发涉及到的一些基本概念 1.1.邮件服务器和电子邮箱 要在Internet上提供电 ...

  2. thinkphp自动验证---$_validate

    thinkphp中的自动验证 array(验证字段,验证规则,错误提示,[验证条件,附加规则,验证时间]) 1.验证字段 需要验证的表单字段名称,这个字段不一定是数据库字段,也可以是表单的一些辅助字段 ...

  3. 如何在网页中嵌套其他的HTML文件

    html文件引入其它html文件的方法有三种,具体可以看下:1.IFrame引入,看看下面的代码 <IFRAME NAME="content_frame" width=100 ...

  4. IIs管理服务一直启动失败的原因之一

    首先eventlog里面的日志: 万维网发布服务(WWW 服务)没有为站点 1 注册 URL 前缀 https://*:8172/.该站点已被禁用.数据字段包含错误号. IISWMSVC_STARTU ...

  5. [BZOJ3262]陌上花开

    [BZOJ3262]陌上花开 试题描述 有n朵花,每朵花有三个属性:花形(s).颜色(c).气味(m),又三个整数表示.现要对每朵花评级,一朵花的级别是它拥有的美丽能超过的花的数量.定义一朵花A比另一 ...

  6. h5页面 禁止缩放

    <head><meta name="viewport" content="width=device-width,minimum-scale=1.0,ma ...

  7. php魔术方法和魔术常量

    1.__construct() 实例化对象时被调用, 当__construct和以类名为函数名的函数同时存在时,__construct将被调用,另一个不被调用. 2.__destruct() 当删除一 ...

  8. 19. Remove Nth Node From End of List

    题目: Given a linked list, remove the nth node from the end of list and return its head. For example, ...

  9. iOS TabeView 头视图和尾视图不滑动的实现

    因项目有需求不能让section中的头尾视图滑动,顾根据网上的一些资料和自己整理的思路,已实现了不滑动效果,上代码,啥都说了,搞了2个小时都是泪.... 1.创建一个tableview _mainTa ...

  10. 算法系列：FFT 002

    转载自http://blog.jobbole.com/58246/ 快速傅里叶变换(Fast Fourier Transform)是信号处理与数据分析领域里最重要的算法之一.没有正规计算机科学课程背景 ...