jq跑马灯效果

Posted by

 

这些年优化了公司网址的banner幻灯片广告,有顾客反馈广告切换时有个别卡,时快时慢,效果不是很好,得换个轮播效果。

近日集团成品有个无缝循环滚动的广告跑马灯要做,最开端想到的是<marquee>标签,但在PC端寻常,在安卓广告屏上却怎么都跑不动,后来用的css3的animation,结果也是PC端及别的部分公司手提式有线话机符合规律,但生龙活虎到安卓广告屏上就跑不动了;后来官员找了个jQuery插件,经测验,完美运转。

论及幻灯片插件,今后英特网有广大了,举例swipe等,swipe以后用的比超多,成效也正如强硬,可是他对此IE低版本宽容性远远不够好哟。所以呢,在PC上管理幻灯片效能的时候,笔者会遗弃它,而筛选Unslider,那正是本人前不久要享受的幻灯片插件。

 

swipe和Unslider,两个有利有弊,个人以为前面一个更切合生手,前者符合开垦者。至于swipe就不介绍了,能够去官方网址看,戳下:swipe官方网站

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动文字jquery插件</title>
    /**
    * author ormin
    * http://www.cnblogs.com/kangaoxiaoshi/p/5431870.html
    * http://www.cnblogs.com/yexiaochai/p/3759959.html
    * http://www.cnblogs.com/axl234/p/5780432.html
    */
    <script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
        (function($) {
            $.fn.extend({
                roll: function(options) {
                    var defaults = {
                        speed:1
                    };
                    var options = $.extend(defaults, options);
                    var speed=(document.all) ? options.speed : Math.max(1,options.speed-1);
                    if ($(this) == null) return ;
                    var $container = $(this);
                    var $content = $("#content");
                    var init_left = $container.width();
                    $content.css({left:parseInt(init_left) + "px"});
                    var This = this;
                    var time = setInterval(function(){This.move($container,$content,speed);},20); //setInterval会改变this指向,即使加了This=this,也要用匿名函数封装,这里调试了n久

                    $container.bind("mouseover",function()
                    {
                        clearInterval(time);
                    });
                    $container.bind("mouseout",function()
                    {
                        time = setInterval(function(){This.move($container,$content,speed);},20);
                    });

                    return this;
                },
                move:function($container,$content,speed){
                    var container_width = $container.width();
                    var content_width = $content.width();
                    if (parseInt($content.css("left")) + content_width > 0)
                    {
                        $content.css({left:parseInt($content.css("left")) - speed + "px"});
                    }
                    else
                    {
                        $content.css({left:parseInt(container_width) + "px"});
                    }
                }
            });
        })(jQuery);
        //插件的调用$("#yourId").roll({speed:#yourSpeed});
        $(document).ready(
                function(){
                    $("#container").roll({speed:8});
                }
        );
    </script>
    <style type="text/css">
        #container{
            background:#CCCCCC;
            position:relative;
            overflow:hidden;  /*这个东西折腾了很久才弄出来*/
            width:550px;
            height:80px;
            line-height:80px;
            margin:100px;
        }

        #content{
            position:absolute;
            left:0;
            top:0;
            white-space:nowrap;   /*重要,不然文字显示效果不好*/
        }
    </style>

</head>

<body>
<div id="container">
    <div id="content" style="color:red;font-size:80px;">This is a roll word test,created by Baidu FE.</div>
</div>
</body>
</html>

Unslider是叁个非常纯粹的jquery幻灯片插件,它未有剩余的特效,用的只是特轻松也丰硕日常的轮转特效,但它的帮助和益处在于文件非常小,CSS能够完全自定义,协助各今世浏览器,支持键盘操作。Unslider能够自动物检疫查评定图片的惊人,自动平滑的调治图片的可观来适应幻灯片,何况还是能键盘和鼠标拖动落成滚动作效果应,当然也支撑活动端滑屏左右轮转。大家能够去官方网站下载:Unslider官方网站

  jQuery部分(使用时先引用jQuery插件)

利用方法

(function($) {
    $.fn.extend({
        roll: function(options) {
            var defaults = {
                speed:1
            };
            var options = $.extend(defaults, options);
            var speed=(document.all) ? options.speed : Math.max(1,options.speed-1);
            if ($(this) == null) return ;
            var $container = $(this);
            var $content = $("#content");
            var init_left = $container.width();
            $content.css({left:parseInt(init_left) + "px"});
            var This = this;
            var time = setInterval(function(){This.move($container,$content,speed);},20); //setInterval会改变this指向,即使加了This=this,也要用匿名函数封装,这里调试了n久

            $container.bind("mouseover",function()
            {
                clearInterval(time);
            });
            $container.bind("mouseout",function()
            {
                time = setInterval(function(){This.move($container,$content,speed);},20);
            });

            return this;
        },
        move:function($container,$content,speed){
            var container_width = $container.width();
            var content_width = $content.width();
            if (parseInt($content.css("left")) + content_width > 0)
            {
                $content.css({left:parseInt($content.css("left")) - speed + "px"});
            }
            else
            {
                $content.css({left:parseInt(container_width) + "px"});
            }
        }
    });
})(jQuery);

引入jQuery和unslider

  

此处要证实下,jQuery库文件无法太低,小编试过了,jQuery1.7本子以下,就辅助的远远不够好了,所以大家要筛选稍稍高点的版本。

 

HTML代码:

MyslideAnotherslideMylastslide

JS调用代码:

jQuery.ready{$.unslider;

动用方法就是如此轻松。那个只是暗中同意的选项,借使大家想多点其余功用,则要安装它的相干部家室性了,如下:

$.unslider({speed:500,//动画的滚动速度delay:3000,//每个滑块的停留时间complete:function(){},//每个滑块动画完成时调用的方法keys:true,//是否支持键盘dots:true,//是否显示翻页圆点fluid:false//支持响应式设计;

运用起来实在很有利,可是她只相符PC端。

黄金时代经想搞成响应式,在运动端也得以用,unslider也提供了艺术,在页面中应用以下代码:

替换unslider.js。能够去下载下demo看看,戳下地址:DEMO

Swipe events有部分质量大家得先通晓下:

◆ swipeleft, swiperight, swipeup, swipedown –
在指尖滑动、鼠标拖动,键盘左右决定的时候,能够触发那个事件。

◆ e.pageX, e.pageY – 当前页面默许坐标

◆ e.startX, e.startY – 起头时候的坐标

◆ e.distX, e.distY – 事件触发进程中的坐标

◆ e.velocityX, e.velocityY – 时速,以“像素/毫秒”为单位

使用Swipe events

varslides=jQuery,i=0;slides.on('swipeleft',function.addClass.on('swiperight',function.addClass;

以此就是反正滑行的机能,但不想现身前后滑动,大家能够这么做:

jQuery.on('movestart',function{//Ifthemovestartisheadingoffinanupwardsordownwards//direction,preventitsothatthebrowserscrollsnormally.if((e.distX>e.distY&&e.distX-e.distY)){e.preventDefault;

Unslider扩展

Unslider的暗中同意功用,不包含上风流洒脱页/下黄金年代页按键。可是幸运的是,他们可利用Unslider的议程轻便的增多上。

PreviousslideNextslidevarunslider=$.unslider();$(&amp;#39;.unslider-arrow&amp;#39;).click{varfn=this.className.split[1];//Eitherdounslider.data.nextdependingontheclassNameunslider.data[fn];

应用jQuery的一应俱全的多少方式,您能够访问和手动覆盖任何方法。以下列表是您能够操作的办法

varslidey=$.unslider(),data=slidey.data;//开始Unsliderdata.start();//暂停Unsliderdata.stop();//滑块跳转,还有一个可选的方法参数data.move;data.move;//手动激活键盘功能data.keys();//跳转到下一滑块,最后一个时不显示data.next();//跳转到上一滑块,最前一个时不显示data.prev;

透过黄金年代番灾害后,新的轮播效果到底上线,客商也反应符合规律了,^_^

总结

归咎swipe和Unslider,小编个人感觉PC端的轮播代码,选拔Unslider要更加好些,宽容性高。借使是活动端的,二者都足以,然则自身提出先看看从前分享大器晚成篇小说:组件

  • 跨平台活动前端框架AUI
    2.0,里面介绍的移动端轮播插件,笔者认为比地方两个质量更加好。

好呢,关于几天前的话题就探讨到此地了,不必然非要选笔者介绍的这两种轮播代码,假诺你有更轻松,品质更加好的轮播代码,能够留言下。

相关文章

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注