zoukankan      html  css  js  c++  java
  • 例子1--手风琴

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <style>
    *{margin:0;padding:0;}
    body{font-size:12px;}
    #accordion{727px; height:350px; margin:100px auto 0 auto; position:relative; overflow:hidden; border:1px solid #CCC;}
    #accordion ul{list-style:none;}
    #accordion ul li{643px;height:350px; position:absolute; background:#FFF;}
    #accordion ul li span{display:block;20px; height:350px; float:left; text-align:center; color:#FFF; padding-top:5px; cursor:pointer;}
    #accordion ul li img{display:block; float:right;}
    .bar01{left:0px;}
    .bar02{left:643px;}
    .bar03{left:664px;}
    .bar04{left:685px;}
    .bar05{left:706px;}
    .bar01 span{background:#09E0B5;}
    .bar02 span{background:#3D7FBB;}
    .bar03 span{background:#5CA716;}
    .bar04 span{background:#F28B24;}
    .bar05 span{background:#7C0070;}
    </style>
    
    <script type="text/javascript">
    
    	$(function(){
    
    		$('#accordion li').click(function() {		
    			
    			$(this).animate({left:$(this).index()*21});	//写到这里按顺序查看图片是没问题的,但如果从左到右跳着看,中间就会出现空隙		
    
    			$(this).prevAll().each(function(){				
    
    				$(this).animate({left:$(this).index()*21});
    				
    			});//prevAll表示同级的上面所有元素,解决了上面的问题
    
    			$(this).nextAll().each(function(){ 
    				
    				$(this).animate({left:(727-(5-$(this).index())*21)});				
    			});//上面2行实现从右往左看图的功能
    
    
    		});
    
    
    	})
    
    
    </script>
    
    
    <title>手风琴效果</title>
    </head>
    
    <body>
    <div id="accordion">
    	<ul>
    	<li class="bar01"><span>非洲景色01</span><img src="images/001.jpg" /></li>
        <li class="bar02"><span>非洲景色02</span><img src="images/002.jpg" /></li>
        <li class="bar03"><span>非洲景色03</span><img src="images/003.jpg" /></li>
        <li class="bar04"><span>非洲景色04</span><img src="images/004.jpg" /></li>
        <li class="bar05"><span>非洲景色05</span><img src="images/005.jpg" /></li>
    	</ul>
    </div>
    </body>
    </html>
    

      

  • 相关阅读:
    OC中的字典
    OC中的那些String
    虚拟机资源共享
    虚拟机空间使用心得
    PEST和SWOT分析法
    Axure 的四种预览模式
    竞品分析:抖音VS快手
    第二章:行业与市场分析六步法
    第一章:互联网产品从0到1全流程解密(9-11)
    第一章:互联网产品从0到1全流程解密(5-8)
  • 原文地址:https://www.cnblogs.com/regit/p/8984583.html
Copyright © 2011-2022 走看看