滚动消息，向上滚动，如果行很长则横向滚动再向上滚动

来源：互联网发布：盐城市公务员网络培训编辑：程序博客网时间：2024/05/17 22:13

jquery_marquee.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>滚动消息</title><mce:script type="text/javascript" src="jquery-1.3.2.min.js" mce_src="jquery-1.3.2.min.js"></mce:script><mce:script type="text/javascript" src="jQuery.marquee.js" mce_src="jQuery.marquee.js"></mce:script><mce:script type="text/javascript"></mce:script><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">ul.marquee {/* required styles */display: block;padding: 0;margin: 0;list-style: none;line-height: 1;position: relative;overflow: hidden;/* optional styles for appearance */width: 500px;height: 22px; /* height should be included to reserve visual space for the marquee */background-color: #f2f2ff;border: 1px solid #08084d;}ul.marquee li {/* required styles */position: absolute;top: -999em;left: 0;display: block;white-space: nowrap; /* keep all text on a single line *//* optional styles for appearance */font: 14px Arial, Helvetica, sans-serif;padding: 3px 5px;}</style></head><body><ul id="marquee1" class="marquee"><li>第一行</li><li>第二行</li><li>第三行　很长很长第三行　很长很长第三行　很长很长第三行　很长很长第三行　很长很长第三行　很长很长，第三行结束。</li> <li>第四行</li><li>第五行</li><li>第六行</li></ul></body></html>

jQuery.marquee.js文件

/*! * Marquee jQuery Plug-in * * Copyright 2010 Giva, Inc. (http://www.givainc.com/labs/) * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. * * Date: 2009-05-20 * Rev: 1.0.01 */;(function($){// set the version of the link select$.marquee = {version: "1.0.01"};$.fn.marquee = function(options) {var method = typeof arguments[0] == "string" && arguments[0];var args = method && Array.prototype.slice.call(arguments, 1) || arguments;// get a reference to the first marquee foundvar self = (this.length == 0) ? null : $.data(this[0], "marquee");// if a method is supplied, execute it for non-empty resultsif( self && method && this.length ){// if request a copy of the object, return itif( method.toLowerCase() == "object" ) return self;// if method is defined, run it and return either it's results or the chainelse if( self[method] ){// define a result variable to return to the jQuery chainvar result;this.each(function (i){// apply the method to the current elementvar r = $.data(this, "marquee")[method].apply(self, args);// if first iteration we need to check if we're done processing or need to add it to the jquery chainif( i == 0 && r ){// if this is a jQuery item, we need to store them in a collectionif( !!r.jquery ){result = $([]).add(r);// otherwise, just store the result and stop executing} else {result = r;// since we're a non-jQuery item, just cancel processing further itemsreturn false;}// keep adding jQuery objects to the results} else if( !!r && !!r.jquery ){result = result.add(r);}});// return either the results (which could be a jQuery object) or the original chainreturn result || this;// everything else, return the chain} else return this;// initializing request} else {// create a new marquee for each object foundreturn this.each(function (){new $.Marquee(this, options);});};};$.Marquee = function (marquee, options){options = $.extend({}, $.Marquee.defaults, options);var self = this, $marquee = $(marquee), $lis = $marquee.find("> li"), current = -1, hard_paused = false, paused = false, loop_count = 0;// store a reference to this marquee$.data($marquee[0], "marquee", self);// pause the marqueethis.pause = function (){// mark as hard pause (no resume on hover)hard_paused = true;// pause scrollingpause();}// resume the marqueethis.resume = function (){// mark as hard pause (no resume on hover)hard_paused = false;// resume scrollingresume();}// update the marqueethis.update = function (){var iCurrentCount = $lis.length;// update the line items$lis = $marquee.find("> li");// if we only have one item, show the next item by resuming playback (which will scroll to the next item)if( iCurrentCount <= 1 ) resume();}// code to introduce the new marquee messagefunction show(i){// if we're already scrolling an item, stop processingif( $lis.filter("." + options.cssShowing).length > 0 ) return false;var $li = $lis.eq(i);// run the beforeshow callbackif( $.isFunction(options.beforeshow) ) options.beforeshow.apply(self, [$marquee, $li]);var params = {top: (options.yScroll == "top" ? "-" : "+") + $li.outerHeight() + "px", left: 0};$marquee.data("marquee.showing", true);$li.addClass(options.cssShowing);$li.css(params).animate({top: "0px"}, options.showSpeed, options.fxEasingShow, function (){ // run the show callbackif( $.isFunction(options.show) ) options.show.apply(self, [$marquee, $li]);$marquee.data("marquee.showing", false);scroll($li);});}// keep the message on the screen for the user to read, scrolling long messagesfunction scroll($li, delay){// if paused, stop processingif( paused == true ) return false;// get the delay speeddelay = delay || options.pauseSpeed;// ifitem is wider than marquee, then scrollif( doScroll($li) ){setTimeout(function (){// if paused, stop processing (we need to check to see if the pause state has changed)if( paused == true ) return false;var width = $li.outerWidth(), endPos = width * -1, curPos = parseInt($li.css("left"), 10);// scroll the message to the left$li.animate({left: endPos + "px"}, ((width + curPos) * options.scrollSpeed), options.fxEasingScroll, function (){ finish($li); });}, delay);} else if ( $lis.length > 1 ){setTimeout(function (){// if paused, stop processing (we need to check to see if the pause state has changed)if( paused == true ) return false;// scroll the message down$li.animate({top: (options.yScroll == "top" ? "+" : "-") + $marquee.innerHeight() + "px"}, options.showSpeed, options.fxEasingScroll);// finish showing this messagefinish($li);}, delay);}}function finish($li){// run the aftershow callback, only after we've displayed the first optionif( $.isFunction(options.aftershow) ) options.aftershow.apply(self, [$marquee, $li]);// mark that we're done scrolling this element$li.removeClass(options.cssShowing);// show the next messageshowNext();}// this function will pause the current animationfunction pause(){// mark the message as pausedpaused = true;// don't stop animation if we're just beginning to show the marquee messageif( $marquee.data("marquee.showing") != true ){// we must dequeue() the animation to ensure that it does indeed stop animation$lis.filter("." + options.cssShowing).dequeue().stop();}}// this function will resume the previous animationfunction resume(){// mark the message as resumedpaused = false;// don't resume animation if we haven't completed introducing the messageif( $marquee.data("marquee.showing") != true ) scroll($lis.filter("." + options.cssShowing), 1);}// determine if we should pause on hoverif( options.pauseOnHover ){$marquee.hover(function (){// if hard paused, prevent hover eventsif( hard_paused ) return false;// pause scrollingpause();}, function (){// if hard paused, prevent hover eventsif( hard_paused ) return false;// resume scrollingresume();});}// determines if the message needs to be scrolled to readfunction doScroll($li){return ($li.outerWidth() > $marquee.innerWidth());}// show the next message in the queuefunction showNext(){// increase the current counter (starts at -1, to indicate a new marquee beginning)current++;// if we only have 1 entry and it doesn't need to scroll, just cancel processingif( current >= $lis.length ){// if we've reached our loop count, cancel processingif( !isNaN(options.loop) && options.loop > 0 && (++loop_count >= options.loop ) ) return false;current = 0;} // show the next messageshow(current);}// run the init callbackif( $.isFunction(options.init) ) options.init.apply(self, [$marquee, options]);// show the first itemshowNext();};$.Marquee.defaults = { yScroll: "top" // the position of the marquee initially scroll (can be either "top" or "bottom"), showSpeed: 650 // the speed of to animate the initial dropdown of the messages, scrollSpeed: 12 // the speed of the scrolling (keep number low), pauseSpeed: 2000 // the time to wait before showing the next message or scrolling current message, pauseOnHover: true // determine if we should pause on mouse hover, loop: -1 // determine how many times to loop through the marquees (#'s < 0 = infinite), fxEasingShow: "swing" // the animition easing to use when showing a new marquee, fxEasingScroll: "linear" // the animition easing to use when showing a new marquee// define the class statements, cssShowing: "marquee-showing"// event handlers, init: null // callback that occurs when a marquee is initialized, beforeshow: null // callback that occurs before message starts scrolling on screen, show: null // callback that occurs when a new marquee message is displayed, aftershow: null // callback that occurs after the message has scrolled};})(jQuery);