cari

Rumah >hujung hadapan web >tutorial js >js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript

js butang piano beralun susunan imej kesan perkongsian kod_kemahiran javascript

WBOY
WBOYasal
2016-05-16 15:42:461467semak imbas

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="images/2.jpg" 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="images/3.jpg" 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="images/4.jpg" 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="images/5.jpg" 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="images/6.jpg" 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="images/7.jpg" 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="images/8.jpg" 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="images/2.jpg" 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="images/3.jpg" 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="images/4.jpg" 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="images/5.jpg" 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="images/6.jpg" 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="images/7.jpg" 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="images/8.jpg" 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>
Di atas ialah kod kesan susunan imej butang piano js yang dikongsikan dengan anda.
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：jQuery drop-down mencantikkan borang kesan kesan kod sharing_jqueryArtikel seterusnya：jQuery drop-down mencantikkan borang kesan kesan kod sharing_jquery

Artikel berkaitan

Lihat lagi