元素上下、左右滚动插件，固定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 ????????????????//得到当前所看元素序号并改变导航CSS219 ????????????????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,//是否为Marquee272 ????????isEqual:true,//所有滚动的元素长宽是否相等,true,false273 ????????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" ???????}) ???})