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


Posted in Javascript onFebruary 02, 2015

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

一、前言

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

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

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

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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
vue之浏览器存储方法封装实例
Mar 15 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
Mar 22 Javascript
原生JS实现记忆翻牌游戏
Jul 31 Javascript
vue中的循环对象属性和属性值用法
Sep 04 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 #Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 #Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 #Javascript
JavaScript分秒倒计时器实现方法
Feb 02 #Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 #Javascript
同一个网页中实现多个JavaScript特效的方法
Feb 02 #Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 #Javascript
You might like
PHP的宝库目录--PEAR
2006/10/09 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
javascript innerHTML使用分析
2010/12/03 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
python解析xml文件实例分析
2015/05/27 Python
在Python的Django框架中创建语言文件
2015/07/27 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
高二英语教学反思
2014/01/19 职场文书
教师求职自荐书
2014/06/14 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
工程部部长岗位职责
2015/02/12 职场文书
2015年班级工作总结范文
2015/04/03 职场文书
对讲机知识
2022/04/07 无线电