This article describes the JS piano button waves picture arrangement effect. Share to everyone for your reference. Specifically as follows:
This is based on JavaScript implementation of the piano button waves picture arrangement effect, the mouse in the picture list move, the current picture highlighted, to this as the basis, the surrounding picture gradually become small, so have a finger across the piano keyboard feeling.
Run Effects chart:-------------------View Effects-------------------
Tip: If you are not running properly in your browser, you can try switching browsing mode.
Note: The alt attribute of the picture cannot be missing, or it will cause the effect to fail.
For everyone to share the JS piano button waves picture arrangement effect code as follows
head> <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/> <title>js piano button waves picture arrangement effect </title> <style> #bookrack {width:1200px; margin:100px a UTO;
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); p adding:5px; top:30px; left:0;
#bookrack span Big {color:red; font-size:14px}
#bookrack img {width:100%; height:100%; display:block; border:0;} </style>
Above is for everyone to share the JS piano button waves picture arrangement Effect code, I hope you can like.