suchen

Heim >Web-Frontend >js-Tutorial >js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten

js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:42:461466Durchsuche

Das Beispiel in diesem Artikel beschreibt den wellenförmigen Bildanordnungseffekt der js-Klaviertaste. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Dies ist ein wellenförmiger Bildanordnungseffekt für Klaviertasten, der auf JavaScript basiert. Die Maus bewegt sich über die Bildliste und das aktuelle Bild wird dadurch hervorgehoben. Dadurch werden die umliegenden Bilder allmählich kleiner, sodass es sich anfühlt, als würden die Finger über die Klaviertastatur streichen. Gefühl.
Laufende Renderings: ------------------ -------------------------------------------------- ---------------

Tipps: Wenn der Browser nicht richtig funktioniert, können Sie versuchen, den Browsermodus zu wechseln.

Hinweis: Das Alt-Attribut des Bildes darf nicht fehlen, da sonst der Effekt fehlschlägt.

Der mit Ihnen geteilte js Piano Button Wave-Bildanordnungseffektcode lautet wie folgt 



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 Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten"><img src="images/2.jpg" alt="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten" /></a>
 <a href="#" title="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten"><img src="images/3.jpg" alt="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten" /></a>
 <a href="#" title="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten"><img src="images/4.jpg" alt="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten" /></a>
 <a href="#" title="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten"><img src="images/5.jpg" alt="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten" /></a>
 <a href="#" title="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten"><img src="images/6.jpg" alt="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten" /></a>
 <a href="#" title="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten"><img src="images/7.jpg" alt="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten" /></a>
 <a href="#" title="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten"><img src="images/8.jpg" alt="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten" /></a>
 <a href="#" title="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten"><img src="images/2.jpg" alt="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten" /></a>
 <a href="#" title="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten"><img src="images/3.jpg" alt="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten" /></a>
 <a href="#" title="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten"><img src="images/4.jpg" alt="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten" /></a>
 <a href="#" title="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten"><img src="images/5.jpg" alt="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten" /></a>
 <a href="#" title="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten"><img src="images/6.jpg" alt="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten" /></a>
 <a href="#" title="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten"><img src="images/7.jpg" alt="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten" /></a>
 <a href="#" title="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten"><img src="images/8.jpg" alt="js Klaviertaste wellenförmiger Bildanordnungseffektcode Sharing_Javascript-Fähigkeiten" /></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>
Das Obige ist der mit Ihnen geteilte js-Piano-Button-Wave-Bildeffektcode. Ich hoffe, er gefällt Ihnen.
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery-Dropdown-Verschönerungssuchformular-Effektcode-sharing_jqueryNächster Artikel：jQuery-Dropdown-Verschönerungssuchformular-Effektcode-sharing_jquery

In Verbindung stehende Artikel

Mehr sehen