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判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
javascript将url解析为json格式的两种方法
Aug 18 Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
JsChart组件使用详解
Mar 04 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
如何手写一个简易的 Vuex
Oct 10 Javascript
Vue实现简单购物车功能
Dec 13 Vue.js
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 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
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
php支付宝接口用法分析
2015/01/04 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
python @property的用法及含义全面解析
2018/02/01 Python
Python和Go语言的区别总结
2019/02/20 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
Python操作Jira库常用方法解析
2020/04/10 Python
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
教师队伍管理制度
2014/01/14 职场文书
法学个人求职信范文
2014/01/27 职场文书
企业文化建设实施方案
2014/03/22 职场文书
食品流通安全承诺书
2014/05/22 职场文书
应用心理学专业求职信
2014/08/04 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL