【jQuery】一个动画的例子

概述

jQuery最精彩的地方无异于它的动画了，这个例子是一个视频网站中的常用例子，类似于幻灯片方式展示多个视频，如下图所示。

网页的基础代码为：

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</body>
</html>

分析

主要技术难点就在于控制动画。将next和prev按钮绑定上动画，动画通过语句：

$("div.v_content_list").animate({left:'-='+v_width},"slow");

来控制（向右），以及

$("div.v_content_list").animate({left:'+='+v_width},"slow");

来控制（向左），同时要考虑移动到最后一屏时要返回第一页或者第一页向左移动要直接到达最后一页。同时还要克服动画队列的问题（鼠标不再点击，动画却依然在播放，这时之前动画的累计效果），解决办法是每次触发动画前都要检测动画是否在运行。

主要jQuery代码如下：

$(document).ready(function(){
    var page=1;
    var i=4;
    $("span.next").click(function(){
    //alert('test');
        var v_width=$("div.v_content").width();
        var len=$("div.v_content_list").find("li").length;
        var page_count=Math.ceil(len/i);
        //alert(length);
        if(!$("div.v_content_list").is(":animated")){
        if(page==page_count){
            $("div.v_content_list").animate({left:'0px'},"slow");
            page=1;
        }
        else{
            page++;
            $("div.v_content_list").animate({left:'-='+v_width},"slow");
        }}
        $("div.highlight_tip").find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
        //$("div.v_content_list").fadeTo(600,0.2);
    });

$("span.prev").click(function(){
    //alert('test');
        var v_width=$("div.v_content").width();
        var len=$("div.v_content_list").find("li").length;
        var page_count=Math.ceil(len/i);
        //alert(length);
        if(!$("div.v_content_list").is(":animated")){
        if(page==1){
            $("div.v_content_list").animate({left:'-='+v_width*(page_count-1)},"slow");
            page=page_count;
        }
        else{
            page--;
            $("div.v_content_list").animate({left:'+='+v_width},"slow");
        }}
        $("div.highlight_tip").find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
        //$("div.v_content_list").fadeTo(600,0.2);
    });

}

)

演示文件

下载地址：http://files.cnblogs.com/xweiwei/jQuery%E5%9B%BE%E7%89%87%E6%BB%9A%E5%8A%A8%E6%95%88%E6%9E%9C.rar

本文用菊子曰发布

转载于:https://www.cnblogs.com/xweiwei/archive/2012/11/25/2788317.html

【jQuery】一个动画的例子相关推荐

关键帧动画html例子,Bounce.js 是一个漂亮的CSS3关键帧动画生成工具和类库_前端开发者...
Bounce. bouncejs.com提供的工具支持生成静态关键帧, 不需要使用额外JavaScript代码, 如果想在你的应用程序中动态生成这些代码, 可以使用Bounce. 安装可以通过Bowe ...
【JavaScript框架封装】实现一个类似于JQuery的动画框架的封装
// 动画框架 (function (xframe) {// 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)xframe.extend({});// 不需要参与链式访问的xfr ...
第一百七十二节，jQuery，动画效果
jQuery,动画效果学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性一．显示.隐藏 jQuery 中显示方法为:. ...
7个不容错过的jQuery图片动画及源码
jQuery处理图片的例子特别多,因为图片动画特效可以让网页更加生动,当然,随着CSS3的的加入,jQuery在处理图片方面更为优秀,出来的效果也更加迷人.本文要分享一些基于jQuery的图片动画效果 ...
html5图片动画源码,不容错过的jQuery图片动画及源码
本文作者html5tricks,转载请注明出处 jQuery处理图片的例子特别多,因为图片动画特效可以让网页更加生动,当然,随着CSS3的的加入,jQuery在处理图片方面更为优秀,出来的效果也更加迷 ...
转载：jQuery停止动画——stop()方法的使用
jQuery停止动画--stop()方法的使用转载地址很多时候需要停止匹配元素正在进行的动画,比如,当鼠标选入元素时显示菜单,鼠标离开时隐藏下拉菜单,如果鼠标移入移出过快的话就会导致动画效果与鼠标 ...
jQuery自定义动画方法animate()
animate()方法执行CSS属性集的自定义动画,该方法会将一个属性在指定或者默认的时间内从一个属性值变化到另一个属性值,由于属性值是逐渐变化的,所以就形成了所谓的动画效果. 用法: $(selec ...
js进阶 13-5 jquery队列动画如何实现
js进阶 13-5 jquery队列动画如何实现一.总结一句话总结:同一个jquery对象,直接写多个animate()就好. 1.什么是队列动画? 比如说先左再下,而不是左下一起走 2.怎么实现 ...
Lazy Line Painter – 很有趣的 jQuery 路径动画插件
Lazy Line Painter 是基于 Raphaël(一个用于在网页中绘制矢量图形的 Javascript 库)的 jQuery 路径动画插件,能够把线条图案转换为吸引眼球的路径动画模式. 您可 ...

【jQuery】一个动画的例子

【jQuery】一个动画的例子相关推荐

最新文章

热门文章