jQuery循环动画与获取组件尺寸的方法

更新时间：2015年02月02日 11:57:33 作者：yongh701

这篇文章主要介绍了jQuery循环动画与获取组件尺寸的方法,实例分析了animate用法及组件的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jQuery循环动画与获取组件尺寸的方法。分享给大家供大家参考。具体分析如下：

一、前言

1、jQuery中的animate()方法允许您创建自定义的动画。

animate() 方法几乎可以操作所有 CSS 属性，不过当使用 animate() 时，必须使用Camel标记法书写所有的属性名，比如，必须使用paddingLeft而不是padding-left，使用marginRight而不是margin-right，等等。同时，色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，您需要从 jquery.com 下载 Color Animations 插件。

2、通过jQuery，很容易处理元素和浏览器窗口的尺寸。
jQuery提供如下属性获取元素和浏览器窗口的尺寸。

二、基本目标

如下图：

在网页中创建两个按钮，一个按钮能够使组件的尺寸在显示与隐藏状态中切换，一个按钮能够使循环动画在开始与停止状态中切换

单纯的JQ没有暂停与开始动画播放的功能，必须下载jQuery Pause插件完成。本例而仅仅通过JavaScript去控制循环动画，所以每次暂停仅能在其完成一次循环体才能够打断，并不能做到在随意位置暂停开始的功能。

三、制作过程

以下是网页所有代码，之后再一部分一部分地解释：

复制代码代码如下:

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

<html xmlns="http://www.w3.org/1999/xhtml">  

    <head>  

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

        <title>JQ动画</title>  

        <script type="text/javascript" src="js/jquery-1.11.1.js"></script>  

        <script>  

var interval;  

var i = 0;  

var j = 0;  

function divanimate() {  

    $(".d_class").animate( {left : "+=100px"}, 500);  

    $(".d_class").animate( {top : "+=100px" }, 500);  

    $(".d_class").animate( {left : "-=100px"}, 500);  

    $(".d_class").animate( {top : "-=100px" }, 500);  

}  

function cycle() {  

    divanimate();  

    interval = setInterval("divanimate()", 2000);  

}  

$(document).ready(function() {  

    $("#stop").click(function() {  

        i++;  

        if (i % 2 != 0)  

            cycle();  

        else  

            clearInterval(interval);  

    });  

    $("#show").click(function() {  

        j++;  

        if (j % 2 != 0) {  

            var txt = "";  

            txt += "<p align=\"center\">高: " + $("#d_id").height() + "px</br>";  

            txt += "宽: " + $("#d_id").width() + "px</p>";  

            $("#d_id").html(txt);  

        } else {  

            var txt = "";  

            $("#d_id").html(txt);  

        }  

    });  

})  

    </script>  

    </head>  

    <body>  

        <button id="show">  

            显示/隐藏方块尺寸  

        </button>  

        <button id="stop">  

            开始/停止动画的循环  

        </button>  

        <div id="d_id" class="d_class"  

            style="width: 100px; height: 100px; background-color: #000; position: absolute; top: 50px; color: #FFF; left:50px;"></div>  

    </body>  

</html>

1、<body>部分
没有什么特别的，就是定义两个按钮在与一个图层。值得注意的是，在图层的style参数值中必须加入position:absolute一项，否则此图层无法在网页中随意移动

background-color是图层的背景颜色。color是图层中的字体颜色。

需要定义id与class两个参数，因为JQ动画需要通过class来控制，而JQ获取组件尺寸则需要通过id来控制。

同时，摆放图层的位置需要注意，是用left与top来放置，而不是margin-left与margin-top去放置，因为JQ动画控制代码是用left与top去控制的。如果使用margin-left与margin-top去放置在动画开始的瞬间会有小幅度的失真。

2、<head>部分

也就是核心代码部分：

复制代码代码如下:

<head>  

    <!--网页编码，标题，使用JQ-->  

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

        <title>JQ动画</title>  

        <script type="text/javascript" src="js/jquery-1.11.1.js"></script>  

        <script>  

/*这相当于记录循环状态的指针，为下面清理clearInterval()所用*/          

var interval;  

/*i是用来记录点击“开始/停止动画的循环”按钮的次数，如果此按钮点击奇数次就开始循环，偶数次就终止循环*/  

var i = 0;  

/*j是用来记录点击“显示/隐藏方块尺寸”按钮的次数，如果此按钮点击奇数次就显示尺寸，偶数次就隐藏尺寸*/  

var j = 0;  

/*由于没有封装好的toggle()方法，我们需要这么做*/  

function divanimate() {  

    /*这里只能通过图层的class值来控制图层，获取class值的前面的符号是.，而不是#*/  

    <!--要求class为d_class的图层，先向右偏移100px，再向下偏移100px，之后向左偏移100px，最后向上偏移100px回到原位，每个动作500毫秒以内完成，也就是0.5秒-->  

    <!--这里注意的是left的意义是x轴的正方向，屏幕最左为0px，越往右数值越大，top是y轴的负方向，屏幕最上为0px，越往下数值越大-->  

    $(".d_class").animate( {left : "+=100px"}, 500);  

    $(".d_class").animate( {top : "+=100px" }, 500);  

    $(".d_class").animate( {left : "-=100px"}, 500);  

    $(".d_class").animate( {top : "-=100px" }, 500);  

}  

function cycle() {  

    /*此函数是首先执行divanimate()函数，之后，每2000毫秒，也就是每2秒执行divanimate()一次。这个间隔刚好是一次动画所完成时间，如果不打断此循环的话，刚好能够无间隔地无缝完美执行循环动画。*/  

    /*第一行必须存在，否则每次点击开始按钮，都要等2秒，才开始动画*/  

    divanimate();  

    interval = setInterval("divanimate()", 2000);  

}  

/*$(document).ready(function(){})意为一加载网页就加载的函数，所有按钮的动作类，必须放在其中*/  

$(document).ready(function() {  

    $("#stop").click(function() {  

        i++;  

        if (i % 2 != 0)  

            cycle();  

        else  

        /*终止循环与上面的开始循环是javascript的函数，都说了jquery仅仅是javascript的扩展。*/  

            clearInterval(interval);  

    });  

    $("#show").click(function() {  

        j++;  

        if (j % 2 != 0) {  

            var txt = "";  

            txt += "<p align=\"center\">高: " + $("#d_id").height() + "px</br>";  

            txt += "宽: " + $("#d_id").width() + "px</p>";  

            /*这个方法能够在相应的组件标签中输出文本*/  

            $("#d_id").html(txt);  

        } else {  

            var txt = "";  

            $("#d_id").html(txt);  

        }  

    });  

})  

</script>  

</head>

希望本文所述对大家的jQuery程序设计有所帮助。

您可能感兴趣的文章:

JQuery 选择器 xpath 语法应用
我们根据实例来解释JQuery选择器（selectors）中xpath几种常用的用法
2010-05-05
jQuery Ajax调用WCF服务详细教程
这篇文章主要介绍了jQuery Ajax调用WCF服务详细教程,本文讲解了从WFC编程到JQUERY调用的详细步骤,并总结了使用中遇到的问题和解决方法,需要的朋友可以参考下
2015-03-03
学习从实践开始之jQuery插件开发对话框插件开发
之所以写下这篇文章，是想将我的想法分享给大家；对于初学者，我希望他能从这篇文章中获取对他有用的东西，对于经验丰富的开发者，我希望他能指出我的不足，给我更多的意见和建议；目的就是共同进步
2012-04-04
基于Jquery的温度计动画效果
将代码一一拷贝到页面相应的位置，然后记得调用jquery框架，展示条件有限，所以效果跟设计图有出入，但实现原理是一样的，欢迎大家多多交流！
2010-06-06
基于jquery+thickbox仿校内登录注册框
近日，客户说他想要个类似于人人网（以前为校内）的登录框效果，于是上网搜了下，发现有一个仿得比较好的，于是就拿过来用了用。
2010-06-06
使用jQuery实现页面定时弹出广告效果
这篇文章主要介绍了使用jQuery实现页面定时弹出广告效果,需要的朋友可以参考下
2017-08-08
读jQuery之十事件模块概述
jQuery的事件模块是较复杂的，前面仅仅提到了对事件对象的包装。即统一了一些兼容性的问题。这篇会综述下jQuery的整个事件模块。
2011-06-06
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
这篇文章主要介绍了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能,涉及jQuery事件响应及窗口元素属性的相关操作技巧,需要的朋友可以参考下
2017-10-10
jQuery中的关系查找方法
这篇文章主要介绍了jQuery中的关系查找方法，关系查找方法分有children()子级、siblings()兄弟的一些方式，下文都有介绍到，文章内容介绍详细，需要的小伙伴可以参考一下，希望对你的学习有所帮助
2022-03-03
jQuery性能优化28条建议你值得借鉴
一直在寻找有关jQuery性能优化方面的小窍门，能让我那臃肿的动态网页应用变得轻便些，我决定将最好最常用的一些优化性能的建议列出来,感兴趣的你可不要错过了哈，或许本文所提供的建议对你有所帮助
2013-02-02

jQuery循环动画与获取组件尺寸的方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具