recherche

Maison >interface Web >js tutoriel >js bouton de piano disposition d'image ondulée effet code compétences de partage_javascript

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

WBOY
WBOYoriginal
2016-05-16 15:42:461467parcourir

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>
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.
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jQuery liste déroulante d'embellissement formulaire de recherche effet code Sharing_jqueryArticle suivant：jQuery liste déroulante d'embellissement formulaire de recherche effet code Sharing_jquery

Articles Liés

Voir plus