JavaScript Classic special effects share accordion, carousel map, picture slide _javascript Tips

No more recently, just a few effects to enrich.
has not been done to beautify this step.

Accordion with pure CSS :

<! DOCTYPE html>  

CSS3 Accordion:

<! DOCTYPE html>  

JavaScript-Implemented accordion:

<! DOCTYPE html>  

The next thing is to use the animation effect, since this will wrap the good movement:

/* Use call, obj object, attr property, speed speed, ITarget value to be reached, FN callback function * * * Because the movement is basically PX, as the transparency is no unit, so here it separated, in fact, not how to change, is to judge whether transparency is the attribute, then go to transparency this line * * function Domove (OBJ,ATTR,SPEED,ITARGET,FN) {if (attr== "opacity") {Obj.len=itarget-pars
   Efloat (GetStyle (obj, "opacity")) *100;
   }else{obj.len=itarget-parsefloat (GetStyle (obj,attr));

   /* Here is the direction, negative after the initial point, a positive number before the initial point * * speed=obj.len>0?speed:-speed;
   Clearinterval (Obj.timer);
    Obj.timer=setinterval (function () {if (!obj.num) {obj.num=0;
    } if (attr== "opacity") {Obj.num=parsefloat (GetStyle (obj,attr)) *100+speed;
    }else{Obj.num=parseint (GetStyle (obj,attr)) +speed; }/* Here is to determine the target point does not, to stop the timer */if (obj.num>=itarget && obj.len>0 | | obj.num<=itarget && OBJ.L
     en<0) {obj.num=itarget;
    Clearinterval (Obj.timer);
    } if (attr== "opacity") {obj.style[attr]=obj.num/100;
    }else{obj.style[attr]=obj.num+ "px"; }/* There are some bug*/if (obj.num) that cannot be implemented on top of the full function of the callback function.>=itarget && obj.len>0 | |
    Obj.num<=itarget && obj.len<0) {fn && fn ();

  }},30); /* Gets the value of the CSS property, and gets the value of the expression */function GetStyle (obj,attr) {return OBJ.CURRENTSTYLE?OBJ.CURRENTSTYLE[ATTR]:GETCOMPUTEDST
  YLE (obj) [attr];

 }

Carousel Map:

<! DOCTYPE html>  

This is done using Plug-ins: responsiveslides.js

based on jquery

<!
 DOCTYPE html>  

Picture slide:

<! DOCTYPE html>  

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.