<!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. Servlet编程实例-servlet学习之旅（三）

    LoginServlet代码: public class LoginServlet extends HttpServlet{ @Override protected void service(Http ...

  2. JAVA代码规范笔记（下）

    声明 17.推荐一行一个声明,因为这样有利于写注释.换句话说,下面的声明方法中, int level; // indentation level int size; // size of table ...

  3. 基于androidpn客户端修改的AndroidPNClient

    最近在做推送,采用的框架是androidpn,但对于客户端实在是修改得受不了了,特别是重连和连接那一块,有些BUG的修改实在是难以下手,比如在重连那里,原来的写法是在死循环中不断调用 xmppMana ...

  4. Dynamics CRM Microsoft SQL Server 指定的数据库具有更高的版本

    在做NLB部署时遇到这么个问题,CRMAPP1安装的CRM版本是6.1已经打了SP1补丁,而在CRMAPP2上的CRM安装包是6.0版本,在选择连接现有部署后,最后一步检测就出了问题,如下图所示. 看 ...

  5. Mybatis源码分析之结果封装ResultSetHandler和DefaultResultSetHandler

    ResultSetHandler负责处理两件事: (1)处理Statement执行后产生的结果集,生成结果列表 (2)处理存储过程执行后的输出参数ResultSetHandler是一个接口,提供了两个 ...

  6. 【翻译】Sencha Cmd中脚本压缩方法之比较

    概述 为什么要修改默认设置 YUI压缩 Google Closure编译器 UglifyJS 案例研究Ext JS 6示例应用程序 注意事项 自定义JS压缩 小结 概述 这么多年来,Web开发人员都被 ...

  7. UI设计——最后一根稻草

    WindowsLive提供的本地地图服务看起来挺简单的,但其实非常难用: 跟其他人一样,每当我接触到一个新的地图服务,我做的第一件事总是拿当前的地址去试一试.我在上面输入的是我工作的地方.但是,当我敲 ...

  8. Linux多线程实践(4) --线程特定数据

    线程特定数据 int pthread_key_create(pthread_key_t *key, void (*destr_function) (void *)); int pthread_key_ ...

  9. android Timer与TimerTask的相关操作

    项目上面的部分操作需要使用到定时器进行周期性的控制.网络上面对于定时器的操作通常有三种实现方法. 我是通过Timer与TimerTask相结合实现的定时器功能.具体实现过程如下: 第一步,得到Time ...

  10. Android Studio下使用NDK的流程

    我要重新拿回持之以恒徽章!! 老规矩,先说看能学会什么:ANDROID STUDIO下NDK的使用方法.JNI的基本使用方法,C语言调用JAVA的方法. 首先要下载NDK,如果你没有VPN可以来htt ...