search

Home >Web Front-end >JS Tutorial >js piano button wavy image arrangement effect code sharing_javascript skills

js piano button wavy image arrangement effect code sharing_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:42:461467browse

The example in this article describes the js piano button wavy image arrangement effect. Share it with everyone for your reference. The details are as follows:
This is a wavy picture arrangement effect for piano buttons based on JavaScript. The mouse moves on the picture list and the current picture is highlighted. Based on this, the surrounding pictures gradually become smaller, so it feels like fingers are crossing the piano keyboard. feeling.
Running renderings: ----------------------------------------------------------------------------------------------------------------

Tips: If the browser does not work properly, you can try switching the browsing mode.

Note: The alt attribute of the image cannot be missing, otherwise the effect will fail.

The js piano button wave image arrangement effect code shared with you is as follows 



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 piano button wavy image arrangement effect code sharing_javascript skills"><img src="images/2.jpg" alt="js piano button wavy image arrangement effect code sharing_javascript skills" /></a>
 <a href="#" title="js piano button wavy image arrangement effect code sharing_javascript skills"><img src="images/3.jpg" alt="js piano button wavy image arrangement effect code sharing_javascript skills" /></a>
 <a href="#" title="js piano button wavy image arrangement effect code sharing_javascript skills"><img src="images/4.jpg" alt="js piano button wavy image arrangement effect code sharing_javascript skills" /></a>
 <a href="#" title="js piano button wavy image arrangement effect code sharing_javascript skills"><img src="images/5.jpg" alt="js piano button wavy image arrangement effect code sharing_javascript skills" /></a>
 <a href="#" title="js piano button wavy image arrangement effect code sharing_javascript skills"><img src="images/6.jpg" alt="js piano button wavy image arrangement effect code sharing_javascript skills" /></a>
 <a href="#" title="js piano button wavy image arrangement effect code sharing_javascript skills"><img src="images/7.jpg" alt="js piano button wavy image arrangement effect code sharing_javascript skills" /></a>
 <a href="#" title="js piano button wavy image arrangement effect code sharing_javascript skills"><img src="images/8.jpg" alt="js piano button wavy image arrangement effect code sharing_javascript skills" /></a>
 <a href="#" title="js piano button wavy image arrangement effect code sharing_javascript skills"><img src="images/2.jpg" alt="js piano button wavy image arrangement effect code sharing_javascript skills" /></a>
 <a href="#" title="js piano button wavy image arrangement effect code sharing_javascript skills"><img src="images/3.jpg" alt="js piano button wavy image arrangement effect code sharing_javascript skills" /></a>
 <a href="#" title="js piano button wavy image arrangement effect code sharing_javascript skills"><img src="images/4.jpg" alt="js piano button wavy image arrangement effect code sharing_javascript skills" /></a>
 <a href="#" title="js piano button wavy image arrangement effect code sharing_javascript skills"><img src="images/5.jpg" alt="js piano button wavy image arrangement effect code sharing_javascript skills" /></a>
 <a href="#" title="js piano button wavy image arrangement effect code sharing_javascript skills"><img src="images/6.jpg" alt="js piano button wavy image arrangement effect code sharing_javascript skills" /></a>
 <a href="#" title="js piano button wavy image arrangement effect code sharing_javascript skills"><img src="images/7.jpg" alt="js piano button wavy image arrangement effect code sharing_javascript skills" /></a>
 <a href="#" title="js piano button wavy image arrangement effect code sharing_javascript skills"><img src="images/8.jpg" alt="js piano button wavy image arrangement effect code sharing_javascript skills" /></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>
The above is the js piano button wave image arrangement effect code shared with you. I hope you can like it.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery drop-down beautification search form effect code sharing_jqueryNext article：jQuery drop-down beautification search form effect code sharing_jquery

Related articles

See more