HTML code: Multi-Object implementation aspect changes while mouse moves and then changes transparency
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Document</title>
<link rel= "stylesheet" type= "Text/css" href= "T.css" >
<script type= "Text/javascript" src= "Jstest.js" ></script>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
JS Code:
Window.onload=function () {
var test1=document.getelementsbytagname (' Li ');
for (Var i=0;i<test1.length;i++)
{
Test1[i].timer=null;
test1[i].alpha=30;
//test1[i].speed=0;
Test1[i].onmouseover=function () {
var g=this;
Getmove (This,{height:100,width:400},function () {
Getmove (g,{opacity:100})
});
};
Test1[i].onmouseout=function () {
var g=this;
Getmove (This,{opacity:30},function () {
Getmove (g,{height:70,width:300})
});
};
}
};
//A1 is the target value, obj is an object, ATTRR is the desired property, and the FN callback function
function Getmove (OBJ,JSON,FN) {
Clearinterval (Obj.timer);
Obj.timer=setinterval (function () {
var flag=1;
Jason Loop
for (Var attrr in JSON) {
Gets the current style value
if (attrr== ' opacity ') {
Icur=math.round (parsefloat (GetStyle (OBJ,ATTRR)) *100);
}else{
Icur=parseint (GetStyle (OBJ,ATTRR));
}
Calculation speed
var speed= (json[attrr]-icur)/10;
Speed=speed>0? Math.ceil (Speed): Math.floor (speed);
Determine if all target values are reached
if (ICUR!=JSON[ATTRR]) {
flag=0;
}
Calculation results
if (attrr== ' opacity ')
{
Obj.style.filter= ' alpha (opacity: ' + (icur+speed) + ') ';
obj.style.opacity= (icur+speed)/100;
}
else{
obj.style[attrr]=icur+speed+ ' px ';
}
}
Determine if the shutdown timer
if (flag) {
Clearinterval (Obj.timer);
if (FN) {
FN ();
}
}
},30);}
Gets the function expression for the current style value
function GetStyle (OBJ,ATTRR) {
if (Obj.currentstyle) {
return OBJ.CURRENTSTYLE[ATTRR];
}else{
Return getComputedStyle (Obj,false) [ATTRR];
}
}
JS implementation of a framework instance of motion