动效之文字滚动5个代码
2024-05-22 18:59:12
``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.innerHTMLdemo.scrollTop = demo.scrollHeightfunction Marquee() {console.log(demo1.offsetTop, demo.scrollTop)if (demo1.offsetTop - demo.scrollTop >= 0)demo.scrollTop += demo2.offsetHeightelse {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 providedvar 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 methodsmethods = {pause: function() {if (css3AnimationIsSupported && o.allowCss3Support) {$marqueeWrapper.css(playState, 'paused');} else {// pause using pause pluginif ($.fn.pause) {$marqueeWrapper.pause();}}// save the status$this.data('runningStatus', 'paused');// fire event$this.trigger('paused');},resume: function() {// resume using css3if (css3AnimationIsSupported && o.allowCss3Support) {$marqueeWrapper.css(playState, 'running');} else {// resume using pause pluginif ($.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 timerclearTimeout($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 methodsif (typeof options === 'string') {if ($.isFunction(methods[options])) {// Following two IF statements to support public methodsif (!$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 priorityFor 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 attributeattr = $this.attr('data-' + key);if (typeof attr !== 'undefined') {// Now check if value is boolean or notswitch (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 downwardverticalDir = o.direction === 'up' || o.direction === 'down';// no gap if not duplicatedo.gap = o.duplicated ? parseInt(o.gap) : 0;// wrap inner content into a div$this.wrapInner('<div class="js-marquee"></div>');// Make copy of the elementvar $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 elementif (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 duplicatedif (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 lengthif (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) * durationo.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 animationelWidth = $this.find('.js-marquee:first').width() + o.gap;// container widthcontainerWidth = $this.width();// adjust the animation duration according to the text lengthif (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) * durationo.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 durationif (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 supportif (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 wrapperif (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 loopsif (!o.startVisible) {loopCount = 1;}} else if (o.startVisible) {// We only have two different loops if marquee is duplicated and starts visibleloopCount = 2;} else {if (verticalDir) {_rePositionVertically();} else {_rePositionHorizontally();}}// Animate recursive methodvar animate = function() {if (o.duplicated) {// When duplicated, the first loop will be scroll longer so double the durationif (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 wellif (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 animationselse if (loopCount === 2) {o.duration = o._originalDuration;// Adjust the css3 animation as wellif (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 finishesif (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 containerif (loopCount === 2) {// Adjust the css3 animation as wellif (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 forevero.duration = o._completeDuration;// Adjust the css3 animation as wellif (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 finishesif (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 containerif (loopCount === 2) {// Adjust the css3 animation as wellif (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 forevero.duration = o._completeDuration;// Adjust the css3 animation as wellif (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 fallbackif (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 elementif ($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 againif (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 onceif (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 jQueryallowCss3Support: true,// works when allowCss3Support is set to true - for full list see http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-functioncss3easing: 'linear',// requires jQuery easing plugin. Default is 'linear'easing: 'linear',// pause time before the next animation turn in millisecondsdelayBeforeStart: 1000,// 'left', 'right', 'up' or 'down'direction: 'left',// true or false - should the marquee be duplicated to show an effect of continues flowduplicated: false,// duration in milliseconds of the marquee in millisecondsduration: 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 tickersgap: 20,// on cycle pause the marqueepauseOnCycle: false,// on hover pause the marquee - using jQuery plugin https://github.com/tobia/PausepauseOnHover: false,// the marquee is visible initially positioned next to the border towards it will be movingstartVisible: 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>动效之文字滚动5个代码相关推荐
- 小程序如何做成html的滚动字幕,微信小程序实现文字滚动
本文实例为大家分享了微信小程序实现文字滚动的具体代码,供大家参考,具体内容如下 wxml: 显示完后再显示: {{text}} 出现白边后即显示: {{text}} {{text}} wxss: .e ...
- Android 视频旋转、缩放与回弹动效实现（二）
文章目录 Android 视频旋转.缩放与回弹动效实现(二) 功能需求 实现思路 1. 旋转识别 旋转识别:RotateGestureDetector 2. 旋转处理 旋转处理:VideoTouchR ...
- WPF-3D动效-文字球形环绕
原文:WPF-3D动效-文字球形环绕 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u013224722/article/details/81784 ...
- canvas 文字颜色_canvas 中普通动效与粒子动效的实现
(给前端大全加星标,提升前端技能) 作者:薄荷前端 https://github.com/BooheeFE/weekly/issues/26 canvas 用于在网页上绘制图像.动画,可以将其理解为画 ...
- FFmpeg动效实践与探索（文字方框的同步展开及收缩）
当你看到这样的动图时,你会想到这是用FFmpeg做出来的吗? FFmpeg,作为一款强大的视频编辑处理工具,在基础的视频处理上十分可靠,在音视频编解码上大放异彩,那么它在动态效果上的应用怎么样呢,笔者 ...
- 【HTML实现弹幕滚动效果和文字动态发光特效代码】
HTML实现弹幕滚动效果 我们经常会在看电影的时候,打开弹幕,以此来查看网友们对电影的实时评价.面对屏幕上一条一条滚动的弹幕,到底是如何实现的呢? 下面我们来介绍用HTML实现弹幕滚动的方法. 1 ...
- 文字滚动插件（css3动画）- 代码篇
文字滚动插件(css3动画)- 代码篇 效果图动画: templete代码如下: <div class="list"><div class="rowup ...
- php中如何滚动文字,HTML_网页HTML代码：滚动文字的制作，制作滚动文字
通过本章前面 - phpStudy...
制作滚动文字 通过本章前面的学习,读者已经能够很好地控制各种段落文字的显示方式,不过无论怎么设置,文字都是静态的.本节笔者讲述HTML代码中比较特殊的标签,它能使网页中的文字滚动,并且可以控制其滚动的 ...
- 50行代码实现3D模拟真实撒金币动效
我们将会用50行不到的代码来实现一个3D模拟撒金币动效.你只需要一点Egret基础就能够快速上手,如果你不了解Egret,这里有一篇3分钟创建hello world来带你快速入门. 实现效果 源码和在 ...
最新文章
- C语言 #ifndef 引起的redefinition of xxx 问题解决
- 树莓派64位系统_树莓派4b+Ubuntu server+Nextcloud搭建私人云盘（1）：准备系统
- SQLserver创建与主外键的看法
- python下载手机-QPython下载
- hdu 5692 Snacks(dfs序+线段树区间更新)
- Session 的钝化与活化
- Spring学习网址
- 囚犯生存概率引发的循环思考
- matlab中均线交易策略,【每日一策】Matlab量化交易策略之 均线选股策略
- 基于深度学习的信息抽取技术
- android oneshot自动播放bug,移动端常见bug汇总001
- 嵌入式linux工程师 考试,嵌入式Linux工程师常见笔试题.doc
- 2016年工作中遇到的问题1-10：select-for-update锁表
- 【Android图像处理】图像处理之-素描效果
- php 设置cors,php – 启用cors在.htaccess
- 【线段树】 SPOJ 2713 Can you answer these queries IV
- 【跟着我们学Golang】基础结构
- 荒芜的周六-PHP之面向对象（三）
- 图像去雾之何凯明暗通道先验去雾算法原理及c++代码实现
- 计算机网络可以划分几个阶段,计算机网络的发展可以划分为几个阶段.doc