<!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. Python与JavaWeb的第一次碰撞

    在Python中向服务器提交一个表单数据看起来是很容易的,但是这次经历着实让我记忆深刻,借此也为了警醒同样遇到了这样问题的你们. 要做什么? 使用Python的urllib2模块提交表单数据,并在服务 ...

  2. python安装json的方法；以及三种json库的区别

    python中的json解释库有好几个,不同版本使用方法不同. 常用有 json-py 与smiplejson 两个包 其中,json-py 包含json.py外,还有一个minjson,两者用法上有 ...

  3. Touch Handling in Cocos2D 3.x(四)

    创建触摸生命周期 让我们改善我们的应用程序.如果玩家可以触摸屏幕并且拖放英雄到指定位置不是更好吗? 为了完成这个功能我们必须使用Cocos2d 3.0提供的所有的触摸事件: touchBegan:在用 ...

  4. 使用百度地图开发一个导航定位demo-android学习之旅(77)

    首先介绍如何导入百度地图 步骤(其实官方文档写的很清楚了)http://developer.baidu.com/map/index.php?title=androidsdk/guide/introdu ...

  5. （三十三）UIApplicationDelegate和程序的启动过程

    移动操作系统有个致命弱点,是app容易受到干扰(来电或者锁屏). 当app受到干扰时,会产生一系列的系统事件,这时UIApplication会通知其delegate对象,让delegate处理系统事件 ...

  6. CentOS安装、使用VNC

    VNC (Virtual Network Computer)是虚拟网络计算机的缩写.VNC 是一款优秀的远程控制工具软件,由著名的 AT&T 的欧洲研究实验室开发的.VNC 是在基于 UNIX ...

  7. JQuery实战总结三 标签页效果图实现

    在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. ...

  8. JavaScript进阶(一)抽离公共函数

    JS抽离公共函数 问题 在经历了"大量"的项目开发后,发觉越来越多的方法可以被抽离出来作为一个公共方法使用.那么,在js中该思想又该如何实现呢? 解答 例如,以下方法用于实现将标准 ...

  9. 【Qt编程】基于Qt的词典开发系列<三>--开始菜单的设计

    这篇文章讲讲如何实现开始菜单(或者称为主菜单)的设计.什么是开始菜单呢?我们拿常用的软件来用图例说明,大多数软件的开始菜单在左下角,如下图: 1.window 7的开始菜单 2.有道词典的主菜单 3. ...

  10. 使用JS取得焦点(focus)元素

    原文链接: Get the Focused Element with JavaScript 原文日期: 2014年3月19日 翻译日期: 2014年3月21日 翻译人员: 铁锚 对于良好的用户体验来说 ...