js bouton de piano disposition d'image ondulée effet code compétences de partage

js bouton de piano disposition d'image ondulée effet code compétences de partage_javascript

WBOY

Libérer： 2016-05-16 15:42:46

original

1470 Les gens l'ont consulté

L'exemple de cet article décrit l'effet d'arrangement d'image ondulé du bouton de piano js. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Il s'agit d'un effet d'arrangement d'images ondulées pour les boutons du piano basé sur JavaScript. La souris se déplace sur la liste d'images et l'image actuelle est mise en surbrillance, les images environnantes deviennent progressivement plus petites, ce qui donne l'impression que les doigts croisent le clavier du piano. sentiment.
Exécution des rendus : ----------------------------------------------- -------------------------------------------------- ---------------

Conseils : Si le navigateur ne fonctionne pas correctement, vous pouvez essayer de changer de mode de navigation.

Remarque : l'attribut alt de l'image ne peut pas manquer, sinon l'effet échouera.

Le code d'effet d'arrangement d'image d'onde de bouton de piano js partagé avec vous est le suivant

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 bouton de piano disposition dimage ondulée effet code compétences de partage_javascript"><img src="images/2.jpg" alt="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript" /></a>
 <a href="#" title="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript"><img src="images/3.jpg" alt="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript" /></a>
 <a href="#" title="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript"><img src="images/4.jpg" alt="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript" /></a>
 <a href="#" title="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript"><img src="images/5.jpg" alt="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript" /></a>
 <a href="#" title="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript"><img src="images/6.jpg" alt="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript" /></a>
 <a href="#" title="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript"><img src="images/7.jpg" alt="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript" /></a>
 <a href="#" title="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript"><img src="images/8.jpg" alt="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript" /></a>
 <a href="#" title="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript"><img src="images/2.jpg" alt="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript" /></a>
 <a href="#" title="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript"><img src="images/3.jpg" alt="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript" /></a>
 <a href="#" title="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript"><img src="images/4.jpg" alt="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript" /></a>
 <a href="#" title="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript"><img src="images/5.jpg" alt="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript" /></a>
 <a href="#" title="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript"><img src="images/6.jpg" alt="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript" /></a>
 <a href="#" title="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript"><img src="images/7.jpg" alt="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript" /></a>
 <a href="#" title="js bouton de piano disposition dimage ondulée effet code compétences de partage_javascript"><img src="images/8.jpg" alt="js bouton de piano disposition dimage ondulée effet code compétences de partage_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>

Copier après la connexion

Ce qui précède est le code d'effet d'arrangement d'image d'onde de bouton de piano js partagé avec vous. J'espère que vous pourrez l'aimer.