cari

Rumah >hujung hadapan web >tutorial js >JS DOM menyedari kemahiran effect_javascript gambar gelongsor tetikus

JS DOM menyedari kemahiran effect_javascript gambar gelongsor tetikus

WBOY
WBOYasal
2016-05-16 15:10:021707semak imbas

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>


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

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

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

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.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Fahami secara ringkas ciri pengkapsulan dan pewarisan dalam pengetahuan JavaScript_BasicArtikel seterusnya：Fahami secara ringkas ciri pengkapsulan dan pewarisan dalam pengetahuan JavaScript_Basic

Artikel berkaitan

Lihat lagi