十行jq代碼實現(xiàn)手風琴切換效果

標簽：

Html/CSS JQuery JavaScript

一个简洁易用的图片切换效果,自己写之前在网上找了一些看了看,能完美实现效果的,除了jq,还都用了另外的运动插件,又增加了学习成本不说,用起来还麻烦,而用jq或js写的都有问题,要么最后一个图片会抖动,要么动起来很不流畅,总之效果不怎么理想,而且这么个小功能代码量还不小.
所以就自己动手用jq写了一个简单的原型分享出来,希望对大家有所帮助!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>最简洁的jq手风琴效果</title>
<style>
*{margin: 0; padding: 0;} 
#content { 
  list-style: none;
  width:800px; 
  height: 300px; 
  position: relative; 
  overflow: hidden;
  margin:50px auto;
} 
#content li{ 
  width:500px; 
  height:300px; 
  position: absolute;
} 
</style>
</head>
<body>
  <ul id="content"> 
    <li style="background:red;left:0px;"></li> 
    <li style="background:blue;left:500px;"></li> 
    <li style="background:yellow;left:600px; "></li> 
    <li style="background:green;left:700px; "></li> 
  </ul> 
</body>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script >
$(function(){
  $('li').mouseenter(function(){
    for(var i=0;i<$('li').length;i++){
      if($(this).index()>=i){
        $('li').eq(i).stop().animate({left:i*100});
      }else{
        $('li').eq(i).stop().animate({left:i*100+400});
      }
    }
  })       
}); 
</script>
</html>

點擊查看更多內容