• 图片等距离滚动切换 老板 导演 演员 和舞台的故事


    在工作中我们经常会用到内容滚动切换的效果,有人称之为幻灯片 也不知道是不是标准的称呼了 ,总之这类东西很多很多 几乎每天都在出现新的形式.

     今天就遇到一个这样的问题,要求每个内容切换的时候,都以等距离滚动的形式出现,也就是只滚动一屏宽度就呈现需要的内容。看似很简单也很符合人们的认知习惯,但是其中却暗藏玄机。

    我们先来看两个例子:

    常规滚动切换 点击查看 DEMO     等距离滚动切换 点击查看DEMO 

        大家可以看到,常规的滚动切换 如果从1 一下切换到 10 则要滚动9个单位长度。
    而 等距离的滚动切换 无论从何处切换到何处 均只需要滚动一个单位长度。
    其实原理就是 只让需要的元素出现并参与滚动,不需要的就一边呆着凉快。
     在写这个效果的时候,突然觉得用导演 、演员 、舞台 来形容它们还挺贴切的。于是ID 都按照这些取的。

    程序的原理如下:
    有一个老板(动画区域) <div class="slider" id="boss"> ...</div>
    有一个舞台 只能容纳两个演员(滚动容器 只显示参与滚动的两个元素 )<ul id="stage" class="stage">...</ul>
    有一个导演(控制条)<ul class="items" id="director">...</ul>
    有一群演员(滚动内容)  <ul id="actor">...</ul>
    有一出戏   (滚动出现)function act(){ //演员演出 (动画函数)}

    老板搭建了舞台 请了导演和演员,
    导演来控制演员上场演出,需要谁演出谁才上场,不需要的就在台后歇着。
    演出也很简单 ,就是前面一个演员滚出舞台,紧跟着后面的则滚入舞台区域.
    由于台上只有两位演员(就当是二人转演出吧) 所以滚动只需要一个舞台的宽度就完成了切换。
    老板不在的时候(鼠标不在动画区域),演员们挨个演出(自动切换);
    老板来的时候(鼠标进入动画区域)停止演出等待导演的命令(鼠标点击控制区域控制);

    由于有的导演想法变的太快(鼠标快速划过控制区域),所以我们给导演一定时间考虑(300毫秒鼠标延迟时间),以防止太多演员快速涌上舞台导致拥塞(触发大量动作消耗系统资源)

    经过一段时间的排练,终于开演了,大家看看 : 点这里查看

    还有一台演出形式多样(随机缓动切换):点这里查看

    演出的海报  :

     

    最后是演出的剧本:

    $(document).ready(function(){                   
        
    var dela=false//触发延时
        var auto=false//自动切换延时    
        var movetime=700//演员上演过场时间 (图片滑动时间)
        var wait=3000//演员切换等待时间 (图片切换间隔)
        var width=950//舞台宽度(滚动元素宽度)
        var index=0// 哪个演员先上场 (起始序列)
        var boss=$("#boss"); //我们的老板 它包揽着舞台 导演 和演员(动画区域) 
        var director=$("#director"); //这是我们的导演组 
        var dirli=director.find("li"); 
        
    var dirlen=dirli.length-1//导演一共控制着多少演员
        var stage=$("#stage"); //舞台 (滚动的容器)
        var actor=$("#actor"); //演员 (内容列表)
        var repactor=""//准备登台的演员 (将出现在stage的最后一个li中)
        
        
    //标记当前
    function cur(ele){        
            ele
    =$(ele)? $(ele):ele;
            ele.addClass(
    "cur").siblings().removeClass("cur");    
            }

    dirli.each(
    function(i){
        dirli.eq(i).mouseover( 
            
    function(){ //导演让几号演员出场 几号就出场
                if(!$(this).hasClass("cur")){
                    dela
    =setTimeout(
                        
    function(){ //延时触发 防止触发过快
                        index=i; //导演出牌  (给出序列)
                        act(); //出场演出 (滚动出现)
                        },300);        
                }
            }).mouseout(
                
    function(){ //鼠标划出的时候则清除计时
                    if(dela){ 
                        clearTimeout(dela);
                        }
                    })
            })


    var actauto=function(){ //老板不在的时候(鼠标不在boss容器区域内)自动演出
        auto = setInterval(
            
    function(){ //循环出演
                index++;
                act();        
                
    if(index>=dirlen){index=-1;}     
                },wait);
        }
        
    var actpause=function(){ //老板来了(鼠标进入boss容器区域内)停止自动演出
        if(auto){
            clearInterval(auto);
            }
        }

    boss.hover(actpause,actauto);


    var act=function act(){ //演员演出 (动画函数)    
        repactor=actor.find("li").eq(index).html(); //准备需要演出的演员 (提取需要滚入的元素)
        cur(director.find("li").eq(index)); //标记谁在表演 (标记当前显示序列)
        stage.find("li:last").html(repactor); //演员登台准备 (将需要滚入的元素放入stage的最后一个容器中)
        //在舞台上演出 (滚动一屏宽度以显示)
        stage.animate( 
           {
    "left":-width+"px"},
           {queue:
    false,
           duration:movetime, 
           easing:
    "easeOutQuart",
           complete: 
    function(){    //演出完毕清场子(滚动完毕后的处理 stage复位)      
                   stage.find("li:first").appendTo(stage);           
                stage.css({
    "left":0+"px"});          
               }       
           });
        
    //end of actor
        }    
    //自动开始    
    actauto();
    //end of doment.ready                           
    })



     

  • 相关阅读:
    javascript高级知识分析——灵活的参数
    javascript高级知识分析——实例化
    javascript高级知识分析——上下文
    javascript高级知识分析——作为对象的函数
    javascript高级知识分析——函数访问
    javascript高级知识分析——定义函数
    new到底做了什么?
    JavaScript中的计时器原理
    解析Function.prototype.bind
    将类数组对象(array-like object)转化为数组对象(Array object)
  • 原文地址:https://www.cnblogs.com/trance/p/1495486.html
Copyright © 2020-2023  润新知