javascript经典特效分享 手风琴、轮播图、图片滑动

最近都没有更，就来几个效果充实一下。
都没有进行美化这步。 

纯css的手风琴：

 
 
 
 


 

  

   
这是第一个
   
这是第二个
   
这是第三个
   
这是第四个
   
这是第五个
  
 

css3手风琴： 

 
 
 


 
 我的同学  
 
 
同学名字
 
同学名字
 
同学名字
 
同学名字
 
同学名字
 
 我的同学 
  
 
 
同学名字
 
同学名字
 
同学名字
 
同学名字
 
同学名字
 
 我的同学  
 
同学名字
 
同学名字
 
同学名字
 
同学名字
 
同学名字
 
 我的同学  
 
同学名字
 
同学名字
 
同学名字
 
同学名字
 
同学名字
 
 

javascript实现的手风琴： 

 
 
 

 


 

  

   
这是第一个
   
这是第二个
   
这是第三个
   
这是第四个
   
这是第五个
  
 

接下来的都是会使用到动画效果，既然这样就把封装好运动： 

/*使用调用，obj对象，attr属性，speed速度，iTarget想达到的值，fn回调函数*/
/*因为运动基本都是px为单位的，至于透明度是没有单位，所以在这里把它分开了，
 其实也没有怎么改，就是判断是不是透明度这个属性，然后走透明度这条线
*/
  function doMove(obj,attr,speed,iTarget,fn){
   if(attr=="opacity"){
    obj.len=iTarget-parseFloat(getStyle(obj,"opacity"))*100;
   }else{
    obj.len=iTarget-parseFloat(getStyle(obj,attr));
   }
   /*这里判断方向，在初始点后的为负数，在初始点前为正数*/
   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;
    }
    /*这里是判断到了目标点没有，到了就停止定时器*/
    if(obj.num>=iTarget && obj.len>0 || obj.num<=iTarget && obj.len<0){
     obj.num=iTarget;
     clearInterval(obj.timer);
    }
    if(attr=="opacity"){
     obj.style[attr]=obj.num/100;
    }else{
     obj.style[attr]=obj.num+"px";
    }
    /*因为放在上面无法实现到回调函数的完整作用，出现一些BUG*/
    if(obj.num>=iTarget && obj.len>0 || obj.num<=iTarget && obj.len<0){
     fn && fn();
    }
   },30);

  }
  /*获取css属性值的，会获取表现出现的值*/
  function getStyle(obj,attr){
   return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
  }

轮播图： 

 
 
 
 
 
 


 

  

   

   

   

   

   

  
  >
  <
  

   
   
   
   
   
  
 

这个是使用插件做的：responsiveslides.js 

基于jquery 

图片滑动： 

 
 
 
 
 
 


 

  

   

    

     

     

     

    
    

     

     

     

    
   
  
  

   <> 
  
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。