JS DOM menyedari kemahiran effect_javascript gambar gelongsor tetikus-tutorial js-php.cn

JS DOM menyedari kemahiran effect_javascript gambar gelongsor tetikus

WBOY

Lepaskan： 2016-05-16 15:10:02

asal

1676 orang telah melayarinya

Selalunya, apabila kita melayari pelbagai laman web, pelbagai kesan animasi akan dipaparkan Seperti yang ditunjukkan dalam gambar di bawah, ia adalah kaedah paparan produk yang biasa digunakan di banyak pusat membeli-belah dalam talian yang dipaparkan sebelah menyebelah Jika pengguna melihat Jika anda ingin melihat butiran produk yang anda menang, letakkan sahaja tetikus pada kawasan produk, produk asal yang dilipat akan mengembang secara automatik, dan butiran akan dipaparkan di hadapan. pengguna, dan animasi ini menggunakan DOM+JS Ia dicapai melalui gabungan, dan latihan kecil hari ini adalah untuk mencapai kesan ini.

Mula-mula, laksanakan rangka kerja asas halaman dalam HTML, dan rangkumkan empat gambar dalam blok div bernama "bekas"

<!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>

Salin selepas log masuk

Kemudian, saya menggunakan dua helaian gaya untuk mengubah suai gaya umum seperti berikut:

diikuti oleh

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;
}

Salin selepas log masuk

/**
 * 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;
}

Salin selepas log masuk

Seterusnya, kita perlu melaksanakan kesan gelongsor Kod js adalah seperti berikut:

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);
 }
};

Salin selepas log masuk

Penyampaian selesai adalah seperti berikut:

Masalah yang dihadapi:

1. Pembolehubah i dan j dalam fungsi set semula gambar mengelirukan;

2. Hasilnya ialah selepas satu gambar ditetapkan semula, selebihnya gambar yang tidak ditetapkan semula ini disekat terutamanya kerana terdapat masalah kecil dengan fungsi set semula.

Pengalaman: Pembolehubah fungsi JS adalah rumit dan logiknya ketat Anda mesti berhati-hati semasa menulis kod

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.