js钢琴按钮波浪图片排列效果代码分享

本文用波形图说明js钢琴按钮的排列效果。分享给大家参考。具体如下：这是一个基于javascript的钢琴按键的波浪画面排列效果。鼠标在图片列表上移动，当前图片高亮显示。基于此，周围的画面逐渐变小，所以有一种手指划过钢琴键盘的感觉。操作效果图：检查效果。

提示：如果浏览器工作不正常，可以尝试切换浏览模式。

注意：图片的alt属性不能缺失，否则效果会失败。为大家分享的js钢琴按钮波浪图排列效果代码如下

head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/titlejs钢琴按钮波浪式图片排列效果/title style #书架{宽度： 1200 pxmargin:100px汽车飞越：隐藏；} #书架{ text-align :居中；文本装饰：无；font-size : 12px} #书架跨度{ display:无绝对位置：color: # fff背景色： # 000;background: rgba(0，0，0，0.5)；padd : 5pxtop : 30pxleft : 0；} #书架跨度大{ color : red font-size : 14px；} #书架img {宽度： 100%；高度： 100%;显示器：块；边框： 0；}/风格/头像dy！-代码部分begin-div id='书架' a href=' # ' title='我们img src=' http : images/2。jpg ' alt='我们//a a href='#' title='我们img src=' http : images/3。jpg ' alt='我们//a a href='#' title='我们img src=' http : images/4。jpg ' alt='我们//a a href='#' title='我们img src=' http : images/5。jpg ' alt='我们//a a href='#' title='我们img src=' http : images/6。jpg ' alt='我们//a a href='#' title='我们img src=' http : images/7。jpg ' alt='我们//a a href='#' title='我们img src=' http : images/8。jpg ' alt='我们//a a href='#' title='我们img src=' http : images/2。jpg ' alt='我们//a a href='#' title='我们img src=' http : images/3。jpg ' alt='我们//a a href='#' title='我们img src=' http : images/4。jpg ' alt='我们//a a href='#' title='我们img src=' http : images/5。jpg ' alt='我们//a a href='#' title='我们img src=' http : images/6。jpg ' alt='我们//a a href='#' title='我们img src=' http : images/7 . jpg ' alt='我们//a a href='#' title='我们img src=' http : images/8。jpg ' alt='我们//a/divscriptvar Bookrack=function(a，b，c，e){ this。比例尺=e | | 0.1this.x=b | | 120this.y=c | | 160this。边框=2；这个。init(a)；这个。exec(数学。天花板(数学。random()*这个。imgs。长度))}；书架。prototype={ init :函数(a){ this。宽度=a .客户端宽度-2 *这个。x *这个。规模；风格。position=“相对”；风格。高度=这个。y ' px这个。imgs=a . getelementsbytagname(' a ')；var b=this，c=document.createElement('span ')，e，d；this.each(函数(a，g){ a . style。位置='绝对'；风格。底部=' 0 '；a.style.border=this.border 'px纯灰色；风格。左=这个。宽度*(g/this)。imgs。长度)2 *这个。边框“px”；a.setAttribute('dir '，g)；d=a . getelementsbytagname(' img ')[0].getAttribute('alt ').拆分(' | ');e=c.cloneNode(！0);e . inner html=a . GetAttribute(' title ')；a .附录(e );a . onmouseover=function(){ b . exec(this。GetAttribute(' dir ')} })})，每个：函数(a){ for(var b=0，c；c=这个。imgs[b]；)a.call(this，c，b，this.imgs.length) }，color:函数(a) { a=(~~ (255 * a)).toString(16)；2a .长度(a=' 0 ' a)；a=a.substr(0，2)；返回#' a a a }，exec:函数(a) { this .每个(函数(b，c，e，d，f){ b . getelementsbytagname(' span ')[0]。风格。显示='无'；c==a(b . getelementsbytagname(' span ')[0]。风格。display=' block ')；d=Math.min(c/a，a/c)；f=数学罪恶(90 *(数学/180)* d)*(1-这个尺度);风格。zindex=数学。天花板(1E 4 * f)；风格。边框颜色=这个。给这个上色。规模)；风格。宽度=这个。x *(f这个。比例尺)-2 *这个。边框' px；风格。高度=这个。这个。比例尺)-2 *这个。边框' px；风格。左边距=这个。x * f/-2 ' px ' })} }；新书架(文档。getelementbyid('书架')，120，160)；/脚本！-代码部分end/body/html以上就是为大家分享的射流研究…钢琴按钮波浪式图片排列效果代码，希望大家可以喜欢。