关于前端JS走马灯(marquee)总结

最新推荐文章于 2024-05-08 13:15:46 发布
最新推荐文章于 2024-05-08 13:15:46 发布
阅读量819 收藏
点赞数
文章标签： 前端 javascript ViewUI
原文链接：http://www.cnblogs.com/feixiablog/p/10303928.html
版权

方案一：

<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
});

 

转载于:https://www.cnblogs.com/feixiablog/p/10303928.html

aomiano55778
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery插件Marquee.js实现无缝滚动效果
11-22
Marquee.js插件提供了许多属性选项，您可以配置定制外观和效果。 { yScroll: "top" // 初始滚动方向 (还可以是"top" 或 "bottom") showSpeed: 850 // 初始下拉速度 scrollSpeed: 12 // 滚动速度 , pauseSpeed: 5000 // 滚动完到下一条的间隔时间 pauseOnHover: true // 鼠标滑向文字时是否停止滚动 loop: -1 // 设置循环滚动次数 （-1为无限循环） fxEasingShow: "swing" // 缓冲效果 fxEasingScroll: "linear
html图片特效插件,20款jQuery & CSS文字特效插件（有图有真相）
weixin_33872754的博客
06-04 361
Jumble Text Effect Plugins这是一款非常好用的插件，可以帮助你混合文本颜色，并使文字变成动画。这种效果确实很酷，可以为设计添加不少生气。Vticker：jQuery滚动组件Vticker是一款jQuery滚动组件，可实现页面动态数据的滚动效果。它在展示最新警报或高亮一些特定内容时，都很完美。JQuery TE：轻量、小巧的文本编辑器JQuery TE是一款轻量、小巧的文本编...
JQuery实现文字无缝滚动效果(Marquee插件)
feifei20081014的专栏
08-15 1998
推荐一个JQuery的无缝文字滚动效果，同时也可以滚动图片，也叫做跑马灯效果。 此jquery插件，依托jquery库，能实现各种滚动效果，且让HTML代码符合W3C标准。 官方演示，如下：  Demo 使用方法如下： 1、加载javascript。  type="text/javascript" src="js/jquery.js">   type="text/jav
基于Marquee.js插件实现的跑马灯效果示例
10-20
主要介绍了基于Marquee.js插件实现的跑马灯效果,结合实例形式给出了Marquee.js插件的定义及具体使用方法,需要的朋友可以参考下
JS实现marquee滚动效果
thewebcode
04-02 448
前言 marquee标签是微软推出的一个增强html标签动画功能的标签，也是W3C不被推荐使用的标签，因为marquee标签存在两个缺点。 marquee标签的缺点 1、浏览器间存在兼容性问题（IE8下已经放弃对marquee的支持了，MARQUEE是微软自己创造出来的，现在火狐都支持了，它自己不干了）。 2、marquee滚动不是无缝连接循环滚动。 因此，推荐使用js代替mar...
js实现上下滚动跑马灯效果
05-10
实现跑马灯上下滚动效果，marquee标签被摒弃后不使用js实现的跑马灯效果保险些
js实现marquee标签
03-16
使用js实现了ie的marquee标签滚动功能， 　　使之能兼容FF,ie 并修正了纯中文横向滚动时的bug..
原生JS实现marquee 滚动字幕效果，完美解决频闪问题
qq_34797972的博客
01-21 6525
marquee标签在HTML5 中已经不再受支持 但是我们很多时候会用到滚动字幕的样式，所以就采用了实时动态改变元素位置的方式来实现此功能，在实现的时候用过HTML DOM setInterval() 方法，但是会出现频闪的现象，初步估计是因为其他js的时间对其产生影响，后来改用了window.requestAnimationFrame()方法完美解决问题。 关于window.reques...
javascript js仿marquee标签的走马灯效果.zip
01-08
js仿marquee标签的走马灯效果
android中设置TextView/Button 走马灯(Marquee)效果示例
01-20
定义走马灯（Marquee），主要在Project/res/layout/main.xml即可 代码如下: <SPAN xss=removed><TextView android:layout_width=”40px” android:layout_height=”wrap_content” android:text=”Test marquee ...
vue 实现走马灯效果
12-30
在写一个H5页面时遇到一个需求，头部公告需要滚动变换，需要实现一个走马灯效果 Part.2 实现 我的做法：利用 定时器 + CSS3 变换公告数组的顺序 从而实现走马灯效果 Part.3 代码 HTML <div class=...
重构ProgressBar修改走马灯前景色和背景色 支持 ProgressBarStyle.Marquee 类型改色
04-28
当进行开发的时候，不知道大家有没有注意到，不论是ToolStripProgressBar还是普通的ProgressBar，设置forecolor和backcolor其实是无效的。程序在运行的时候，仍然显示的是绿色的进度条和灰色的背景色。...
JQuery Marquee插件(无缝滚动效果)- marquee.js
热门推荐
零度的博客专栏
04-25 2万+
marquee测试 $(function(){ $("#marquee").marquee({ yScroll: "bottom", showSpeed: 850, // 初始下拉速度 , scrollSpeed: 12, // 滚动速度 ,
js html纵向滚动跑马灯,JS实现横向跑马灯效果代码
weixin_42510222的博客
06-04 835
首先我们需要一个html代码的框架如下：我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容应该是动态的。于是应该发送ajax来进行内容的获取拼接。$.ajax({type:"post",dataType:"json",url:"${contextPath}/indexPage/getSyNoticeInfo",success:function(result){var totalStr...
小程序文字跑马灯组件
ljc的博客
01-28 447
小程序数组数据自定义跑马灯组件marquee【跑马灯组件定义】marquee.wxmlmarquee.wxssmarquee.jsmarquee.json组件的使用页面json引入页面数据定义页面中使用效果 marquee【跑马灯组件定义】 marquee.wxml <scroll-view class="container"> <view class="scrolltxt"> <view class="marquee_box" wx:if="{{isSrcollb
android实现跑马灯效果(最小集代码)
小肥猫吃鱼的博客
05-14 714
marquee： 滚动RepeatLimit：重复限制ellipsize：椭圆大小
原生JS实现跑马灯marquee
aring1998的博客
06-01 709
一、实现效果
vue3中的reactive和ref
最新发布
weixin_43784341的博客
05-08 342
在Vue 3中，reactive和ref是两个常用的响应式API，用于创建响应式的数据。它们的主要区别在于reactive用于创建对象或数组的响应式引用，而ref用于创建单个值的响应式引用。下面我将分别介绍它们的详细用法，并提供代码示例。
50个前端实战项目之04：隐藏的搜索小组件
前端开发博客
05-03 1058
大家好，我是宝哥。今天讲50个前端实战项目之04：隐藏的搜索小组件。源码下载地址https://github.com/bradtraversy/50projects50days/tree/master/hidden-search前端实战项目系列正在更新：04/5001：可展开卡片02：进度条03：旋转导航动画04：隐藏的搜索小组件项目介绍本项目演示了一个简洁实用的隐藏式搜索小部件。点击搜索按钮后，...
走马灯代码
05-29
<div class="marquee">这是一个走马灯效果，可以在这里添加需要滚动的内容。 ``` 这个示例使用了 CSS3 的动画和 `overflow: hidden` 属性来实现走马灯效果。其中，`.container` 定义了容器的样式，设置了宽度...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值