元素上下、左右滾動插件，固定dom結構。基於jQuery，2009年
阿新 • • 發佈：2018-09-06
smo func overflow end 研究 sed quad move perm
1 /** 2 * @classDescription 超級Marquee，可做圖片導航，圖片輪換 3 * @author Aken Li(www.kxbd.com) 4 * @date 2009-07-27 5 * @dependence jQuery 1.3.2 6 * @DOM 7 * <div id="marquee"> 8 * <ul> 9 * <li></li> 10 * <li></li>11 * </ul> 12 * </div> 13 * @CSS 14 * #marquee {width:200px;height:50px;overflow:hidden;} 15 * @Usage 16 * $(‘#marquee‘).kxbdSuperMarquee(options); 17 * @options 18 * distance:200,//一次滾動的距離 19 * duration:20,//緩動效果，單次移動時間，越小速度越快，為0時無緩動效果 20 * time:5,//停頓時間，單位為秒21 * direction: ‘left‘,//滾動方向，‘left‘,‘right‘,‘up‘,‘down‘ 22 * scrollAmount:1,//步長 23 * scrollDelay:20//時長，單位為毫秒 24 * isEqual:true,//所有滾動的元素長寬是否相等,true,false 25 * loop: 0,//循環滾動次數，0時無限 26 * btnGo:{left:‘#goL‘,right:‘#goR‘},//控制方向的按鈕ID，有四個屬性left,right,up,down分別對應四個方向27 * eventGo:‘click‘,//鼠標事件 28 * controlBtn:{left:‘#goL‘,right:‘#goR‘},//控制加速滾動的按鈕ID，有四個屬性left,right,up,down分別對應四個方向 29 * newAmount:4,//加速滾動的步長 30 * eventA:‘mouseenter‘,//鼠標事件，加速 31 * eventB:‘mouseleave‘,//鼠標事件，原速 32 * navId:‘#marqueeNav‘, //導航容器ID，導航DOM:<ul><li>1</li><li>2</li><ul>,導航CSS:.navOn 33 * eventNav:‘click‘ //導航事件 34 */ 35 (function($){ 36 $.fn.kxbdSuperMarquee = function(options){ 37 var opts = $.extend({},$.fn.kxbdSuperMarquee.defaults, options); 38 return this.each(function(){ 39 var $marquee = $(this);//滾動元素容器 40 var _scrollObj = $marquee.get(0);//滾動元素容器DOM 41 var scrollW = $marquee.width();//滾動元素容器的寬度 42 var scrollH = $marquee.height();//滾動元素容器的高度 43 var $element = $marquee.children(); //滾動元素 44 var $kids = $element.children();//滾動子元素 45 var scrollSize=0;//滾動元素尺寸 46 var _type = (opts.direction == ‘left‘ || opts.direction == ‘right‘) ? 1:0;//滾動類型，1左右，0上下 47 var scrollId, rollId, isMove, marqueeId; 48 var t,b,c,d,e; //滾動動畫的參數,t:當前時間，b:開始的位置，c:改變的位置，d:持續的時間，e:結束的位置 49 var _size, _len; //子元素的尺寸與個數 50 var $nav,$navBtns; 51 var arrPos = []; 52 var numView = 0; //當前所看子元素 53 var numRoll=0; //輪換的次數 54 var numMoved = 0;//已經移動的距離 55 //防止滾動子元素比滾動元素寬而取不到實際滾動子元素寬度 56 $element.css(_type?‘width‘:‘height‘,10000); 57 //獲取滾動元素的尺寸 58 var navHtml = ‘<ul>‘; 59 if (opts.isEqual) { 60 _size = $kids[_type?‘outerWidth‘:‘outerHeight‘](); 61 _len = $kids.length; 62 scrollSize = _size * _len; 63 for(var i=0;i<_len;i++){ 64 arrPos.push(i*_size); 65 navHtml += ‘<li>‘+ (i+1) +‘</li>‘; 66 } 67 }else{ 68 $kids.each(function(i){ 69 arrPos.push(scrollSize); 70 scrollSize += $(this)[_type?‘outerWidth‘:‘outerHeight‘](); 71 navHtml += ‘<li>‘+ (i+1) +‘</li>‘; 72 }); 73 } 74 navHtml += ‘</ul>‘; 75 76 //滾動元素總尺寸小於容器尺寸，不滾動 77 if (scrollSize<(_type?scrollW:scrollH)) return; 78 //克隆滾動子元素將其插入到滾動元素後，並設定滾動元素寬度 79 $element.append($kids.clone()).css(_type?‘width‘:‘height‘,scrollSize*2); 80 81 //輪換導航 82 if (opts.navId) { 83 $nav = $(opts.navId).append(navHtml).hover( stop, start ); 84 $navBtns = $(‘li‘, $nav); 85 $navBtns.each(function(i){ 86 $(this).bind(opts.eventNav,function(){ 87 if(isMove) return; 88 if(numView==i) return; 89 rollFunc(arrPos[i]); 90 $navBtns.eq(numView).removeClass(‘navOn‘); 91 numView = i; 92 $(this).addClass(‘navOn‘); 93 }); 94 }); 95 $navBtns.eq(numView).addClass(‘navOn‘); 96 } 97 98 //設定初始位置 99 if (opts.direction == ‘right‘ || opts.direction == ‘down‘) { 100 _scrollObj[_type?‘scrollLeft‘:‘scrollTop‘] = scrollSize; 101 }else{ 102 _scrollObj[_type?‘scrollLeft‘:‘scrollTop‘] = 0; 103 } 104 105 if(opts.isMarquee){ 106 //滾動開始 107 //marqueeId = setInterval(scrollFunc, opts.scrollDelay); 108 marqueeId = setTimeout(scrollFunc, opts.scrollDelay); 109 //鼠標劃過停止滾動 110 $marquee.hover( 111 function(){ 112 clearInterval(marqueeId); 113 }, 114 function(){ 115 //marqueeId = setInterval(scrollFunc, opts.scrollDelay); 116 clearInterval(marqueeId); 117 marqueeId = setTimeout(scrollFunc, opts.scrollDelay); 118 } 119 ); 120 121 //控制加速運動 122 if(opts.controlBtn){ 123 $.each(opts.controlBtn, function(i,val){ 124 $(val).bind(opts.eventA,function(){ 125 opts.direction = i; 126 opts.oldAmount = opts.scrollAmount; 127 opts.scrollAmount = opts.newAmount; 128 }).bind(opts.eventB,function(){ 129 opts.scrollAmount = opts.oldAmount; 130 }); 131 }); 132 } 133 }else{ 134 if(opts.isAuto){ 135 //輪換開始 136 start(); 137 138 //鼠標劃過停止輪換 139 $marquee.hover( stop, start ); 140 } 141 142 //控制前後走 143 if(opts.btnGo){ 144 $.each(opts.btnGo, function(i,val){ 145 $(val).bind(opts.eventGo,function(){ 146 if(isMove == true) return; 147 opts.direction = i; 148 rollFunc(); 149 if (opts.isAuto) { 150 stop(); 151 start(); 152 } 153 }); 154 }); 155 } 156 } 157 158 function scrollFunc(){ 159 var _dir = (opts.direction == ‘left‘ || opts.direction == ‘right‘) ? ‘scrollLeft‘:‘scrollTop‘; 160 161 if(opts.isMarquee){ 162 if (opts.loop > 0) { 163 numMoved+=opts.scrollAmount; 164 if(numMoved>scrollSize*opts.loop){ 165 _scrollObj[_dir] = 0; 166 return clearInterval(marqueeId); 167 } 168 } 169 var newPos = _scrollObj[_dir]+(opts.direction == ‘left‘ || opts.direction == ‘up‘?1:-1)*opts.scrollAmount; 170 }else{ 171 if(opts.duration){ 172 if(t++<d){ 173 isMove = true; 174 var newPos = Math.ceil(easeOutQuad(t,b,c,d)); 175 if(t==d){ 176 newPos = e; 177 } 178 }else{ 179 newPos = e; 180 clearInterval(scrollId); 181 isMove = false; 182 return; 183 } 184 }else{ 185 var newPos = e; 186 clearInterval(scrollId); 187 } 188 } 189 190 if(opts.direction == ‘left‘ || opts.direction == ‘up‘){ 191 if(newPos>=scrollSize){ 192 newPos-=scrollSize; 193 } 194 }else{ 195 if(newPos<=0){ 196 newPos+=scrollSize; 197 } 198 } 199 _scrollObj[_dir] = newPos; 200 201 if(opts.isMarquee){ 202 marqueeId = setTimeout(scrollFunc, opts.scrollDelay); 203 }else if(t<d){ 204 if(scrollId) clearTimeout(scrollId); 205 scrollId = setTimeout(scrollFunc, opts.scrollDelay); 206 }else{ 207 isMove = false; 208 } 209 210 }; 211 212 function rollFunc(pPos){ 213 isMove = true; 214 var _dir = (opts.direction == ‘left‘ || opts.direction == ‘right‘) ? ‘scrollLeft‘:‘scrollTop‘; 215 var _neg = opts.direction == ‘left‘ || opts.direction == ‘up‘?1:-1; 216 217 numRoll = numRoll +_neg; 218 //得到當前所看元素序號並改變導航CSS 219 if(pPos == undefined&&opts.navId){ 220 $navBtns.eq(numView).removeClass(‘navOn‘); 221 numView +=_neg; 222 if(numView>=_len){ 223 numView = 0; 224 }else if(numView<0){ 225 numView = _len-1; 226 } 227 $navBtns.eq(numView).addClass(‘navOn‘); 228 numRoll = numView; 229 } 230 231 var _temp = numRoll<0?scrollSize:0; 232 t=0; 233 b=_scrollObj[_dir]; 234 //c=(pPos != undefined)?pPos:_neg*opts.distance; 235 e=(pPos != undefined)?pPos:_temp+(opts.distance*numRoll)%scrollSize; 236 if(_neg==1){ 237 if(e>b){ 238 c = e-b; 239 }else{ 240 c = e+scrollSize -b; 241 } 242 }else{ 243 if(e>b){ 244 c =e-scrollSize-b; 245 }else{ 246 c = e-b; 247 } 248 } 249 d=opts.duration; 250 //scrollId = setInterval(scrollFunc, opts.scrollDelay); 251 if(scrollId) clearTimeout(scrollId); 252 scrollId = setTimeout(scrollFunc, opts.scrollDelay); 253 } 254 function start(){ 255 rollId = setInterval(function(){ 256 rollFunc(); 257 }, opts.time*1000); 258 } 259 function stop(){ 260 clearInterval(rollId); 261 } 262 function easeOutQuad(t,b,c,d){ 263 return -c *(t/=d)*(t-2) + b; 264 } 265 function easeOutQuint(t,b,c,d){ 266 return c*((t=t/d-1)*t*t*t*t + 1) + b; 267 } 268 }); 269 }; 270 $.fn.kxbdSuperMarquee.defaults = { 271 isMarquee:false,//是否為Marquee 272 isEqual:true,//所有滾動的元素長寬是否相等,true,false 273 loop: 0,//循環滾動次數，0時無限 274 newAmount:3,//加速滾動的步長 275 eventA:‘mousedown‘,//鼠標事件，加速 276 eventB:‘mouseup‘,//鼠標事件，原速 277 isAuto:true,//是否自動輪換 278 time:5,//停頓時間，單位為秒 279 duration:50,//緩動效果，單次移動時間，越小速度越快，為0時無緩動效果 280 eventGo:‘click‘, //鼠標事件，向前向後走 281 direction: ‘left‘,//滾動方向，‘left‘,‘right‘,‘up‘,‘down‘ 282 scrollAmount:1,//步長 283 scrollDelay:10,//時長 284 eventNav:‘click‘//導航事件 285 }; 286 287 $.fn.kxbdSuperMarquee.setDefaults = function(settings) { 288 $.extend( $.fn.kxbdSuperMarquee.defaults, settings ); 289 }; 290 291 })(jQuery);
使用：
1 <div class="fl adcon" id="adcon"> 2 <ul class="admsg"> 3 <li class="date">浙江何氏村落何斯路村打造自己的文化氣質</li> 4 <li class="date">論姓氏文化研究社團在國家經濟建設主戰場中的地位</li> 5 <li class="date">周恩來412被捕 鮑靖中搭救脫險</li> 6 <li class="date">浙江何氏村落何斯路村打造自己的文化氣質浙江何氏村落何斯路村打造自己的文化氣質</li> 7 <li class="date">論姓氏文化研究社團在國家經濟建設主戰場中的地位論姓氏文化研究社團在國家經濟建設主戰場中的地位</li> 8 <li class="date">周恩來412被捕 鮑靖中搭救脫險周恩來412被捕 鮑靖中搭救脫險</li> 9 </ul> 10 </div>
$(function(){ $("#adcon").kxbdSuperMarquee({ isEqual:false, distance:25, time:5, direction:"up" }) })
元素上下、左右滾動插件，固定dom結構。基於jQuery，2009年