JS 이미지 아코디언 효과 구현

4653 단어 js아코디언
'미닫이 문'의 동 효 는'아코디언'효과 라 고도 할 수 있다.대부분 효과 가 실현 하 는 사 고 는 대체적으로 같다.다음은 두 가지 방법 을 소개 한다.하 나 는 그림 의 오프셋 위 치 를 바 꾸 어 이동 하 는 것 이 고 다른 하 나 는 배경 그림 을 옮 겨 다 닌 후에 그림 의 폭 을 바 꾸 어 변 화 를 실현 하 는 것 이다.

미닫이 수축 상태.png

"미닫이 문"전개 상태.png
'미닫이 문'실현 방법 1:그림 너비 변경
html+css 코드

<body>
 <div class="box">
 <ul>
  <!-- <li>![](images/slidepic2.jpg)</li> -->
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </ul>
 </div>
</body>

<style>
 *{
  padding: 0;
  margin: 0;

 }
 .box{
  /*    :          240px      1200px*/
  /*    :      800px       100px*/
  width: 1200px;
  height: 500px;
  border:1px solid red;
  margin: 50px auto;
 }
 .box ul{
  list-style: none;
  width: 1210px;
 }
 /*           float: left*/
 .box ul li{
  width: 240px;
  height: 500px;
  /*background: url(images/slidepic2.jpg);*/
  float: left;
 }
 </style>
jQuery 실현 

<script src = 'jquery-3.2.1.js'></script>
<script>
 $(function(){
 //1     li              
 var lis = $('li');
 lis.each(function(index, element){
  //                 
  var imgName = "images/slidepic" + (index + 2) +".jpg ";
  $(element).css('background', "url('"+ imgName +"')")
 });
 //2.    
 //            800     (  )  100
 lis.mouseenter(function(){
  // console.log(this);    li DOM  
  //          800
  $(this).stop().animate({width: 800});
  //         100
  $(this).siblings('li').stop().animate({width: 100});
 });
 //3              
 lis.mouseout(function(){
  lis.stop().animate({width: 240});
 });
 })
</script>
'미닫이 문'실현 방법 2:그림 의 오프셋 값 변경
html+css 코드

<body>
 <div class="picList">
 <ul>
  <li>![](images/slidepic8.jpg)</li>
  <li>![](images/slidepic3.jpg)</li>
  <li>![](images/slidepic4.jpg)</li>
  <li>![](images/slidepic5.jpg)</li>
  <li>![](images/slidepic7.jpg)</li>
 </ul>
 </div>
</body>

<style>
 *{
  background-color: #aaa;
  padding: 0;
  margin: 0;
 }
 ul{list-style: none;}

 .picList{
  width: 1000px;
  height: 400px;
  /*border:1px solid #eee;*/
  margin:100px auto;
  position: relative;
  overflow: hidden;
 }
 /*                  */
 .picList ul li{
  position: absolute;
  width: 1000px;
  height: 400px;
  top: 0;
 }
 img{
  width: 100%;
  height: 400px;
  cursor: pointer;

 }
</style>
jQuery 실현

<script src = 'jquery-3.2.1.js'></script>
<script >
 $(function(){
 //1                 left:i*200
 var lis = $('li');
 for(var i = 0; i < lis.length; i++){
  lis.eq(i).css({left:i*200 + 'px' });
 }
 //2.  hover    ,              
 lis.hover(function(){
  var index = $(this).index(); //DOM    jQuery  
  //2.1     ,                 j*100  
  for(var j = 0; j <= index; j++){
  lis.eq(j).stop().animate({left: j*100 + 'px'},300);
  }
  //2.2     ,                 500+j*100  
  for(var j = index + 1; j < lis.length; j++){
  lis.eq(j).stop().animate({left: 500+j*100 + 'px'},300);
  }
 },function(){ //2.3     ,             i*200
  for(var i = 0; i < lis.length; i++){
  lis.eq(i).stop().animate({left: i*200 + 'px'},300);
  }
 });
 })
</script>
메모:방법 은 이 루어 지 는 과정 에서 너비 와 그림 이름 의 설정 에 주의 하 십시오.
알림:jQuery 코드 를 사용 하여 이 루어 집 니 다.javaScript 코드 도 마찬가지 로 이 루어 집 니 다.옮 겨 다 니 는 과정 과 내 장 된 함수 방법 만 수정 하고 애니메이션 함 수 를 다시 씁 니 다.(앞의 노트 는 봉 인 된 animate 함수 가 있어 서 직접 사용 할 수 있 습 니 다)
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기