자바스크립트 그림 슬라이딩 효과_javascript 스킬 구현-JS 튜토리얼-php.cn

자바스크립트 그림 슬라이딩 효과_javascript 스킬 구현

WBOY

풀어 주다： 2016-05-16 15:32:43

원래의

2077명이 탐색했습니다.

이 기사에서는 JavaScript 이미지 슬라이딩 효과를 구현하는 방법을 공유합니다. 먼저 렌더링을 살펴보겠습니다.

해당 사진 위에 마우스를 올리면 전체 사진이 표시됩니다. 사진을 제거하면 재설정됩니다.

간단한 CSS 및 JS 작업 DOM 구현:

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>sliding doors</title>
  <link rel="stylesheet" href="styles/reset.css" />
  <link rel="stylesheet" href="styles/slidingdoors.css" />
  <script src="scripts/slidingdoors.js"></script>
 </head>
 <body>
  <div id='container'>
   <img src="images/door1.png" alt="자바스크립트 그림 슬라이딩 효과_javascript 스킬 구현" title="자바스크립트 그림 슬라이딩 효과_javascript 스킬 구현" />
   <img src="images/door2.png" alt="5.5寸四核" title="5.5寸四核" />
   <img src="images/door3.png" alt="四核5寸" title="四核5寸" />
   <img src="images/door4.png" alt="5.7寸机皇" title="5.7寸机皇" />
  </div>
 </body>
</html>

로그인 후 복사

css:

#container {
 height: 477px;
 margin: 0 auto;
 border-right: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 overflow: hidden;
 position: relative;
}

#container img {
 position: absolute;
 display: block;
 left: 0;
 border-left: 1px solid #ccc;
}

로그인 후 복사

js 작업:

window.onload = function() {
 //容器对象
 var box = document.getElementById('container');

 //获得图片NodeList对象集合
 var imgs = box.getElementsByTagName('img');

 //单张图片的宽度
 var imgWidth = imgs[0].offsetWidth;

 //设置掩藏门体露出的宽度
 var exposeWidth = 180;

 //设置容器总宽度
 var boxWidth = imgWidth + (imgs.length - 1) * exposeWidth;
 box.style.width = boxWidth + 'px';

 //设置每道门的初始位置
 function setImgsPos() {
  for (var i = 1, len = imgs.length; i < len; i++) {
   imgs[i].style.left = imgWidth + exposeWidth * (i - 1) + 'px';
  }
 }
 setImgsPos();

 //计算每道门打开时应移动的距离
 var translate = imgWidth - exposeWidth;

 //为每道门绑定事件
 for (var i = 0, len = imgs.length; i < len; i++) {
  //使用立即调用的函数表答式，为了获得不同的i值
  (function(i) {
   imgs[i].onmouseover = function() {
    //先将每道门复位
    setImgsPos();
    //打开门
    for (var j = 1; j <= i; j++) {
     imgs[j].style.left = parseInt(imgs[j].style.left, 10) - translate + 'px';
     //imgs[j].style.left = j*exposeWidth +"px";
    }
   };
   imgs[i].onmouseout = function(){
    setImgPos();
   };
  })(i);
 }
};

로그인 후 복사

이 기사가 JavaScript 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.