JS DOM은 마우스 슬라이딩 그림 효과_javascript 기술을 실현합니다.-JS 튜토리얼-php.cn

JS DOM은 마우스 슬라이딩 그림 효과_javascript 기술을 실현합니다.

WBOY

풀어 주다： 2016-05-16 15:10:02

원래의

1662명이 탐색했습니다.

여러 웹페이지를 탐색하다 보면 다양한 애니메이션 효과가 나타나는 경우가 많습니다. 아래 그림과 같이 많은 온라인몰에서 흔히 사용하는 상품 표시 방식으로, 창에 비슷한 상품이 나란히 표시됩니다. 사용자가 보는 경우 당첨된 상품의 상세정보를 보고 싶은 경우 해당 상품 영역에 마우스를 올려놓으면 원래 접혀 있던 상품이 자동으로 펼쳐지면서 상세정보가 앞쪽에 표시됩니다. 사용자이며 이 애니메이션은 DOM+JS를 사용합니다. 조합을 통해 달성되며 오늘의 작은 연습은 이 효과를 달성하는 것입니다.

먼저 페이지의 기본 프레임워크를 HTML로 구현하고 "container"라는 div 블록에 4개의 그림을 캡슐화합니다.

<!doctype html>
<meta charset="UTF-8">
<html>
 <head>
 <title>
 鼠标滑过页面自动变大
 </title>
 <link rel="stylesheet" href="styles/reset.css" />
 <link rel="stylesheet" href="styles/slidingdoors.css" />
 <script src="slidlingdoors.js"></script>
 </head>
 <body>
 <div id="container">
 <img src="./images/door1.png"/>
 <img src="./images/door2.png"/>
 <img src="./images/door3.png"/>
 <img src="./images/door4.png"/>
 </div>
 </body>
</html>

로그인 후 복사

그런 다음 두 가지 스타일 시트를 사용하여 다음과 같이 일반적인 스타일을 수정했습니다.

에 이어

slidingdoors.css和reset.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;
}

로그인 후 복사

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

로그인 후 복사

다음으로 슬라이딩 효과를 구현해야 합니다. js 코드는 다음과 같습니다.

window.onload=function(){
 var box=document.getElementById("container");
 var imgs=box.getElementsByTagName("img");
 var imgwidth=imgs[0].offsetWidth;
 var exposewidth=160;
 var boxwidth=imgwidth+exposewidth*(imgs.length-1);
 box.style.width=boxwidth+'px';
 function setImgPos(){
 for(var i=1;i<imgs.length;i++)
 {
  imgs[i].style.left=imgwidth+exposewidth*(i-1)+'px';
 }
 }
 setImgPos();
 var translate=imgwidth-exposewidth;
 for(var i=0;i<imgs.length;i++)
 {
 (function(i){
  imgs[i].onmouseover=function(){
  setImgPos();
  for(var j=1;j<=i;j++)
  {
   imgs[j].style.left=parseInt(imgs[j].style.left,10)-translate+'px';
  }
  };
 })(i);
 }
};

로그인 후 복사

완성된 렌더링은 다음과 같습니다.