元素上下左右滚动插件，固定dom结构。基于jQuery，2009年
Posted millet-23
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了元素上下左右滚动插件，固定dom结构。基于jQuery，2009年相关的知识，希望对你有一定的参考价值。
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年的主要内容，如果未能解决你的问题，请参考以下文章
怎么让div内的某个元素固定不随div的滚动条的滚动而滚动？