집 > 기사 > 웹 프론트엔드 > JS DOM은 마우스 슬라이딩 그림 효과_javascript 기술을 실현합니다.

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

WBOY원래의: 2016-05-16 15:10:021679검색

여러 웹페이지를 탐색하다 보면 다양한 애니메이션 효과가 나타나는 경우가 많습니다. 아래 그림과 같이 많은 온라인몰에서 흔히 사용하는 상품 표시 방식으로, 창에 비슷한 상품이 나란히 표시됩니다. 사용자가 보는 경우 당첨된 상품의 상세정보를 보고 싶은 경우 해당 상품 영역에 마우스를 올려놓으면 원래 접혀 있던 상품이 자동으로 펼쳐지면서 상세정보가 앞쪽에 표시됩니다. 사용자이며 이 애니메이션은 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);
 }
};

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

발생한 문제:

1. 사진 재설정 기능의 i 및 j 변수가 불분명합니다.

2. 결과적으로 한 장의 사진이 재설정되면 재설정되지 않은 나머지 사진이 차단됩니다. 이는 재설정 기능에 작은 문제가 있기 때문입니다.

경험: JS 함수 변수는 복잡하고 논리가 엄격하므로 코드를 작성할 때 주의해야 합니다

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

성명：

이전 기사：JavaScript_Basic 지식으로 캡슐화 및 상속 기능을 간략하게 이해다음 기사：JavaScript_Basic 지식으로 캡슐화 및 상속 기능을 간략하게 이해

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

관련 기사