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 相关文章推荐
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
ASP.NET中AJAX 调用实例代码
May 03 Javascript
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
15条JavaScript最佳实践小结
Aug 09 Javascript
利用cookie记住背景颜色示例代码
Nov 04 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 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 heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
JS面向对象编程之对象使用分析
2010/08/19 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
Python网络编程 Python套接字编程
2017/09/13 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
python实现关键词提取的示例讲解
2018/04/28 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
师范应届毕业生自荐信
2013/11/18 职场文书
红旗渠导游词
2015/02/09 职场文书
防汛通知
2015/04/25 职场文书
员工表扬信怎么写
2015/05/05 职场文书
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL