欢迎访问 水平网    今天是:2017年11月19日 注册 | 登录 | 订阅 | 收藏
>> JavaScript >> 同页面多方向的图片滚动,面向对象
推荐代码
热点代码

同页面多方向的图片滚动,面向对象

作者:未知,  来源:网络,  阅读:1301,  发布时间:2014-09-18  【放入收藏夹
 
代码:复制】【运行
<!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>同页面多方向的图片滚动,面向对象</title> <style> div,h2,ul,li,img,span{margin:0;padding:0;} li{list-style:none;} /*layout*/ .wrapper{width:960px;margin:0 auto} .prize{width:960px;margin:20px auto;position:relative;background:#f6f4f2;font:12px Tahoma,sans-serif;border:1px solid #ccc;padding:1px;color:#052d30;} /*title*/ .prize h2{height:25px;font:bold 14px/25px Tahoma;background:#0cf;text-indent:10px;text-shadow:1px 1px 1px #fff;} /*content*/ .prize-con{width:900px;margin:0 auto;height:128px;overflow:hidden;padding:10px 0;position:relative;}     .prize-con ul{width:200%;position:absolute;}     .prize-con li{float:left;_display:inline;line-height:25px;text-align:center;margin-right:5px;}     .prize-con li img{width:141px;height:110px;display:block;border:1px solid #ccc;padding:1px;} .block2{width:220px;margin:0;}     .block2 .prize-con{width:150px;height:410px;padding:0;margin:10px auto;}     .block2 ul{width:auto;}     .block2 li{float:none;} /*button*/ .prize span{display:block;position:absolute;top:50%;width:13px;height:15px;background:#000 url(bun-bg.jpg) no-repeat 0 0;cursor:pointer;}     span.l-bun{left:5px;}     span.r-bun{background-position:0 -15px;right:10px;} </style> </head> <body> <div class="wrapper">     <!--block1-->     <div class="prize">         <h2>奖品展示</h2>         <div class="prize-con dd">             <ul>                 <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题1</li>                 <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题2</li>                 <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题3</li>                 <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题4</li>                 <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题5</li>                 <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题6</li>                 <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题7</li>                 <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题8</li>             </ul>         </div>         <span class="l-bun"></span>         <span class="r-bun"></span>     </div>     <!--block2-->     <div class="prize block2">         <h2>奖品展示</h2>         <div class="prize-con dd">             <ul>                 <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题1</li>                 <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题2</li>                 <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题3</li>                 <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题4</li>                 <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题5</li>                 <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题6</li>                 <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题7</li>                 <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题8</li>             </ul>         </div>         <span class="l-bun"></span>         <span class="r-bun"></span>     </div> </div> <script>     //find elements     _get = function(e,c){         var _isClass = e.indexOf(".")>=0,_isId = e.indexOf("#")>=0,newEle = e.substring(1);         //get frist argument         if(_isClass&&_isId) return;         if(_isId){             var obj = typeof newEle=="string"?document.getElementById(newEle):false;         }else if(_isClass){             var obj = _class(e);         }else{             return;         }         //get class         function _class(c,o){             var oDom = o?o:document,                 cParent = oDom.getElementsByTagName("*"),                 classAry = [],                 leng = cParent.length;             for(var i=0;i<leng;i++){                 allC = cParent[i].className;                     if(allC.match("\\b"+newEle+"(?:$|[^\w\-])")){                     classAry.push(cParent[i])                 }             }                 return classAry.length==1?classAry[0]:classAry;         }         //second argument         var _isArr = obj.constructor==Array;         if(!!c){             if(_isArr){                 for(var j=0,len=obj.length;j<len;j++){                     var ele = obj[j].getElementsByTagName(c);                     obj[j] = ele.length==1?ele[0]:ele;                 }             }else{                 obj = obj.getElementsByTagName(c);             }             }             return obj.length==1?obj[0]:obj;     }     //even     function Roll(){this.initial.apply(this,arguments)}     Roll.prototype = {         initial:function(o,l,r,s){             var _this = this;             this.obj = o;             this.child = o.children;             this.timeId = null;             this.interval = null;             this.funTime = null;             this.set(s||{});             this.oAttr = !!this.s.dir?this.child[0].offsetHeight:this.child[0].offsetWidth;             this.dirNo = !!this.s.dir?"top":"left";             l.onclick = function(){_this.prev();_this.s.auto = false;};             r.onclick = function(){_this.next();_this.s.auto = false;};             o.onmouseover = function(){_this.s.auto = false;clearInterval(_this.funTime);}             this.s.auto&&(this.next(),o.onmouseout = l.onmouseout = r.onmouseout = function(){_this.funTime = setTimeout(function(){_this.s.auto = true;_this.next()},500)});         },         set:function(v){             this.s = {                 dir:0,//滚动方向,0为横向滚动,1为纵向滚动                 auto:true//是否自动滚动             }             for(c in v){this.s[c] = v[c]};         },         prev:function(){             this.obj.insertBefore(this.child[this.child.length-1],this.obj.firstChild);             this.obj.style[this.dirNo] = -this.oAttr+"px";             this.moverIt(0);         },             next:function(){             this.moverIt(-this.oAttr,function(){                 var dir = !!this.s.dir?"top":"left";                 this.obj.appendChild(this.child[0]);                 this.obj.style[this.dirNo] = 0;             });                     },         moverIt:function(i,callBack){             var _this = this;             clearInterval(this.timerId);             clearInterval(_this.funTime)             clearInterval(this.interval);             this.timerId = setInterval(function(){                 var dir = !!_this.s.dir?_this.obj.offsetTop:_this.obj.offsetLeft,                     iSpeed = (i-dir)/5;                 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);                 dir==i?(clearInterval(_this.timerId),callBack&&callBack.apply(_this),!!_this.s.auto&&(_this.interval=setTimeout(function(){_this.next();},1500))):_this.obj.style[_this.dirNo] = iSpeed + dir + "px"             },30);         }         }          //marquee     var menu = _get(".prize-con","ul"),lBun = _get(".l-bun"),rBun = _get(".r-bun");     for(var i=0,leng=menu.length;i<leng;i++){         var mq = new Roll(menu[i],lBun[i],rBun[i],{dir:i%2?1:0}),mq = null;//实例化,当板块为偶数的时候像左边滚动,反之向上     } </script> </body> </html>
Tags:图片滚动对象
评论【共有0条评论】查看所有评论
昵称:(*)   邮箱:   QQ:   验证码: 看不清楚?点击刷新验证码