JS钢琴按键排列效果代码共享

本文介绍了JS钢琴按钮图案排列的效果，供大家分享，供大家参考：

这是一个基于javaｓｃｒｉｐｔ的钢琴按钮，实现了图片排列的效果。鼠标移动到图片列表上，当前图片被高亮显示。这是根点，周围的图画越来越小，所以有手指穿过钢琴键盘的感觉。

兼营：-------------------查看结果-------------------效果图
提示：如果不能在浏览器中正常运行，可以尝试切换浏览模式。

注意：图片的alt属性不能丢失，否则效果会失败。

分享JS钢琴按钮的图片排列效果代码如下

头>

JS钢琴按钮的图片排列效果

#书架{宽度：1200px；保证金：100px汽车；溢出：隐藏；}
#书架一{文本对齐：中心；文字装饰：无；字体大小：12px；}
#书架跨度{显示：无；位置：绝对的；颜色：# FFF；背景颜色：# 000；背景：背景：（0, 0, 0，0.5）；玉；玉；0；}
#书架跨度大{颜色：红色；字体大小：14px；}
#书架img {宽度：100%；高度：100%；显示：块；边界：0；}

VaR书架=功能（A，B，C，E）{
this.scale = E | | 0.1；
这| | 120 x = b；
这| | 160 Y = C；
this.border = 2；
This.init（一）；
This.exec（math.ceil（Math.random（）*。IMGS。长度））
}；
bookrack.prototype = { {
init：函数（a）{
this.width = a.clientwidth - 2 * x * this.scale；
a.style.position =相对；
a.style.height =这。Y +PX；
this.imgs = a.getelementsbytagname（）；
var =，
C = document.createelement（跨越），
E，
D；
this.each（功能（A，G）{
a.style.position =绝对；
a.style.bottom =0；
a.style.border = this.border +PX实心灰色；
a.style.left = this.width *（G /本。IMGS。长度）+ 2 * this.border +PX；
a.setattribute（目录
a a.getelementsbytagname（IMG）{ 0 }。getAttribute（ALT）。分裂（| ）；
E = c.clonenode（！0）；
e.innerhtml = a.getattribute（标题）；
a.appendchild（E）；
a.onmouseover =函数（）{
B.exec（this.getattribute（目录））
}
}）
}，
每个：函数（a）{
对于（var b＝0），
C；C =这。IMGS { B + + }；）a.call（，C，B，这。IMGS。长度）
}，
颜色：函数（a）{
=（~ ~（~（255 *）），ToString（16）；
2 > a.length（=0+）；
a a.substr（0, 2）；
#回报+ + +
}，
函数（a）{
this.each（功能（B，C，D，E，F）{
b.getelementsbytagname（跨越）{ 0 }。style.display =没有；
C = A（b.getelementsbytagname（跨越）{ 0 }。style.display =块）；
a Math.min（C / A，A / C）；
math.sin（F = 90×（math.pi / 180）* D）*（1 -这个尺度）；
b.style.zindex = math.ceil（1E4 * F）；
b.style.bordercolor = this.color（F +这个尺度）；
b.style.width =，X *（F +这个规模）2×this.border +PX；
b.style.height =这。Y *（F +这个规模）2×this.border +PX；
b.style.marginleft =，X F / 2 +PX
}）
}
}；
新书架（document.getelementbyid（'bookrack '），120, 160）；
以上是分享JS钢琴按钮的图片排列效果的代码，希望大家能喜欢。