js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript-tutorial js-php.cn

Contoh dalam artikel ini menerangkan kesan susunan imej beralun butang piano js. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Ini ialah kesan susunan gambar bergelombang untuk butang piano berdasarkan JavaScript Tetikus bergerak pada senarai gambar dan gambar semasa diserlahkan Berdasarkan ini, gambar di sekeliling beransur-ansur menjadi lebih kecil, jadi ia terasa seperti jari melintasi papan kekunci piano. perasaan.
Penyampaian berjalan: ------------------------------------------------- ------------------------------------------------- ---------------

Petua: Jika penyemak imbas tidak berfungsi dengan betul, anda boleh cuba menukar mod penyemakan imbas.

Nota: Atribut alt imej tidak boleh hilang, jika tidak, kesannya akan gagal.

Kod kesan susunan imej gelombang butang piano js yang dikongsi dengan anda adalah seperti berikut

head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>js钢琴按钮波浪式图片排列效果</title>
 <style>
 #bookrack { width: 1200px; margin:100px auto; overflow:hidden;} 
 #bookrack a { text-align: center; text-decoration: none; font-size: 12px; } 
 #bookrack span { display: none; position: absolute; color: #fff; background-color: #000; background: rgba(0, 0, 0, 0.5); padding: 5px; top: 30px; left: 0; } 
 #bookrack span big { color: red; font-size: 14px; } 
 #bookrack img { width: 100%; height: 100%; display: block; border: 0; }
 </style>
</head>
<body>
 
<!--代码部分begin-->
<div id="bookrack">
 <a href="#" title="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript"><img src="/static/imghw/default1.png"  data-src="images/2.jpg"  class="lazy" alt="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript" /></a>
 <a href="#" title="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript"><img src="/static/imghw/default1.png"  data-src="images/3.jpg"  class="lazy" alt="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript" /></a>
 <a href="#" title="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript"><img src="/static/imghw/default1.png"  data-src="images/4.jpg"  class="lazy" alt="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript" /></a>
 <a href="#" title="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript"><img src="/static/imghw/default1.png"  data-src="images/5.jpg"  class="lazy" alt="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript" /></a>
 <a href="#" title="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript"><img src="/static/imghw/default1.png"  data-src="images/6.jpg"  class="lazy" alt="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript" /></a>
 <a href="#" title="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript"><img src="/static/imghw/default1.png"  data-src="images/7.jpg"  class="lazy" alt="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript" /></a>
 <a href="#" title="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript"><img src="/static/imghw/default1.png"  data-src="images/8.jpg"  class="lazy" alt="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript" /></a>
 <a href="#" title="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript"><img src="/static/imghw/default1.png"  data-src="images/2.jpg"  class="lazy" alt="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript" /></a>
 <a href="#" title="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript"><img src="/static/imghw/default1.png"  data-src="images/3.jpg"  class="lazy" alt="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript" /></a>
 <a href="#" title="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript"><img src="/static/imghw/default1.png"  data-src="images/4.jpg"  class="lazy" alt="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript" /></a>
 <a href="#" title="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript"><img src="/static/imghw/default1.png"  data-src="images/5.jpg"  class="lazy" alt="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript" /></a>
 <a href="#" title="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript"><img src="/static/imghw/default1.png"  data-src="images/6.jpg"  class="lazy" alt="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript" /></a>
 <a href="#" title="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript"><img src="/static/imghw/default1.png"  data-src="images/7.jpg"  class="lazy" alt="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript" /></a>
 <a href="#" title="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript"><img src="/static/imghw/default1.png"  data-src="images/8.jpg"  class="lazy" alt="js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript" /></a>
  
</div>
<script>
var Bookrack = function(a, b, c, e) {
 this.scale = e || 0.1;
 this.x = b || 120;
 this.y = c || 160;
 this.border = 2;
 this.init(a);
 this.exec(Math.ceil(Math.random() * this.imgs.length))
};
Bookrack.prototype = {
 init: function(a) {
 this.width = a.clientWidth - 2 * this.x * this.scale;
 a.style.position = "relative";
 a.style.height = this.y + "px";
 this.imgs = a.getElementsByTagName("a");
 var b = this,
 c = document.createElement("span"),
 e,
 d;
 this.each(function(a, g) {
  a.style.position = "absolute";
  a.style.bottom = "0";
  a.style.border = this.border + "px solid gray";
  a.style.left = this.width * (g / this.imgs.length) + 2 * this.border + "px";
  a.setAttribute("dir", g);
  d = a.getElementsByTagName("img")[0].getAttribute("alt").split("|");
  e = c.cloneNode(!0);
  e.innerHTML = a.getAttribute("title");
  a.appendChild(e);
  a.onmouseover = function() {
  b.exec(this.getAttribute("dir"))
  }
 })
 },
 each: function(a) {
 for (var b = 0,
 c; c = this.imgs[b++];) a.call(this, c, b, this.imgs.length)
 },
 color: function(a) {
 a = (~~ (255 * a)).toString(16);
 2 > a.length && (a = "0" + a);
 a = a.substr(0, 2);
 return "#" + a + a + a
 },
 exec: function(a) {
 this.each(function(b, c, e, d, f) {
  b.getElementsByTagName("span")[0].style.display = "none";
  c == a && (b.getElementsByTagName("span")[0].style.display = "block");
  d = Math.min(c / a, a / c);
  f = Math.sin(90 * (Math.PI / 180) * d) * (1 - this.scale);
  b.style.zIndex = Math.ceil(1E4 * f);
  b.style.borderColor = this.color(f + this.scale);
  b.style.width = this.x * (f + this.scale) - 2 * this.border + "px";
  b.style.height = this.y * (f + this.scale) - 2 * this.border + "px";
  b.style.marginLeft = this.x * f / -2 + "px"
 })
 }
};
new Bookrack(document.getElementById('bookrack'), 120, 160);
</script>
<!--代码部分end-->
 
</body>
</html>

Salin selepas log masuk

Di atas ialah kod kesan susunan imej butang piano js yang dikongsikan dengan anda.