![文字滚动效果代码_下列不具备续效功能的一组代码是[通俗易懂]"](https://img.bianchenghao.cn/app/bianchenghao_cn/4f3bc6e6b43a4c629fe2b73ae4e9ef66.jpg "文字滚动效果代码_下列不具备续效功能的一组代码是[通俗易懂]插图")
“1、文字竖直方向-向上滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<title>文字竖直方向滚动-向上滚动</title>
</head>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
border: 0px;
}
.demo {
/* overflow一定要设置为hidden */
overflow: hidden;
height: 280px;
width: 440px;
margin: 90px auto;
border: 5px solid #000;
font-size: 18px;
}
.demo1,
.demo2 {
/* 高度一定要设置为auto */
height: auto;
width: 100%;
}
.demo1 {
background-color: pink;
}
.demo2 {
background-color: greenyellow;
}
</style>
<body>
<div class="demo">
<div class="demo1">
将进酒<br />
君不见黄河之水天上来，奔流到海不复回。<br />
君不见高堂明镜悲白发，朝如青丝暮成雪。<br />
人生得意须尽欢，莫使金樽空对月。<br />
天生我材必有用，千金散尽还复来。<br />
烹羊宰牛且为乐，会须一饮三百杯。<br />
岑夫子，丹丘生，将进酒，杯莫停。<br />
与君歌一曲，请君为我倾耳听。<br />
钟鼓馔玉不足贵，但愿长醉不复醒。<br />
古来圣贤皆寂寞，惟有饮者留其名。<br />
陈王昔时宴平乐，斗酒十千恣欢谑。<br />
主人何为言少钱，径须沽取对君酌。<br />
五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。<br />
</div>
<div class="demo2"></div>
</div>
<script type="text/javascript">
scrollUp(80, 'demo', 'demo1', 'demo2')
// 文字向上滚动
function scrollUp(speed = 80, outerClass, innerClass1, innerClass2) {
var demo = document.getElementsByClassName(outerClass)[0]
var demo1 = document.getElementsByClassName(innerClass1)[0]
var demo2 = document.getElementsByClassName(innerClass2)[0]
demo2.innerHTML = demo1.innerHTML // 把第一个div中的内容复制到第二个div中
function Marquee() {
// 文字向上走，竖直方向的滚动条滑块向下滑，所以容器demo的scrollTop应该逐渐变大。
// 当demo.scrollTop == demo1.offsetHeight 时，demo1的内容完全滚动完。
if (demo.scrollTop >= demo1.offsetHeight) {
demo.scrollTop = 0
} else {
demo.scrollTop = demo.scrollTop + 1
}
}
var MyMar = setInterval(Marquee, speed)
demo.onmouseover = function () {
// 鼠标经过，滚动暂停
clearInterval(MyMar)
}
demo.onmouseout = function () {
// 鼠标移出，滚动继续
MyMar = setInterval(Marquee, speed)
}
}
</script>
</body>
</html>
2、文字竖直方向-向下滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<title>文字竖直方向滚动-向下滚动</title>
</head>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
border: 0px;
}
.demo {
/* overflow一定要设置为hidden */
overflow: hidden;
height: 280px;
width: 440px;
margin: 90px auto;
border: 5px solid #000;
font-size: 18px;
}
.demo1,
.demo2 {
/* 高度一定要设置为auto */
height: auto;
width: 100%;
}
.demo1 {
background-color: pink;
}
.demo2 {
background-color: greenyellow;
}
</style>
<body>
<div class="demo">
<div class="demo1">
将进酒<br />
君不见黄河之水天上来，奔流到海不复回。<br />
君不见高堂明镜悲白发，朝如青丝暮成雪。<br />
人生得意须尽欢，莫使金樽空对月。<br />
天生我材必有用，千金散尽还复来。<br />
烹羊宰牛且为乐，会须一饮三百杯。<br />
岑夫子，丹丘生，将进酒，杯莫停。<br />
与君歌一曲，请君为我倾耳听。<br />
钟鼓馔玉不足贵，但愿长醉不复醒。<br />
古来圣贤皆寂寞，惟有饮者留其名。<br />
陈王昔时宴平乐，斗酒十千恣欢谑。<br />
主人何为言少钱，径须沽取对君酌。<br />
五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。<br />
</div>
<div class="demo2"></div>
</div>
<script type="text/javascript">
scrollDown(80, 'demo', 'demo1', 'demo2')
// 文字向下滚动
function scrollDown(speed = 80, outerClass, innerClass1, innerClass2) {
var demo = document.getElementsByClassName(outerClass)[0]
var demo1 = document.getElementsByClassName(innerClass1)[0]
var demo2 = document.getElementsByClassName(innerClass2)[0]
demo2.innerHTML = demo1.innerHTML
demo.scrollTop = demo.scrollHeight
function Marquee() {
console.log(demo1.offsetTop, demo.scrollTop)
if (demo1.offsetTop - demo.scrollTop >= 0)
demo.scrollTop += demo2.offsetHeight
else {
demo.scrollTop--
}
}
var MyMar = setInterval(Marquee, speed)
demo.onmouseover = function () {
clearInterval(MyMar)
}
demo.onmouseout = function () {
MyMar = setInterval(Marquee, speed)
}
}
</script>
</body>
</html>
3、文字水平滚动-向左
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<title>文字水平滚动-向左滚动</title>
</head>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
border: 0px;
}
ul {
display: flex;
flex-wrap: nowrap;
overflow: hidden;
width: 600px;
margin: 90px auto;
border: 3px solid #000;
}
ul li {
white-space: nowrap;
margin-left: 30px;
list-style: none;
}
</style>
<body>
<ul id="scrollobj" onmouseover="stop()" onmouseout="start()">
<li>将进酒</li>
<li>君不见黄河之水天上来，奔流到海不复回。</li>
<li>君不见高堂明镜悲白发，朝如青丝暮成雪。</li>
<li>人生得意须尽欢，莫使金樽空对月。</li>
<li>天生我材必有用，千金散尽还复来。</li>
<li>烹羊宰牛且为乐，会须一饮三百杯。</li>
<li>岑夫子，丹丘生，将进酒，杯莫停。</li>
<li>与君歌一曲，请君为我倾耳听。</li>
<li>钟鼓馔玉不足贵，但愿长醉不复醒。</li>
<li>古来圣贤皆寂寞，惟有饮者留其名。</li>
<li>陈王昔时宴平乐，斗酒十千恣欢谑。</li>
<li>主人何为言少钱，径须沽取对君酌。</li>
<li>五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。</li>
</ul>
<script type="text/javascript">
function scrollLeft(obj) {
var tmp = (obj.scrollLeft)++;
//当滚动条到达右边顶端时
if (obj.scrollLeft == tmp) obj.innerHTML += obj.innerHTML;
//当滚动条滚动了初始内容的宽度时滚动条回到最左端
if (obj.scrollLeft >= obj.firstChild.offsetWidth) obj.scrollLeft = 0;
}
var timer = setInterval("scrollLeft(document.getElementById('scrollobj'))", 60);
function stop() {
clearInterval(timer);
}
function start() {
timer = setInterval("scrollLeft(document.getElementById('scrollobj'))", 60);
}
</script>
</body>
</html>
4、文字水平滚动-向左（使用插件）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>marquee插件-文字滚动</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- <script type='text/javascript' src='jquery.marquee.js'></script> -->
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>
</head>
<style>
.loader_text {
margin: 4rem auto;
width: 500px;
height: 30px;
line-height: 30px;
background-color: aqua;
overflow: hidden;
white-space: nowrap;
}
</style>
<body>
<div class="loader_text">
将进酒
君不见黄河之水天上来，奔流到海不复回。
君不见高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
烹羊宰牛且为乐，会须一饮三百杯。
岑夫子，丹丘生，将进酒，杯莫停。
与君歌一曲，请君为我倾耳听。
钟鼓馔玉不足贵，但愿长醉不复醒。
古来圣贤皆寂寞，惟有饮者留其名。
陈王昔时宴平乐，斗酒十千恣欢谑。
主人何为言少钱，径须沽取对君酌。
五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。
</div>
</body>
<script>
console.log('load')
$('.loader_text').marquee({
gap: 20,//
allowCss3Support: true,
speed: 50,
delayBeforeStart: 0,
startVisible: true,
duplicated: true
});
</script>
</html>
jquery.marquee.js
/**
* jQuery.marquee - scrolling text like old marquee element
* @author Aamir Afridi - aamirafridi(at)gmail(dot)com / http://aamirafridi.com/jquery/jquery-marquee-plugin
*/;
(function($) {
$.fn.marquee = function(options) {
return this.each(function() {
// Extend the options if any provided
var o = $.extend({
}, $.fn.marquee.defaults, options),
$this = $(this),
$marqueeWrapper, containerWidth, animationCss, verticalDir, elWidth,
loopCount = 3,
playState = 'animation-play-state',
css3AnimationIsSupported = false,
// Private methods
_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, false);
}
},
_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);
},
// Public methods
methods = {
pause: function() {
if (css3AnimationIsSupported && o.allowCss3Support) {
$marqueeWrapper.css(playState, 'paused');
} else {
// pause using pause plugin
if ($.fn.pause) {
$marqueeWrapper.pause();
}
}
// save the status
$this.data('runningStatus', 'paused');
// fire event
$this.trigger('paused');
},
resume: function() {
// resume using css3
if (css3AnimationIsSupported && o.allowCss3Support) {
$marqueeWrapper.css(playState, 'running');
} else {
// resume using pause plugin
if ($.fn.resume) {
$marqueeWrapper.resume();
}
}
// save the status
$this.data('runningStatus', 'resumed');
// fire event
$this.trigger('resumed');
},
toggle: function() {
methods[$this.data('runningStatus') === 'resumed' ? 'pause' : 'resume']();
},
destroy: function() {
// Clear timer
clearTimeout($this.timer);
// Unbind all events
$this.find("*").addBack().off();
// Just unwrap the elements that has been added using this plugin
$this.html($this.find('.js-marquee:first').html());
}
};
// Check for methods
if (typeof options === 'string') {
if ($.isFunction(methods[options])) {
// Following two IF statements to support public methods
if (!$marqueeWrapper) {
$marqueeWrapper = $this.find('.js-marquee-wrapper');
}
if ($this.data('css3AnimationIsSupported') === true) {
css3AnimationIsSupported = true;
}
methods[options]();
}
return;
}
/* Check if element has data attributes. They have top priority
For details https://twitter.com/aamirafridi/status/403848044069679104 - Can't find a better solution :/ jQuery 1.3.2 doesn't support $.data().KEY hence writting the following */
var dataAttributes = {
},
attr;
$.each(o, function(key) {
// Check if element has this data attribute
attr = $this.attr('data-' + key);
if (typeof attr !== 'undefined') {
// Now check if value is boolean or not
switch (attr) {
case 'true':
attr = true;
break;
case 'false':
attr = false;
break;
}
o[key] = attr;
}
});
// Reintroduce speed as an option. It calculates duration as a factor of the container width
// measured in pixels per second.
if (o.speed) {
o.duration = parseInt($this.width(), 10) / o.speed * 1000;
}
// Shortcut to see if direction is upward or downward
verticalDir = o.direction === 'up' || o.direction === 'down';
// no gap if not duplicated
o.gap = o.duplicated ? parseInt(o.gap) : 0;
// wrap inner content into a div
$this.wrapInner('<div class="js-marquee"></div>');
// Make copy of the element
var $el = $this.find('.js-marquee').css({
'margin-right': o.gap,
'float': 'left'
});
if (o.duplicated) {
$el.clone(true).appendTo($this);
}
// wrap both inner elements into one div
$this.wrapInner('<div style="width:100000px" class="js-marquee-wrapper"></div>');
// Save the reference of the wrapper
$marqueeWrapper = $this.find('.js-marquee-wrapper');
// If direction is up or down, get the height of main element
if (verticalDir) {
var containerHeight = $this.height();
$marqueeWrapper.removeAttr('style');
$this.height(containerHeight);
// Change the CSS for js-marquee element
$this.find('.js-marquee').css({
'float': 'none',
'margin-bottom': o.gap,
'margin-right': 0
});
// Remove bottom margin from 2nd element if duplicated
if (o.duplicated) {
$this.find('.js-marquee:last').css({
'margin-bottom': 0
});
}
var elHeight = $this.find('.js-marquee:first').height() + o.gap;
// adjust the animation duration according to the text length
if (o.startVisible && !o.duplicated) {
// Compute the complete animation duration and save it for later reference
// formula is to: (Height of the text node + height of the main container / Height of the main container) * duration;
o._completeDuration = ((parseInt(elHeight, 10) + parseInt(containerHeight, 10)) / parseInt(containerHeight, 10)) * o.duration;
// formula is to: (Height of the text node / height of the main container) * duration
o.duration = (parseInt(elHeight, 10) / parseInt(containerHeight, 10)) * o.duration;
} else {
// formula is to: (Height of the text node + height of the main container / Height of the main container) * duration;
o.duration = ((parseInt(elHeight, 10) + parseInt(containerHeight, 10)) / parseInt(containerHeight, 10)) * o.duration;
}
} else {
// Save the width of the each element so we can use it in animation
elWidth = $this.find('.js-marquee:first').width() + o.gap;
// container width
containerWidth = $this.width();
// adjust the animation duration according to the text length
if (o.startVisible && !o.duplicated) {
// Compute the complete animation duration and save it for later reference
// formula is to: (Width of the text node + width of the main container / Width of the main container) * duration;
o._completeDuration = ((parseInt(elWidth, 10) + parseInt(containerWidth, 10)) / parseInt(containerWidth, 10)) * o.duration;
// (Width of the text node / width of the main container) * duration
o.duration = (parseInt(elWidth, 10) / parseInt(containerWidth, 10)) * o.duration;
} else {
// formula is to: (Width of the text node + width of the main container / Width of the main container) * duration;
o.duration = ((parseInt(elWidth, 10) + parseInt(containerWidth, 10)) / parseInt(containerWidth, 10)) * o.duration;
}
}
// if duplicated then reduce the 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 = '';
// Check css3 support
if (elm.style.animation !== undefined) {
keyframeString = '@keyframes ' + animationName + ' ';
css3AnimationIsSupported = true;
}
if (css3AnimationIsSupported === false) {
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 = true;
break;
}
}
}
if (css3AnimationIsSupported) {
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's ' + o.delayBeforeStart / 1000 + 's infinite ' + o.css3easing;
$this.data('css3AnimationIsSupported', true);
}
}
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 duplicated option is set to true than position the wrapper
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 the text starts out visible we can skip the two initial loops if (!o.startVisible) { loopCount = 1; } } else if (o.startVisible) { // We only have two different loops if marquee is duplicated and starts visible loopCount = 2; } else { if (verticalDir) { _rePositionVertically(); } else { _rePositionHorizontally(); } } // Animate recursive method var animate = function() { if (o.duplicated) { // When duplicated, the first loop will be scroll longer so double the duration 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;
}
// Adjust the css3 animation as well
if (animationCss3Str) {
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's ' + o.delayBeforeStart / 1000 + 's ' + o.css3easing;
}
loopCount++;
}
// On 2nd loop things back to normal, normal duration for the rest of animations
else if (loopCount === 2) {
o.duration = o._originalDuration;
// Adjust the css3 animation as well
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) {
// Adjust the starting point of animation only when first loops finishes
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) {
// This loop moves the marquee out of the container
if (loopCount === 2) {
// Adjust the css3 animation as well
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) {
// Set the duration for the animation that will run forever
o.duration = o._completeDuration;
// Adjust the css3 animation as well
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) {
// Adjust the starting point of animation only when first loops finishes
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) {
// This loop moves the marquee out of the container
if (loopCount === 2) {
// Adjust the css3 animation as well
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) {
// Set the duration for the animation that will run forever
o.duration = o._completeDuration;
// Adjust the css3 animation as well
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') + ')'
};
}
}
// fire event
$this.trigger('beforeStarting');
// If css3 support is available than do it with css3, otherwise use jQuery as fallback
if (css3AnimationIsSupported) {
// Add css3 animation to the element
$marqueeWrapper.css(animationString, animationCss3Str);
var keyframeCss = keyframeString + ' { 100% ' + _objToString(animationCss) + '}',
$styles = $marqueeWrapper.find('style');
// Now add the keyframe animation to the marquee element
if ($styles.length !== 0) {
// Bug fixed for jQuery 1.3.x - Instead of using .last(), use following
$styles.filter(":last").html(keyframeCss);
} else {
$('head').append('<style>' + keyframeCss + '</style>');
}
// Animation iteration event
_prefixedEvent($marqueeWrapper[0], "AnimationIteration", function() {
$this.trigger('finished');
});
// Animation stopped
_prefixedEvent($marqueeWrapper[0], "AnimationEnd", function() {
animate();
$this.trigger('finished');
});
} else {
// Start animating
$marqueeWrapper.animate(animationCss, o.duration, o.easing, function() {
// fire event
$this.trigger('finished');
// animate again
if (o.pauseOnCycle) {
_startAnimationWithDelay();
} else {
animate();
}
});
}
// save the status
$this.data('runningStatus', 'resumed');
};
// bind pause and resume events
$this.on('pause', methods.pause);
$this.on('resume', methods.resume);
if (o.pauseOnHover) {
$this.on('mouseenter', methods.pause);
$this.on('mouseleave', methods.resume);
}
// If css3 animation is supported than call animate method at once
if (css3AnimationIsSupported && o.allowCss3Support) {
animate();
} else {
// Starts the recursive method
_startAnimationWithDelay();
}
});
}; // End of Plugin
// Public: plugin defaults options
$.fn.marquee.defaults = {
// If you wish to always animate using jQuery
allowCss3Support: true,
// works when allowCss3Support is set to true - for full list see http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
css3easing: 'linear',
// requires jQuery easing plugin. Default is 'linear'
easing: 'linear',
// pause time before the next animation turn in milliseconds
delayBeforeStart: 1000,
// 'left', 'right', 'up' or 'down'
direction: 'left',
// true or false - should the marquee be duplicated to show an effect of continues flow
duplicated: false,
// duration in milliseconds of the marquee in milliseconds
duration: 5000,
// Speed allows you to set a relatively constant marquee speed regardless of the width of the containing element. Speed is measured in pixels per second.
speed: 0,
// gap in pixels between the tickers
gap: 20,
// on cycle pause the marquee
pauseOnCycle: false,
// on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
pauseOnHover: false,
// the marquee is visible initially positioned next to the border towards it will be moving
startVisible: false
};
})(jQuery);
jquery.marquee.min.js
/**
* jQuery.marquee - scrolling text like old marquee element
* @author Aamir Afridi - aamirafridi(at)gmail(dot)com / http://aamirafridi.com/jquery/jquery-marquee-plugin
*/
(function(f){
f.fn.marquee=function(x){
return this.each(function(){
var a=f.extend({
},f.fn.marquee.defaults,x),b=f(this),c,h,t,u,k,e=3,y="animation-play-state",n=!1,E=function(a,b,c){
for(var e=["webkit","moz","MS","o",""],d=0;d<e.length;d++)e[d]||(b=b.toLowerCase()),a.addEventListener(e[d]+b,c,!1)},F=function(a){
var b=[],c;for(c in a)a.hasOwnProperty(c)&&b.push(c+":"+a[c]);b.push();return"{"+b.join(",")+"}"},p={
pause:function(){
n&&a.allowCss3Support?c.css(y,"paused"):f.fn.pause&&c.pause();b.data("runningStatus",
"paused");b.trigger("paused")},resume:function(){
n&&a.allowCss3Support?c.css(y,"running"):f.fn.resume&&c.resume();b.data("runningStatus","resumed");b.trigger("resumed")},toggle:function(){
p["resumed"==b.data("runningStatus")?"pause":"resume"]()},destroy:function(){
clearTimeout(b.timer);b.find("*").andSelf().unbind();b.html(b.find(".js-marquee:first").html())}};if("string"===typeof x)f.isFunction(p[x])&&(c||(c=b.find(".js-marquee-wrapper")),!0===b.data("css3AnimationIsSupported")&&(n=!0),p[x]());else{
var v;
f.each(a,function(c,d){
v=b.attr("data-"+c);if("undefined"!==typeof v){
switch(v){
case "true":v=!0;break;case "false":v=!1}a[c]=v}});a.speed&&(a.duration=a.speed*parseInt(b.width(),10));u="up"==a.direction||"down"==a.direction;a.gap=a.duplicated?parseInt(a.gap):0;b.wrapInner('<div class="js-marquee"></div>');var l=b.find(".js-marquee").css({
"margin-right":a.gap,"float":"left"});a.duplicated&&l.clone(!0).appendTo(b);b.wrapInner('<div style="width:100000px" class="js-marquee-wrapper"></div>');c=b.find(".js-marquee-wrapper");
if(u){
var m=b.height();c.removeAttr("style");b.height(m);b.find(".js-marquee").css({
"float":"none","margin-bottom":a.gap,"margin-right":0});a.duplicated&&b.find(".js-marquee:last").css({
"margin-bottom":0});var q=b.find(".js-marquee:first").height()+a.gap;a.startVisible&&!a.duplicated?(a._completeDuration=(parseInt(q,10)+parseInt(m,10))/parseInt(m,10)*a.duration,a.duration*=parseInt(q,10)/parseInt(m,10)):a.duration*=(parseInt(q,10)+parseInt(m,10))/parseInt(m,10)}else k=b.find(".js-marquee:first").width()+
a.gap,h=b.width(),a.startVisible&&!a.duplicated?(a._completeDuration=(parseInt(k,10)+parseInt(h,10))/parseInt(h,10)*a.duration,a.duration*=parseInt(k,10)/parseInt(h,10)):a.duration*=(parseInt(k,10)+parseInt(h,10))/parseInt(h,10);a.duplicated&&(a.duration/=2);if(a.allowCss3Support){
var l=document.body||document.createElement("div"),g="marqueeAnimation-"+Math.floor(1E7*Math.random()),A=["Webkit","Moz","O","ms","Khtml"],B="animation",d="",r="";l.style.animation&&(r="@keyframes "+g+" ",n=!0);if(!1===
n)for(var z=0;z<A.length;z++)if(void 0!==l.style[A[z]+"AnimationName"]){
l="-"+A[z].toLowerCase()+"-";B=l+B;y=l+y;r="@"+l+"keyframes "+g+" ";n=!0;break}n&&(d=g+" "+a.duration/1E3+"s "+a.delayBeforeStart/1E3+"s infinite "+a.css3easing,b.data("css3AnimationIsSupported",!0))}var C=function(){
c.css("margin-top","up"==a.direction?m+"px":"-"+q+"px")},D=function(){
c.css("margin-left","left"==a.direction?h+"px":"-"+k+"px")};a.duplicated?(u?a.startVisible?c.css("margin-top",0):c.css("margin-top","up"==a.direction?
m+"px":"-"+(2*q-a.gap)+"px"):a.startVisible?c.css("margin-left",0):c.css("margin-left","left"==a.direction?h+"px":"-"+(2*k-a.gap)+"px"),a.startVisible||(e=1)):a.startVisible?e=2:u?C():D();var w=function(){
a.duplicated&&(1===e?(a._originalDuration=a.duration,a.duration=u?"up"==a.direction?a.duration+m/(q/a.duration):2*a.duration:"left"==a.direction?a.duration+h/(k/a.duration):2*a.duration,d&&(d=g+" "+a.duration/1E3+"s "+a.delayBeforeStart/1E3+"s "+a.css3easing),e++):2===e&&(a.duration=a._originalDuration,
d&&(g+="0",r=f.trim(r)+"0 ",d=g+" "+a.duration/1E3+"s 0s infinite "+a.css3easing),e++));u?a.duplicated?(2<e&&c.css("margin-top","up"==a.direction?0:"-"+q+"px"),t={
"margin-top":"up"==a.direction?"-"+q+"px":0}):a.startVisible?2===e?(d&&(d=g+" "+a.duration/1E3+"s "+a.delayBeforeStart/1E3+"s "+a.css3easing),t={
"margin-top":"up"==a.direction?"-"+q+"px":m+"px"},e++):3===e&&(a.duration=a._completeDuration,d&&(g+="0",r=f.trim(r)+"0 ",d=g+" "+a.duration/1E3+"s 0s infinite "+a.css3easing),C()):(C(),t={
"margin-top":"up"==
a.direction?"-"+c.height()+"px":m+"px"}):a.duplicated?(2<e&&c.css("margin-left","left"==a.direction?0:"-"+k+"px"),t={
"margin-left":"left"==a.direction?"-"+k+"px":0}):a.startVisible?2===e?(d&&(d=g+" "+a.duration/1E3+"s "+a.delayBeforeStart/1E3+"s "+a.css3easing),t={
"margin-left":"left"==a.direction?"-"+k+"px":h+"px"},e++):3===e&&(a.duration=a._completeDuration,d&&(g+="0",r=f.trim(r)+"0 ",d=g+" "+a.duration/1E3+"s 0s infinite "+a.css3easing),D()):(D(),t={
"margin-left":"left"==a.direction?"-"+k+"px":
h+"px"});b.trigger("beforeStarting");if(n){
c.css(B,d);var l=r+" { 100% "+F(t)+"}",p=c.find("style");0!==p.length?p.filter(":last").html(l):c.append("<style>"+l+"</style>");E(c[0],"AnimationIteration",function(){
b.trigger("finished")});E(c[0],"AnimationEnd",function(){
w();b.trigger("finished")})}else c.animate(t,a.duration,a.easing,function(){
b.trigger("finished");a.pauseOnCycle?b.timer=setTimeout(w,a.delayBeforeStart):w()});b.data("runningStatus","resumed")};b.bind("pause",p.pause);b.bind("resume",
p.resume);a.pauseOnHover&&b.bind("mouseenter mouseleave",p.toggle);n&&a.allowCss3Support?w():b.timer=setTimeout(w,a.delayBeforeStart)}})};f.fn.marquee.defaults={
allowCss3Support:!0,css3easing:"linear",easing:"linear",delayBeforeStart:1E3,direction:"left",duplicated:!1,duration:5E3,gap:20,pauseOnCycle:!1,pauseOnHover:!1,startVisible:!1}})(jQuery);
5、文字水平滚动-向左（使用marquee标签）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.gundong {
overflow: hidden;
height: 40px;
width: auto;
}
.gundong li {
float: left;
width: auto;
overflow: hidden;
margin-right: 30px;
font-size: 14px;
line-height: 40px;
height: 40px;
}
</style>
<body>
<marquee
scrollamount="3"
scrolldelay="4"
direction="left"
width="700px"
height="40"
onmouseover="this.stop()"
onmouseout="this.start()"
behavior="scroll">
<ul class="gundong">
<li>为天地立心</li>
<li>为生民立命</li>
<li>为往圣继绝学</li>
<li>为万世开太平</li>
</ul>
</marquee>
</body>
</html>
今天的文章文字滚动效果代码_下列不具备续效功能的一组代码是[通俗易懂]分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/70673.html
