<!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>jQuery插件</title>
<script type="text/javascript" src="data:images/jquery-2.0.3.js"></script>

<script>

(function($){
    
    $.fn.moveHc=function(json)
    {
        var i=0;
        
        for(i=0;i<this.length;i++)//重要
        {
            startMove(this[i], json);
        }
        
        function getStyle(obj, attr)
        {
            if(obj.currentStyle)
            {
                return obj.currentStyle[attr];
            }
            else
            {
                return getComputedStyle(obj, false)[attr];
            }
        }
        
        function startMove(obj, json, fn)
        {
            clearInterval(obj.timer);
            obj.timer=setInterval(function (){
                var bStop=true;        //这一次运动就结束了——所有的值都到达了
                for(var attr in json)
                {
                    //1.取当前的值
                    var iCur=0;
                    
                    if(attr=='opacity')
                    {
                        iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
                    }
                    else
                    {
                        iCur=parseInt(getStyle(obj, attr));
                    }
                    
                    //2.算速度
                    var iSpeed=(json[attr]-iCur)/8;
                    iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
                    
                    //3.检测停止
                    if(iCur!=json[attr])
                    {
                        bStop=false;
                    }
                    
                    if(attr=='opacity')
                    {
                        obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
                        obj.style.opacity=(iCur+iSpeed)/100;
                    }
                    else
                    {
                        obj.style[attr]=iCur+iSpeed+'px';
                    }
                }
                
                if(bStop)
                {
                    clearInterval(obj.timer);
                    
                    if(fn)
                    {
                        fn();
                    }
                }
            }, 30)
        }
        
    
    
    
}})(jQuery)

$(function(){
    
      var oDiv=$('div');
      
      
    oDiv.click(function(){
        
    
        oDiv.eq($(this).index()).moveHc({width:200,height:200,opacity:100})
        
        /*oDiv.eq($(this).index()).moveHc({width:100,height:100,opacity:100}).siblings().moveHc({width:50,height:55,opacity:50}) */  //siblings()在插件里不能用。用就出问题
        
        
/*        oDiv.eq($(this).index()).animate({width:100,height:100,opacity:1}).siblings().animate({width:50,height:55,opacity:0.5})
*/        
        
        })
      
      
      
      
    })

</script>

<style>

#zgz{ width:50px; opacity:0.5; height:55px; background:#f00; margin:10px; float:left;}

</style>

</head>

<body>

<div id="zgz"></div>
  <div id="zgz"></div>
  <div id="zgz"></div>
  <div id="zgz"></div>

</body>
</html>

jQuery插件之----缓冲运动的更多相关文章

  1. jQuery插件之-----弹性运动

    <!doctype html><html><head><meta charset="utf-8"><title>弹性运动 ...

  2. 50个jQuery插件可将你的网站带到另一个高度

    Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...

  3. 期待已久的2013年度最佳 jQuery 插件揭晓

    让人期待已久的2013年度最佳 jQuery 插件揭晓了.在过去的一年里,有很多很多的 jQuery 插件发布出来,而这里文章列出的这些插件从提供的功能更角度来看是其中的佼佼者.相信这些优秀的 jQu ...

  4. 使用jquery插件实现图片延迟加载技术（懒加载）

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  5. 延迟加载图片的 jQuery 插件——lazyload.js

    lazyload 这个 jQuery 插件,是用来缓冲加载图片的插件.如果一篇文章很长有很多图片的话,下载图片就需要很多时间.而这款插件,会检测你的滚动情况,只有你要看到那个图片的时 候,它才会从后台 ...

  6. 编写jQuery插件--实现返回顶部插件

    国庆过去一周多了,作为IT界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了.最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合 ...

  7. jquery插件cloud-zoom(放大镜)

    效果预览:http://www.helloweba.com/demo/cloud-zoom/ 源代码下载:http://pan.baidu.com/s/1eQnadXo Cloud Zoom是一个图像 ...

  8. 分享七款视差滚动效果的jQuery 插件

    视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是”改变”.在网页设计中,视差滚动(Parallax Scr ...

  9. 【转】20个令人敬畏的jQuery插件

    为网页设计师和开发推荐20个令人敬畏的jQuery插件.例如滑块,图像画廊,幻灯片插件,jQuery的导航菜单,jQuery文件上传,图像旋转器,标签的插件,用户界面​​元素,网络接触形式,模态窗口, ...

随机推荐

  1. 1Nginx+fastdfs分布式文件存储

     准备,将所需的软件传到服务器上,服务器的列表如下: fastdfs-nginx-module_v1.15.tar.gz FastDFS_v4.06.tar.gz libevent-2.0.21- ...

  2. 程序员修炼之道中所有tips总结

    1         关心你的技艺 如果你不在乎能否漂亮地开发出软件,你又为何要耗费生命去开发软件呢? 2         思考!你的工作 关掉自动驾驶仪,接管操作.不断地批评和评估你的工作. 3    ...

  3. 求解n皇后

    要求:在国际象棋上摆放n个皇后,使其不能互相攻击,即任意两个皇后都不能处于同一行.同一列或同一斜线上,问有多少种摆法 思路:很直观的想法就是在棋盘上一个一个皇后的摆,如果冲突,则摆放在另一个位置,直至 ...

  4. Touch Handling in Cocos2D 3.x(六)

    使英雄变成可触碰的对象 这是另一个非常有用的特性.很多用户需要捡起已经存在的英雄然后满屏幕移动它们.让我们按以下步骤实现该功能: 如果用户触摸屏幕空白位置,一个新的英雄将被创建 如果用户触摸一个已经存 ...

  5. input驱动12种事件类型Event types的含义

    linux2.6 input subsystem中部分相关结构体的分析  最近在做linux2.6的键盘驱动程序的工作,接触到了input subsystem这一概念,现把我对其中相关结构体的理解写出 ...

  6. avcodec_decode_video2()解码视频后丢帧的问题解决

    使用libav转码视频时发现一个问题:使用下面这段代码解码视频时,视频尾巴上会丢掉几帧. while(av_read_frame(ifmt_ctx,&packet) >= 0){ ret ...

  7. Counting Bloom Filter

    Counting Bloom Filter是 改进型,将记录标准的存在位0和1,扩展为计数器counter.记录有几个元素.插入加一,删除减一.多占几倍存储空间. 标准的Bloom Filter是一种 ...

  8. How to create DB2 user function easily by DB Query Analyzer 6.03

    How to create DB2user function easily by DB Query Analyzer 6.03 Ma Genfeng (Guangdong Unitoll Servic ...

  9. 017-封装-OC笔记

    学习目标 1.[了解]异常处理 2.[掌握]类方法 3.[掌握]NSString类 4.[掌握]匿名对象 5.[掌握]封装实例变量 6.[掌握]对象之间的关系 一.异常处理 什么是异常? 代码完全符合 ...

  10. 使用Visual Studio创建图片精灵（Image Sprite）——Web Essential

    原文:Creating Image Sprite in Visual Studio - Web Essential 译者注:有关图片精灵的信息请参阅http://baike.baidu.com/vie ...