This article has shared the pure js+html to make the accordion and the pure css+html to make the accordion two kinds of effects, for everybody reference, the concrete content is as follows
One, pure css+html accordion effect
This kind of accordion with CSS is relatively simple, mainly applied to CSS, transition properties.
The code is as follows:
Second, pure js+html making accordion
One problem with this accordion is that it's okay to move each Li individually, but when it's moving quickly, the right side of the Li appears to have a gap. I feel the problem with the timer, that is, when each Li has not returned to his position, the next Li will begin to exercise. But I have the timer turned off.
Please give me a message, help me to see how to change ha!
The code is as follows:
The
Perfectmove2.js code is as follows:
function GetStyle (obj,attr)//Get the property in the style {if (Obj.currentstyle) {return obj.currentstyle[attr] in this way;
else {return getComputedStyle (obj,false) [attr];
} function Startmove (OBJ,JSON,FN) {clearinterval (Obj.timer);//purge Timer obj.timer=setinterval (function () {
var stop=true;
for (Var attr in json) {var icur=0; if (attr== ' opacity ') {Icur=parseint (parsefloat (GetStyle (obj, attr)) *100)//Here parseint is to avoid the value of the div is not stable
, in the fluctuation} else {icur=parseint (GetStyle (obj, attr));
} var ispeed= (json[attr]-icur)/8; Ispeed=ispeed>0?
Math.ceil (ispeed): Math.floor (Ispeed);
if (Icur!=json[attr]) {stop=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 (stop) {clearinterval (Obj.timer);
if (FN) {fn ();}
}}, 30)}
The above is the entire content of this article, I hope to learn JavaScript program to help you.