/* * jquery javascript library marquee plus 1.0 * http://mzoe.com/ * * copyright (c) 2009 mzoe * dual licensed under the mit and gpl licenses. * * date: 2009-05-13 18:54:21 */ (function($) { $.fn.marquee = function(o) { //获取滚动内容内各元素相关信息 o = $.extend({ speed: parseint($(this).attr('speed')) || 30, // 滚动速度 step: parseint($(this).attr('step')) || 1, // 滚动步长 direction: $(this).attr('direction') || 'up', // 滚动方向 pause: parseint($(this).attr('pause')) || 0 // 停顿时长 }, o || {}); var dindex = jquery.inarray(o.direction, ['right', 'down']); if (dindex > -1) { o.direction = ['left', 'up'][dindex]; o.step = -o.step; } var mid; var div = $(this); // 容器对象 var divwidth = div.innerwidth(); // 容器宽 var divheight = div.innerheight(); // 容器高 var ul = $("ul", div); var li = $("li", ul); var lisize = li.size(); // 初始元素个数 var liwidth = li.width(); // 元素宽 var liheight = li.height(); // 元素高 var width = liwidth * lisize; var height = liheight * lisize; if ((o.direction == 'left' && width > divwidth) || (o.direction == 'up' && height > divheight)) { // 元素超出可显示范围才滚动 if (o.direction == 'left') { ul.width(2 * lisize * liwidth); if (o.step < 0) div.scrollleft(width); } else { ul.height(2 * lisize * liheight); if (o.step < 0) div.scrolltop(height); } ul.append(li.clone()); // 复制元素 mid = setinterval(_marquee, o.speed); div.hover( function(){clearinterval(mid);}, function(){mid = setinterval(_marquee, o.speed);} ); } function _marquee() { // 滚动 if (o.direction == 'left') { var l = div.scrollleft(); if (o.step < 0) { div.scrollleft((l <= 0 ? width : l) + o.step); } else { div.scrollleft((l >= width ? 0 : l) + o.step); } if (l % liwidth == 0) _pause(); } else { var t = div.scrolltop(); if (o.step < 0) { div.scrolltop((t <= 0 ? height : t) + o.step); } else { div.scrolltop((t >= height ? 0 : t) + o.step); } if (t % liheight == 0) _pause(); } } function _pause() { // 停顿 if (o.pause > 0) { var tempstep = o.step; o.step = 0; settimeout(function() { o.step = tempstep; }, o.pause); } } }; })(jquery); $(document).ready(function(){ $(".marquee").each(function() { $(this).marquee(); }); });