方案一：
<marquee width="360" scrolldelay="20" scrollamount="2" onclick="openZoosUrl();return false">这是走马灯实例，这是走马灯实例，这是走马灯实例...</marquee>
方案二：构建jquery插件
走马灯插件：http://aamirafridi.com/jquery/jquery-marquee-plugin.js
(function($) {
$.fn.marquee = function(options) {
return this.each(function() {
var o = $.extend({}, $.fn.marquee.defaults, options), $this = $(this), $marqueeWrapper, containerWidth, animationCss, verticalDir, elWidth, loopCount = 3, playState = \'animation-play-state\', css3AnimationIsSupported = !1, _prefixedEvent = function(element, type, callback) {
var pfx = ["webkit", "moz", "MS", "o", ""];
for (var p = 0; p < pfx.length; p++) {
if (!pfx[p])
type = type.toLowerCase();
element.addEventListener(pfx[p] + type, callback, !1)
}
}, _objToString = function(obj) {
var tabjson = [];
for (var p in obj) {
if (obj.hasOwnProperty(p)) {
tabjson.push(p + \':\' + obj[p])
}
}
tabjson.push();
return \'{\' + tabjson.join(\',\') + \'}\'
}, _startAnimationWithDelay = function() {
$this.timer = setTimeout(animate, o.delayBeforeStart)
}, methods = {
pause: function() {
if (css3AnimationIsSupported && o.allowCss3Support) {
$marqueeWrapper.css(playState, \'paused\')
} else {
if ($.fn.pause) {
$marqueeWrapper.pause()
}
}
$this.data(\'runningStatus\', \'paused\');
$this.trigger(\'paused\')
},
resume: function() {
if (css3AnimationIsSupported && o.allowCss3Support) {
$marqueeWrapper.css(playState, \'running\')
} else {
if ($.fn.resume) {
$marqueeWrapper.resume()
}
}
$this.data(\'runningStatus\', \'resumed\');
$this.trigger(\'resumed\')
},
toggle: function() {
methods[$this.data(\'runningStatus\') == \'resumed\' ? \'pause\' : \'resume\']()
},
destroy: function() {
clearTimeout($this.timer);
$this.find("*").addBack().off();
$this.html($this.find(\'.js-marquee:first\').html())
}
};
if (typeof options === \'string\') {
if ($.isFunction(methods[options])) {
if (!$marqueeWrapper) {
$marqueeWrapper = $this.find(\'.js-marquee-wrapper\')
}
if ($this.data(\'css3AnimationIsSupported\') === !0) {
css3AnimationIsSupported = !0
}
methods[options]()
}
return
}
var dataAttributes = {}, attr;
$.each(o, function(key, value) {
attr = $this.attr(\'data-\' + key);
if (typeof attr !== \'undefined\') {
switch (attr) {
case \'true\':
attr = !0;
break;
case \'false\':
attr = !1;
break
}
o[key] = attr
}
});
if (o.speed) {
o.duration = parseInt($this.width(), 10) / o.speed * 1000
}
verticalDir = o.direction == \'up\' || o.direction == \'down\';
o.gap = o.duplicated ? parseInt(o.gap) : 0;
$this.wrapInner(\'<div class="js-marquee"></div>\');
var $el = $this.find(\'.js-marquee\').css({
\'margin-right\': o.gap,
\'float\': \'left\'
});
if (o.duplicated) {
$el.clone(!0).appendTo($this)
}
$this.wrapInner(\'<div style="width:100000px" class="js-marquee-wrapper"></div>\');
$marqueeWrapper = $this.find(\'.js-marquee-wrapper\');
if (verticalDir) {
var containerHeight = $this.height();
$marqueeWrapper.removeAttr(\'style\');
$this.height(containerHeight);
$this.find(\'.js-marquee\').css({
\'float\': \'none\',
\'margin-bottom\': o.gap,
\'margin-right\': 0
});
if (o.duplicated)
$this.find(\'.js-marquee:last\').css({
\'margin-bottom\': 0
});
var elHeight = $this.find(\'.js-marquee:first\').height() + o.gap;
if (o.startVisible && !o.duplicated) {
o._completeDuration = ((parseInt(elHeight, 10) + parseInt(containerHeight, 10)) / parseInt(containerHeight, 10)) * o.duration;
o.duration = (parseInt(elHeight, 10) / parseInt(containerHeight, 10)) * o.duration
} else {
o.duration = ((parseInt(elHeight, 10) + parseInt(containerHeight, 10)) / parseInt(containerHeight, 10)) * o.duration
}
} else {
elWidth = $this.find(\'.js-marquee:first\').width() + o.gap;
containerWidth = $this.width();
if (o.startVisible && !o.duplicated) {
o._completeDuration = ((parseInt(elWidth, 10) + parseInt(containerWidth, 10)) / parseInt(containerWidth, 10)) * o.duration;
o.duration = (parseInt(elWidth, 10) / parseInt(containerWidth, 10)) * o.duration
} else {
o.duration = ((parseInt(elWidth, 10) + parseInt(containerWidth, 10)) / parseInt(containerWidth, 10)) * o.duration
}
}
if (o.duplicated) {
o.duration = o.duration / 2
}
if (o.allowCss3Support) {
var elm = document.body || document.createElement(\'div\')
, animationName = \'marqueeAnimation-\' + Math.floor(Math.random() * 10000000)
, domPrefixes = \'Webkit Moz O ms Khtml\'.split(\' \')
, animationString = \'animation\'
, animationCss3Str = \'\'
, keyframeString = \'\';
if (elm.style.animation !== undefined) {
keyframeString = \'@keyframes \' + animationName + \' \';
css3AnimationIsSupported = !0
}
if (css3AnimationIsSupported === !1) {
for (var i = 0; i < domPrefixes.length; i++) {
if (elm.style[domPrefixes[i] + \'AnimationName\'] !== undefined) {
var prefix = \'-\' + domPrefixes[i].toLowerCase() + \'-\';
animationString = prefix + animationString;
playState = prefix + playState;
keyframeString = \'@\' + prefix + \'keyframes \' + animationName + \' \';
css3AnimationIsSupported = !0;
break
}
}
}
if (css3AnimationIsSupported) {
animationCss3Str = animationName + \' \' + o.duration / 1000 + \'s \' + o.delayBeforeStart / 1000 + \'s infinite \' + o.css3easing;
$this.data(\'css3AnimationIsSupported\', !0)
}
}
var _rePositionVertically = function() {
$marqueeWrapper.css(\'transform\', \'translateY(\' + (o.direction == \'up\' ? containerHeight + \'px\' : \'-\' + elHeight + \'px\') + \')\')
}
, _rePositionHorizontally = function() {
$marqueeWrapper.css(\'transform\', \'translateX(\' + (o.direction == \'left\' ? containerWidth + \'px\' : \'-\' + elWidth + \'px\') + \')\')
};
if (o.duplicated) {
if (verticalDir) {
if (o.startVisible) {
$marqueeWrapper.css(\'transform\', \'translateY(0)\')
} else {
$marqueeWrapper.css(\'transform\', \'translateY(\' + (o.direction == \'up\' ? containerHeight + \'px\' : \'-\' + ((elHeight * 2) - o.gap) + \'px\') + \')\')
}
} else {
if (o.startVisible) {
$marqueeWrapper.css(\'transform\', \'translateX(0)\')
} else {
$marqueeWrapper.css(\'transform\', \'translateX(\' + (o.direction == \'left\' ? containerWidth + \'px\' : \'-\' + ((elWidth * 2) - o.gap) + \'px\') + \')\')
}
}
if (!o.startVisible) {
loopCount = 1
}
} else if (o.startVisible) {
loopCount = 2
} else {
if (verticalDir) {
_rePositionVertically()
} else {
_rePositionHorizontally()
}
}
var animate = function() {
if (o.duplicated) {
if (loopCount === 1) {
o._originalDuration = o.duration;
if (verticalDir) {
o.duration = o.direction == \'up\' ? o.duration + (containerHeight / ((elHeight) / o.duration)) : o.duration * 2
} else {
o.duration = o.direction == \'left\' ? o.duration + (containerWidth / ((elWidth) / o.duration)) : o.duration * 2
}
if (animationCss3Str) {
animationCss3Str = animationName + \' \' + o.duration / 1000 + \'s \' + o.delayBeforeStart / 1000 + \'s \' + o.css3easing
}
loopCount++
} else if (loopCount === 2) {
o.duration = o._originalDuration;
if (animationCss3Str) {
animationName = animationName + \'0\';
keyframeString = $.trim(keyframeString) + \'0 \';
animationCss3Str = animationName + \' \' + o.duration / 1000 + \'s 0s infinite \' + o.css3easing
}
loopCount++
}
}
if (verticalDir) {
if (o.duplicated) {
if (loopCount > 2) {
$marqueeWrapper.css(\'transform\', \'translateY(\' + (o.direction == \'up\' ? 0 : \'-\' + elHeight + \'px\') + \')\')
}
animationCss = {
\'transform\': \'translateY(\' + (o.direction == \'up\' ? \'-\' + elHeight + \'px\' : 0) + \')\'
}
} else if (o.startVisible) {
if (loopCount === 2) {
if (animationCss3Str) {
animationCss3Str = animationName + \' \' + o.duration / 1000 + \'s \' + o.delayBeforeStart / 1000 + \'s \' + o.css3easing
}
animationCss = {
\'transform\': \'translateY(\' + (o.direction == \'up\' ? \'-\' + elHeight + \'px\' : containerHeight + \'px\') + \')\'
};
loopCount++
} else if (loopCount === 3) {
o.duration = o._completeDuration;
if (animationCss3Str) {
animationName = animationName + \'0\';
keyframeString = $.trim(keyframeString) + \'0 \';
animationCss3Str = animationName + \' \' + o.duration / 1000 + \'s 0s infinite \' + o.css3easing
}
_rePositionVertically()
}
} else {
_rePositionVertically();
animationCss = {
\'transform\': \'translateY(\' + (o.direction == \'up\' ? \'-\' + ($marqueeWrapper.height()) + \'px\' : containerHeight + \'px\') + \')\'
}
}
} else {
if (o.duplicated) {
if (loopCount > 2) {
$marqueeWrapper.css(\'transform\', \'translateX(\' + (o.direction == \'left\' ? 0 : \'-\' + elWidth + \'px\') + \')\')
}
animationCss = {
\'transform\': \'translateX(\' + (o.direction == \'left\' ? \'-\' + elWidth + \'px\' : 0) + \')\'
}
} else if (o.startVisible) {
if (loopCount === 2) {
if (animationCss3Str) {
animationCss3Str = animationName + \' \' + o.duration / 1000 + \'s \' + o.delayBeforeStart / 1000 + \'s \' + o.css3easing
}
animationCss = {
\'transform\': \'translateX(\' + (o.direction == \'left\' ? \'-\' + elWidth + \'px\' : containerWidth + \'px\') + \')\'
};
loopCount++
} else if (loopCount === 3) {
o.duration = o._completeDuration;
if (animationCss3Str) {
animationName = animationName + \'0\';
keyframeString = $.trim(keyframeString) + \'0 \';
animationCss3Str = animationName + \' \' + o.duration / 1000 + \'s 0s infinite \' + o.css3easing
}
_rePositionHorizontally()
}
} else {
_rePositionHorizontally();
animationCss = {
\'transform\': \'translateX(\' + (o.direction == \'left\' ? \'-\' + elWidth + \'px\' : containerWidth + \'px\') + \')\'
}
}
}
$this.trigger(\'beforeStarting\');
if (css3AnimationIsSupported) {
$marqueeWrapper.css(animationString, animationCss3Str);
var keyframeCss = keyframeString + \' { 100% \' + _objToString(animationCss) + \'}\'
, $styles = $marqueeWrapper.find(\'style\');
if ($styles.length !== 0) {
$styles.filter(":last").html(keyframeCss)
} else {
$(\'head\').append(\'<style>\' + keyframeCss + \'</style>\')
}
_prefixedEvent($marqueeWrapper[0], "AnimationIteration", function() {
$this.trigger(\'finished\')
});
_prefixedEvent($marqueeWrapper[0], "AnimationEnd", function() {
animate();
$this.trigger(\'finished\')
})
} else {
$marqueeWrapper.animate(animationCss, o.duration, o.easing, function() {
$this.trigger(\'finished\');
if (o.pauseOnCycle) {
_startAnimationWithDelay()
} else {
animate()
}
})
}
$this.data(\'runningStatus\', \'resumed\')
};
$this.on(\'pause\', methods.pause);
$this.on(\'resume\', methods.resume);
if (o.pauseOnHover) {
$this.on(\'mouseenter\', methods.pause);
$this.on(\'mouseleave\', methods.resume)
}
if (css3AnimationIsSupported && o.allowCss3Support) {
animate()
} else {
_startAnimationWithDelay()
}
})
}
;
$.fn.marquee.defaults = {
allowCss3Support: !0,
css3easing: \'linear\',
easing: \'linear\',
delayBeforeStart: 1000,
direction: \'left\',
duplicated: !1,
duration: 5000,
speed: 0,
gap: 20,
pauseOnCycle: !1,
pauseOnHover: !1,
startVisible: !1
}
}
)(jQuery)
如何编写html：
<div class="marquee">
<div class="js-marquee-wrapper">
<div class="js-marquee">XXXXXX</div>
</div>
</div>
如何创建实例：
$(".marquee").marquee({
speed: 20,
startVisible: !0,
gap: 50,
delayBeforeStart: 1e3,
duplicated: !0
});