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

<script type="text/javascript" src="data:images/jquery-1.11.1.min.js"></script>

<script>

// JavaScript Document

(function($){
    
    $.fn.moveTx=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];
            }
        }

var iSpeed=0;
var iTget=0;

function startMove(obj,json)
{
    clearInterval(obj.timer);

obj.timer=setInterval(function (){
        
        for(var attr=0 in json)
        {
            iSpeed+=(json[attr]-parseInt(getStyle(obj, attr)))/5;
        
            iSpeed*=0.7;
            
            iTget+=iSpeed;
            
            if(Math.abs(iSpeed)<1 && Math.abs(iTget-json[attr])<1)
            {
                clearInterval(obj.timer);
                
                obj.style[attr]=json[attr]+'px';
                
            }
            else
            {
                obj.style[attr]=iTget+'px';
            }
                
        }
                
        
    }, 30);
}

}})(jQuery)

$(function(){
    
    
    var oDiv=$('#zgz')
    
    
    
    oDiv.click(function(){
        
        
        $(this).moveTx({left:500})})
    
    
    })

</script>

<style>

#zgz{ width:80px; height:80px; background-color:#f00;position:absolute; left:0px; top:20px; color:#fff; padding:10px;}

#xt{ width:1px; height:500px; background-color:#000; position:absolute; left:500px; top:0px;}

</style>

</head>

<body>

<div id="zgz">弹性运动</div>
<div id="xt"></div>

</body>
</html>

jQuery插件之-----弹性运动的更多相关文章

  1. jQuery插件之----缓冲运动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

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

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

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

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

  5. 2013年优秀jQuery插件

    今天为大家推荐的是2013年的第一期,在这期里面十个jQuery插件涵盖了响应式的网格布局插件.图片放大插件.表单元素中自定义select插件,google 地图插件.文件拖放上传插件.tooltip ...

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

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

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

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

  8. python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

  9. 元素视差方向移动jQuery插件-类似github 404页面效果

    原文地址:http://www.xuanfengge.com/shake.html 前言: 视差滚动,大家也许并不陌生.但是对于视差方向移动,你是否有见过效果呢?看官请进来瞧瞧~ demo : 轩枫阁 ...

随机推荐

  1. 【Android应用开发】EasyDialog 源码解析

    示例源码下载 : http://download.csdn.net/detail/han1202012/9115227 EasyDialog 简介 : -- 作用 : 用于在界面进行一些介绍, 说明; ...

  2. Android 系统当中各种尺寸单位的定义及使用

    一,Android 各种标尺单位的含义: px:表示屏幕实际的象素.例如,320*480的屏幕在横向有320个象素,在纵向有480个象素.pt:表示一个点,是屏幕的物理尺寸.大小为1英寸的1/72.i ...

  3. SSH深度历险（五） 深入浅出-----IOC AND AOP

    IOC就是Inversion of Control,控制反转.在Java开发中,IoC意味着将你设计好的类交给系统(容器)来控制实现,而不是在你的类内部控制.这称为控制反转. 本人理解:就是把原本你自 ...

  4. (NO.00004)iOS实现打砖块游戏(十二):伸缩自如,我是如意金箍棒(上)!

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 通用的星星类已经完成了,下面我们来实现具体的变长和缩短道具. 变 ...

  5. 【一天一道LeetCode】#113. Path Sum II

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

  6. 管道模式——pipeline与valve

    在一个比较复杂的大型系统中,假如存在某个对象或数据流需要被进行繁杂的逻辑处理的话,我们可以选择在一个大的组件中进行这些繁杂的逻辑处理,这种方式确实达到了目的,但却是简单粗暴的.或许在某些情况这种简单粗 ...

  7. 【一天一道LeetCode】#99. Recover Binary Search Tree

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

  8. Awards and Certifications @EMC

    1. Awards 1.1 Jun. 12, 2012, Accurev Migration 1.2 Oct. 16, 2012, Deliver Inyo RTM to Rockies 1.3 Ju ...

  9. Java进阶(二十五)Java连接mysql数据库(底层实现)

    Java进阶(二十五)Java连接mysql数据库(底层实现) 前言 很长时间没有系统的使用java做项目了.现在需要使用java完成一个实验,其中涉及到java连接数据库.让自己来写,记忆中已无从搜 ...

  10. 手把手教你打造一个心电图效果View Android自定义View

    大家好,看我像不像蘑菇-因为我在学校呆的发霉了. 思而不学则殆 丽丽说得对,我有奇怪的疑问,大都是思而不学造成的,在我书读不够的情况下想太多,大多等于白想,所以革命没成功,同志仍需努力. 好了废话不说 ...