집 >웹 프론트엔드 >JS 튜토리얼 >JS는 슬라이딩 도어 애니메이션 효과를 실현합니다.

JS는 슬라이딩 도어 애니메이션 효과를 실현합니다.

php中世界最好的语言원래의: 2018-04-18 15:59:152525검색

이번에는 미닫이 문 동적인 효과를 구현하기 위한 JS를 소개하겠습니다. JS를 사용하여 미닫이 문 동적인 효과를 구현하기 위한 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

"미닫이문" 구현 방법 1: 그림 너비 변경

HTML+CSS 코드

<body>
 <p class="box">
  <ul>
   <!-- <li>![](images/slidepic2.jpg)</li> -->
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
  </ul>
 </p>
</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 = &#39;jquery-3.2.1.js&#39;></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>
 <p 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>
 </p>
</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 = &#39;jquery-3.2.1.js&#39;></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>

참고: 방법 1을 구현하는 동안 너비 및 이미지 이름 지정 설정에 주의하세요.

팁: 여기서는 jQuery 코드가 사용되며 javaScript 코드도 동일한 방식으로 구현할 수 있습니다. 순회 프로세스와 내장 함수 메서드를 수정하고 애니메이션 함수를 다시 작성하면 됩니다(이전 노트에는 캡슐화된 애니메이션 함수가 있습니다. 직접 소개하고 사용할 수 있습니다).

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!