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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
