直接上代码吧
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>marquee插件--滚动示例</title> <link type="text/css" href="http://888.gtimg.com/css/v1.0/qqcaipiao/cp_party_effect.css" rel="stylesheet"/> <style type="text/css"> #mar1 { height: 120px; width: 200px; margin-top: 20px; margin-left: 20px; background: #333; color: #FFF; } #mar2 { height: 120px; width: 200px; margin-top: 20px; margin-left: 20px; background: #333; color: #FFF; } #mar3 { height: 40px; width: 500px; margin-top: 20px; margin-left: 20px; background: #06F; color: #FFF; } #mar4 { height: 40px; width: 500px; margin-top: 20px; margin-left: 20px; background: #06F; color: #FFF; } #mar5 { height: 40px; width: 500px; margin-top: 20px; margin-left: 20px; background: #F66; color: #FFF; } #mar6 { height: 40px; width: 500px; margin-top: 20px; margin-left: 20px; background: #F66; color: #FFF; } </style> </head> <body> <div id="mar1"> <ul> <li>测试数据第一条</li> <li>测试数据第二条</li> <li>测试数据第三条</li> <li>测试数据第四条</li> <li>测试数据第五条</li> <li>测试数据第六条</li> </ul> </div> <div id="mar2"> <ul> <li>测试数据第一条</li> <li>测试数据第二条</li> <li>测试数据第三条</li> <li>测试数据第四条</li> <li>测试数据第五条</li> <li>测试数据第六条</li> </ul> </div> <div id="mar3"> <ul> <li>测试数据第一条</li> <li>测试数据第二条</li> <li>测试数据第三条</li> <li>测试数据第四条</li> <li>测试数据第五条</li> </ul> </div> <div id="mar4"> <ul> <li>测试数据第一条</li> <li>测试数据第二条</li> <li>测试数据第三条</li> <li>测试数据第四条</li> <li>测试数据第五条</li> </ul> </div> <div id="mar5"> <ul> <li>测试数据第一条</li> <li>测试数据第二条</li> <li>测试数据第三条</li> <li>测试数据第四条</li> <li>测试数据第五条</li> </ul> </div> <div id="mar6"> <ul> <li>测试数据第一条</li> <li>测试数据第二条</li> <li>测试数据第三条</li> <li>测试数据第四条</li> <li>测试数据第五条</li> </ul> </div> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript"> /**
* @author xf.radish * jQuery插件 常用效果的实现 */ (function (jQuery) { jQuery.fn.extend({ /** *@description 无缝滚动 支持匀速上下左右和垂直翻滚上下 *@param { * direction:string,//滚动方向 值域：top|left|bottom|right|up|down * speed:string//滚动速度（垂直翻滚时为停留时间） * } o *@example *HTML结构 *<div id="mar"> * <ul> * <li>内容1</li> * <li>内容2</li> * <li>内容3</li> * </ul> *</div> *mar样式应该包含height,width,background等 注意不要覆盖了插件附加上去的样式 *调用： *jQuery("#mar").marquee({ * direction:"top", * speed:30 *}) * */ marquee:function (o) { var it = this, d = o.direction || 'left', //滚动方向 默认向左 s = o.speed || 30, //速度 默认30毫秒 mar = jQuery(it), mp1 = jQuery(it).children(0).attr({id:"mp1"}), marqueeFunc = getMarquee(d), marRun = marqueeFunc ? setInterval(marqueeFunc, s) : function () { return false; };//开始滚动 //鼠标悬停事件 jQuery(it).hover(function () { clearInterval(marRun); }, function () { marRun = setInterval(marqueeFunc, s); }) /*生成滚动函数 *1.判断方向 *2.装载CSS *3.判断需不需要滚动 *4.构造函数 */ function getMarquee(d) { var marqueeFunc; switch (d) { //水平向左 case "left": mar.addClass("plus-mar-left"); var liHeight = mar[0].offsetHeight; mar.css({"line-height":liHeight + "px"}); if (mp1[0].offsetWidth < mar[0].offsetWidth) return false; mp1.clone().attr({id:"mp2"}).appendTo(mar); marqueeFunc = function () { if (mar[0].scrollLeft >= mp1[0].scrollWidth) { mar[0].scrollLeft = 0; } else { mar[0].scrollLeft++; } } break; //水平向上 case "top": mar.addClass("plus-mar-top"); if (mp1.outerHeight() <= mar.outerHeight()) return false; var mp2 = mp1.clone().attr({id:"mp2"}).appendTo(mar); marqueeFunc = function () { var scrollTop = mar[0].scrollTop; if (mp1[0].offsetHeight > scrollTop) { mar[0].scrollTop = scrollTop + 1; } else { mar[0].scrollTop = 0; } } break; //水平向右 case "right": mar.addClass("plus-mar-left"); var liHeight = mar[0].offsetHeight; mar.css({"line-height":liHeight + "px"}); if (mp1[0].offsetWidth <= mar[0].offsetWidth) return false; var mp2 = mp1.clone().attr({id:"mp2"}).appendTo(mar); marqueeFunc = function () { if (mar[0].scrollLeft <= 0) { mar[0].scrollLeft += mp2[0].offsetWidth; } else { mar[0].scrollLeft--; } } break; //水平向下 case "bottom": mar.addClass("plus-mar-bottom"); if (mp1[0].offsetHeight <= mar[0].offsetHeight) return false; var mp2 = mp1.clone().attr({id:"mp2"}).appendTo(mar); mar[0].scrollTop = mar[0].scrollHeight; marqueeFunc = function () { if (mp1[0].offsetTop >= mar[0].scrollTop) { mar[0].scrollTop += mp1[0].offsetHeight; } else { mar[0].scrollTop--; } } break; //垂直翻滚 向上 case "up": mar.addClass("plus-mar-up"); var liHeight = mar[0].offsetHeight; mp1.css({"line-height":liHeight + "px"}); marqueeFunc = function () { var currLi = it.eq(0).find("ul:first"); currLi.animate({ marginTop:-liHeight }, 500, function () { currLi.find("li:first").appendTo(currLi); currLi.css({marginTop:0}); }) } break; //垂直翻滚 向下 case "down": mar.addClass("plus-mar-down"); var liHeight = mar[0].offsetHeight, liLength = mp1.children().length, topInit = -(liLength - 1) * liHeight + "px"; mp1.css({"top":topInit, "line-height":liHeight + "px"}); marqueeFunc = function () { var currLi = it.eq(0).find("ul:last"); currLi.animate({ marginTop:liHeight }, 500, function () { currLi.find("li:last").prependTo(currLi); currLi.css({marginTop:0}); }) } break; default: { marqueeFunc = null; alert("滚动插件：传入的参数{direction}有误！"); } } return marqueeFunc; } } }) })(jQuery); $("#mar1").marquee({ direction:"top", speed:30 }); $("#mar2").marquee({ direction:"bottom", speed:30 }); $("#mar3").marquee({ direction:"right", speed:30 }); $("#mar4").marquee({ direction:"left", speed:30 }); $("#mar5").marquee({ direction:"down", speed:2000 }) $("#mar6").marquee({ direction:"up", speed:3000 }); </script> </body> </html>