Home > Developer > Web Develop
<!doctype html>
<meta charset= "Utf-8" >
<title> Flexible Motion </title>
<script type= "Text/javascript" src= "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++)//Important
{
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;p osition:absolute; left:0px; top:20px; color: #fff; padding:10px;}
#xt {width:1px; height:500px; Background-color: #000; position:absolute; left:500px; top:0px;}
</style>
<body>
<div id= "Zgz" > Flexible motion </div>
<div id= "XT" ></div>
</body>
The-----elastic motion of the jquery plugin
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
