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

2024-10-25 04:43:02

本文实例讲述了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>
    
        <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值的前面的符号是.，而不是#*/
    
    
    $(".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进行组件开发完整实例

本文实例讲述了jQuery进行组件开发的方法,分享给大家供大家参考,具体如下: 前面的<JavaScript组件开发>分析了JavaScript进行组件开发的技巧,这里分析使用jQuery进行组件开发的方法. 使用jQuery进行组件开发和使用纯JavaScript脚本(不使用框架)原理基本类似,特别是公共方法的组织是一样的. 不同点是,jQuery使用了插件机制,通过$()直接进行操作对象(DOM元素)绑定,然后对DOM元素或HTML代码进行绑定事件等的操作. 另一个不同点则是把jQuery
基于jquery的图片轮播 tab切换组件

目前只添加了scroll和none的效果,scroll即滑动的效果,可以支持x和y方向的滑动:none就是没有任何效果,只是显示和隐藏,后续需要添加其他效果再做扩展,写的有点水,呵呵,在此留笔,防止丢失. Demo Address:http://demo.jb51.net/js/2012/sinaapp/ 复制代码代码如下: /** * 巨无霸轮播 */ $.fn.loopSlider = function(option) { var setting = { // 默认显示的顺序 initIn
jQuery之选择组件的深入解析

1:选择(Selectable)组件可以让用户页面上的一些元素变成可选择的,用户可以通过单击元素或者拖动的方式来选择它们,也可以按住Ctrl键来选择不连续的元素$('.selector').selectable(options);但是在jQuery UI库中的主题包中并未提供ui-selecting和ui-selected类的样式,因此在使用选择组件时,还需要自己来创建这些样式复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
jQuery之自动完成组件的深入解析

简单实例复制代码代码如下: <!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=&
JavaScript组件开发完整示例

本文实例讲述了JavaScript组件开发的技巧.分享给大家供大家参考,具体如下: 使用JavaScript,按照面向对象的思想来构建组件. 现以构建一个TAB组件为例. 从功能上讲,组件包括可视部分和逻辑控制部分:从代码结构上讲,组件包括代码部分和资源部分(样式.图片等). 组件的特点:高内聚,低耦合(不与其他代码逻辑交叉,可以继承,包含):封装性(隐藏私有方法和变量):可重用性(可反复多次使用,用来组装更复杂的应用). <html> <head> <meta http-e
jQuery表格排序组件-tablesorter使用示例

一.引入文件复制代码代码如下: <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.js"></script>  <
如何使用jquery easyui创建标签组件

jQuery EasyUI v1.4.4 下载网址:http://www.jb51.net/codes/70218.html 本教程将展示如何使用easyui创建一个标签组件.标签可以动态地添加或删除多个面板,你可以使用标签在同一个页面上显示不同的实体. 标签一次只能显示一个面板,每个面板都有标题.图表和关闭按钮.当标签被选中之后,会显示相应面板的内容. 使用HTML标记创建标签,其中包括一个DIV容器和一些DIV面板. < div class="easyui-tabs" sty
jQuery之排序组件的深入解析

1:排序(Sortable)组件可以将页面上的一组元素变成可排序的,可用于定义一个可排序的元素列表,然后,通过拖动鼠标可以调整元素在列表中的位置$('.selector').sortable(options); 简单实例: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti
基于jQuery实现的美观星级评论打分组件代码

本文实例讲述了基于jQuery实现的美观星级评论打分组件代码.分享给大家供大家参考,具体如下: 这款jquery星级评论打分组件,是通用打分组件,callBack打分后执行的回调,this.Index:获取当前选中值. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-rate-dfzj-codes/ 具体代码如下: <!DOCTYPE HTML> <html> <head> <meta charset
使用jquery组件qrcode生成二维码及应用指南

有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. qrcode其实是通过计算,然后使用jquery实现图形渲染和画图.支持canvas和table两种方式生成我们所需的二维码. 具体用法 qrcode是jquery组件,需要至少两个js, 就是 jquery 和 jquery.qrcode.可以到https://github.com/jeromeetienne/jquery-qrcode获取最新的代码. 复制代码代码如下: <script type="text/javasc
jQuery之按钮组件的深入解析

按钮组件: $(selector).button([options]); 复制代码代码如下: <!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"&

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

相关推荐

随机推荐