<!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. 【转载】图灵AngularJS入门教程

    摘自图灵的AngularJS入门教程:http://www.ituring.com.cn/article/13471 感觉非常不错,所以推荐到首页一下! (一)Hello World! 开始学习Ang ...

  2. 【一天一道LeetCode】#258. Add Digits

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...

  3. 【linux学习笔记】Sublime Text3支持GB2312和GBK编码以及中文输入法

    几天在ubuntu15.10下使用Sublime Text3发现中文乱码,以及不能使用中文输入法(搜狗输入法linux版)的问题,捣鼓了半天,终于完善了,下面po一下我的解决方案. 一.支持GB231 ...

  4. 【一天一道LeetCode】#86. Partition List

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...

  5. Linux的启动流程（一）

    · 启动第一步--加载BIOS 当你打开计算机电源,计算机会首先加载BIOS信息,BIOS信息是如此的重要,以至于计算机必须在最开始就找到它.这是因为BIOS中包含了CPU的相关信息.设备启动顺序信息 ...

  6. Spark1.4从HDFS读取文件运行Java语言WordCounts并将结果保存至HDFS

    本次实验相关信息如下: 操作系统:Ubuntu 14 Hadoop版本:2.4.0 Spark版本:1.4.0 运行前提是Hadoop与Spark均已正确安装配置 2.在Linux中生成一个文件tes ...

  7. VB.NET版机房收费系统---报表

    报表,即报告情况的表格,简单的说:报表就是用表格.图表等格式来动态显示数据,可以用公式表示为:"报表 = 多样的格式 + 动态的数据". 在没有计算机以前,人们利用纸和笔来记录数据 ...

  8. Android自定义view进阶-- 神奇的贝塞尔曲线

    上一篇介绍了自定义view需要知道的基本函数.新开一篇献给借给我vpn的深圳_奋斗小哥. 转载请注明出处:http://blog.csdn.net/wingichoy/article/details/ ...

  9. Caffe + Ubuntu 15.04 + CUDA 7.0 安装以及配置

    作为小码农的我,昨天就在装这个东东了,主要参考第一篇博文,但是过程发现很多问题,经过反反复复,千锤百炼,终于柳暗花明,我把这个caffe给搞定了,是故,我发布出来,后之来者,欲将有感于斯文~ 本分分为 ...

  10. 动态获取html页面的内容，并且取其中的某块元素的方法

     $.ajax({  url: "http://192.168.1.59:8888/app-tpl-webapp/tpl/design.html",  async:false, ...