下面的代码是左右滚动条的效果
<body style="background: #e2e2e2"> <div style="width: 400px; overflow-x: auto;" id="wap"> <div style="width:8000%;overflow: hidden"> <div id="content" style="float: left"> <img src="images/1311062509.png" style="width: 200px;height: 200px;float: left;"> <img src="images/1311063633.png" style="width: 200px;height: 200px;float: left;"> <img src="images/1311064029.png" style="width: 200px;height: 200px;float: left;"> </div> <div id="content_1" style="float: left"> <img src="images/1311062509.png" style="width: 200px;height: 200px;float: left;"> <img src="images/1311063633.png" style="width: 200px;height: 200px;float: left;"> <img src="images/1311064029.png" style="width: 200px;height: 200px;float: left;"> </div> </div> </div> <script> //内容容器div var thatDiv = document.getElementById("wap"); //左边第一个子div var sonDiv1 = document.getElementById("content"); //左边第二个子div var sonDiv2 = document.getElementById("content_1"); var n =1; function Marquee(){ //利用定时器改变值 // console.log("thatDiv.scrollLeft : " + thatDiv.scrollLeft); // //sonDiv1.offsetWidth 值固定不变 // console.log("sonDiv1.offsetWidth : " + sonDiv1.offsetWidth); // //值永远为0,因为它没有滚动条 // console.log("sonDiv1.scrollLeft : " + sonDiv1.scrollLeft); // //sonDiv2.offsetWidth 值固定不变 // console.log("sonDiv2.offsetWidth : " + sonDiv2.offsetWidth); // //值永远为0，因为它没有滚动条 // console.log("sonDiv2.scrollLeft : " + sonDiv2.scrollLeft); //top div滚动条的距离 是否 大于 第一个子div的水平距离,即是否大于内容的实际距离 if(thatDiv.scrollLeft - sonDiv1.offsetWidth >= 0){ //滚动条的长度重新清0，相当于又是从第一个div显示，然后向左滚动 thatDiv.scrollLeft = thatDiv.scrollLeft - sonDiv1.offsetWidth; } else{ thatDiv.scrollLeft++; console.log("thatDiv.scrollLeft : " + thatDiv.scrollLeft); } } var myvar=setInterval(Marquee,30); </script> </body>
查看id="content"的容器内容
原理分析
查看id="content_1"的内容
1、content 和 content_1两个容器是完全一样并且连接着的，
2、content 和 content_1两个容器的父容器，宽度是8000%，是实际内容的40倍，宽度足够大
3、content 和 content_1两个容器的“爷爷”容器就会出现滚动条。
4、添加一个定时器，让“爷爷”容器滚动条每次移动一个像素
根据上面的原理，写了一个插件
<body style="background: #e2e2e2"> <div id="wap"> <div id="content"> <img src="images/1311062509.png" style="width: 200px;height: 200px;float: left;"> <img src="images/1311063633.png" style="width: 200px;height: 200px;float: left;"> <img src="images/1311064029.png" style="width: 200px;height: 200px;float: left;"> </div> </div> <script> //滚动条插件 function rolling(mysetting){ if(typeof(obj) == "object"){ alert("参数应该输入json格式"); return false; } var that = this; //用时间戳作为id值 var timestamp = new Date().getTime(); this.setting = { //滚动内容存放的位置 targetId : "#wap", //滚动的内容 content : "#content", //滚动条显示的宽度 width:"200px", //每30毫秒执行一次 speed : 30, //鼠标悬浮是否停止，true是，false为不停，默认是true overStop : true, //滚动条的ID值 objId : timestamp, onAfterShow:function(){ } }; this.setting = $.extend(this.setting,mysetting); //需要显示滚动图片的容器 var targetObject = $(this.setting.targetId).find(this.setting.content); //让容器向左浮动，并添加一个rolling_content类样式，用于jquery筛选 targetObject.css("float","left").addClass("rolling_content"); //复制目标内容步骤一 var targetHTML = $(this.setting.targetId).find(this.setting.content)[0].innerHTML; //复制目标内容步骤二 targetHTML = '<div style="float: left;" class="rolling_content">'+targetHTML+'</div>'; //将两个显示内容放在同一个容器中，并让其宽度“无限大”，能够出现滚动条，这里的滚动条是不让显示出来的 var wapContent = '<div style="width:8000%;overflow: hidden">'+targetObject[0].outerHTML+targetHTML+'</div>'; //设置最外层容器显示的宽度，并将最终的代码放入容器中 $(this.setting.targetId).css("overflow","hidden").css("width",this.setting.width).html(wapContent); //内容容器div var thatDiv =$(this.setting.targetId)[0]; //左边第一个子div var sonDiv1 = $(this.setting.targetId + " .rolling_content")[0]; //左边第二个子div var sonDiv2 = $(this.setting.targetId + " .rolling_content")[1]; //循环滚动执行的方法 function Marquee(){ //利用定时器改变值 //top div滚动条的距离 是否 大于 第一个子div的水平距离,即是否大于内容的实际距离 if(thatDiv.scrollLeft - sonDiv1.offsetWidth >= 0){ //滚动条的长度重新清0，相当于又是从第一个div显示，然后向左滚动 thatDiv.scrollLeft = thatDiv.scrollLeft - sonDiv1.offsetWidth; } else{ thatDiv.scrollLeft++; } } var myvar=setInterval(Marquee,this.setting.speed); if(this.setting.overStop){ //鼠标悬浮，停止滚动 thatDiv.οnmοuseοver=function() {clearInterval(myvar)} //鼠标移开，继续滚动 thatDiv.οnmοuseοut=function() { myvar=setInterval(Marquee,20); } } } var mysetting = { //滚动内容存放的位置 targetId : "#wap", //滚动的内容 content : "#content", //滚动条显示的宽度 width:"500px", //每30毫秒执行一次 speed : 10, //鼠标悬浮是否停止，true是，false为不停，默认是true overStop : true }; rolling(mysetting); </script> </body>
大小: 91.9 KB 大小: 137.4 KB 查看图片附件
