仿ABCNEWS 的新闻切换效果

仿ABCNEWS 的新闻切换效果

2009-04-06 14:41

Demo 演示 DEMO 下载地址 点击查看DEMO   原效果见此网址 http://abcnews.go.com/ 本来是在蓝色理想论坛上看到的 有人说去面试 结果让他写这个效果 没有写出来 看了一下，觉得老外做的确实不错 很细致 用户体验很舒服，可见人家的严谨和细致，但是没有打开代码看，自己用jQuery 实现了一个 用了半天时间 中间还碰到了几个小麻烦 ，再次感叹人家原来的东西做的认真，考虑的细致，自己实现的时候才能体会到人家的心思。下面贴一下代码 做一下注释： Code   1 // JavaScript Document By Trance   2    3 $(document).ready(function(){   4             5 var t=false; //定时器   6 var time=5000; //切换间隔   7 var speed=500; //滚动时间   8 var fot=300; //淡出时间   9 var fin=300; //淡入时间  10 var i=0; //起始序列   这个变量将贯穿整个程序 来控制要显示的序列      11 var len=$("#list li").length; //滚动内容个数  12 var wh=330; //每个滚动内容的宽度  13   14 $("#info").css({"width": wh*len + "px"}); //初始化滚动容器的宽度   15 //标记当前 函数          16 function cur(ele,currentClass){  17 ele= $(ele)? $(ele):ele;  18 ele.addClass(currentClass).siblings().removeClass(currentClass);  19 }  20   21 $("#prev").click(function(){    //左翻按钮点下 调用roll() 函数 左翻  22    roll(-1);    23    })  24       25 $("#next").click(function(){    //右翻按钮点下 调用roll() 函数 右翻  26    roll(1);    27    })   28   29 $("#list li").mouseover(function(){ // 新闻列表项目划过  30    checkfade(); //检查 并 初始化淡入淡出   31    i=$("#list li").index($(this)[0]); //将 i 变为划过的序列  32    if(!$(this).hasClass("cur")){ //如果已经是当前的序列 就不再执行fade() 函数  33     fade(i);  34     }    35    cur(this,"cur");    36    })  37 //滚动函数 滚动效果的关键函数 有一个参数j 通过传入值 -1 或者 1 来控制容器的位置   38 function roll(j){   39    checkroll(); //检查 并 初始化滚动条件  40    if(!$("#info").is(":animated")){ // 预防多次处罚滚动引起的杂乱 必须在没有执行动画的时候执行以下内容  41     i+=j;      // i的值 因传入的 j 而改变  42     if(i!=-1 && i!=len){    //普通的情况    43      $("#info").animate({"left" : -(wh*i)+"px"},speed);   //控制#info 也就是容器的 x 坐标来实现动画翻转      44      }else if(i==-1){ // 当翻到第一个时 自动转到最后 以形成循环  45       i=len-1;  46       $("#info").css({"left" : -(wh*(i-1))+"px"}); //先将 容器位置定到 需要滚动一个宽度才能到达的地方  47       $("#info").animate({"left" : -(wh*i)+"px"},speed);      //再执行滚动 就形成了模拟正常的滚动  48       }else if(i==len){     //与上一个环节一样 不过这个是 滚到最后一个 向第一个翻转      49        i=0;  50        $("#info").css({"left" : -wh+"px"});  51        $("#info").animate({"left" : 0+"px"},speed);        52        }   53     cur($("#list li").eq(i) , "cur");    //别忘记标记相应列表项目  54     }     55    }  56     57 //Fade 函数 是渐入渐出的切换效果函数   58 function fade(k){   59    checkfade();  60    $("#info").find("div:visible").fadeOut(fot,function(){  61     $("#info").find("div").eq(k).fadeIn(fin)  62     })  63    }  64     65 //检查并且初始化滚动  66 function checkroll(){    67    if($("#info").find(".hide").html()){ //如果#info 里面 有隐藏的元素 则让它们都显示 并且初始化容器宽度  68      $("#info").find("div").removeClass("hide").show();  69     $("#info").css({"left" : -(wh*i)+"px"});  70     }  71    }  72 //检查并且初始化Fade   73 function checkfade(){  74    if(!$("#info").find(".hide").html()){ //如果没有隐藏的元素 则 隐藏除了当前序列的div 的其他所有元素 并初始化容器位置  75      $("#info").find("div").not($("#info").find("div").eq(i)).addClass("hide");  76     $("#info").css({"left" : 0+"px"});  77     }  78    }  79   80 //自动执行   81 function setInt(){ //周期函数  82    t=setInterval(function(){roll(1)},time);  83    }  84 function clearInt(){ //取消周期的函数  85    if(t) clearInterval(t);  86    }  87     88 $("#area").hover( //鼠标放进去的时候就取消掉自动播放  89    function(){ clearInt() },  90    function(){ setInt() }  91    )   92   93 //响应键盘 的上下左右键  94 $(document).keydown(function(event){    95    event = event || window.event;  96    if(event.keyCode==38 || event.keyCode==37){   97     clearInt();  98     roll(-1);  99     setInt(); 100     }; 101    if(event.keyCode==40 || event.keyCode==39){    102     clearInt(); 103     roll(1); 104     setInt(); 105     };  106    }) 107  108 //开始自动 页面加载完毕开始自动 109 setInt();  110  111    最后 其实这个小程序 最重要的是对 i 也就是显示序列的控制 为什么划过列表用渐入渐出的方式切换 而不是统一的滚动呢 这是为了避免 滚动距离过长 引起的速度太快，消耗系统资源 防止程序停止响应 任何一种切换 不管是用什么方式触发 都要考虑当前 i 的值 的变化 对于两种切换方式的变换处理 和对交互过程的控制 是这个小程序的重点所在。