Home > Developer > Web Develop
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>jquery plug-in </title>
<script type= "Text/javascript" src= "Images/jquery-2.0.3.js" ></script>
<script>
(function ($) {
$.fn.movehc=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];
}
}
function Startmove (obj, JSON, FN)
{
Clearinterval (Obj.timer);
Obj.timer=setinterval (function () {
var bstop=true; This time the movement is over--all the values have arrived.
for (Var attr in JSON)
{
1. Take the current value
var icur=0;
if (attr== ' opacity ')
{
Icur=parseint (parsefloat (GetStyle (obj, attr) *100);
}
Else
{
Icur=parseint (GetStyle (obj, attr));
}
2. Calculation speed
var ispeed= (json[attr]-icur)/8;
Ispeed=ispeed>0? Math.ceil (ispeed): Math.floor (Ispeed);
3. Detection Stop
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 () is not available in the plugin. The problem is with it.
/* 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>
<body>
<div id= "Zgz" ></div>
<div id= "Zgz" ></div>
<div id= "Zgz" ></div>
<div id= "Zgz" ></div>
</body>
Write the first jquery plugin----buffered motion
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
