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

本文实例讲述了js钢琴按钮波浪式图片排列效果。分享给大家供大家参考。具体如下：
这是一款基于javascript实现的钢琴按钮波浪式图片排列效果，鼠标在图片列表上移动，当前图片高亮显示，以此为根基点，周围的图片逐渐变小，所以有种手指划过钢琴键盘的感觉。
运行效果图：                                -------------------查看效果-------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。

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

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="我们"><img src="images/2.jpg" alt="我们" /></a>
 <a href="#" title="我们"><img src="images/3.jpg" alt="我们" /></a>
 <a href="#" title="我们"><img src="images/4.jpg" alt="我们" /></a>
 <a href="#" title="我们"><img src="images/5.jpg" alt="我们" /></a>
 <a href="#" title="我们"><img src="images/6.jpg" alt="我们" /></a>
 <a href="#" title="我们"><img src="images/7.jpg" alt="我们" /></a>
 <a href="#" title="我们"><img src="images/8.jpg" alt="我们" /></a>
 <a href="#" title="我们"><img src="images/2.jpg" alt="我们" /></a>
 <a href="#" title="我们"><img src="images/3.jpg" alt="我们" /></a>
 <a href="#" title="我们"><img src="images/4.jpg" alt="我们" /></a>
 <a href="#" title="我们"><img src="images/5.jpg" alt="我们" /></a>
 <a href="#" title="我们"><img src="images/6.jpg" alt="我们" /></a>
 <a href="#" title="我们"><img src="images/7.jpg" alt="我们" /></a>
 <a href="#" title="我们"><img src="images/8.jpg" alt="我们" /></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>

以上就是为大家分享的js钢琴按钮波浪式图片排列效果代码，希望大家可以喜欢。

赞 (0)

相关推荐

  • js正文内容高亮效果的实现方法

    复制代码 代码如下: //高亮显示搜索到的关键字function HeightLight(Keyword){ //文本选择器 var TextRange; //是否找到 var Found=false; //找到的次数 var Count = 0; TextRange = document.body.createTextRange(); Found = TextRange.findText(Keyword); if (Found) {  Count++; } while (Found &&

  • JS+CSS实现表格高亮的方法

    JS+CSS实现表格高亮的方法

    本文实例讲述了JS+CSS实现表格高亮的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript+CSS实现表格高亮的功能,实际上类似于隔行换色的效果,说法不同而已,只不过本效果是在鼠标移上时触发,移出结束. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran

  • 用JS将搜索的关键字高亮显示实现代码

    用JS让文章内容指定的关键字加亮 是这样的.. 现在有这些关键字:美容,生活,购物当在文章里头出现这些关键字,就把它加亮显示.. 文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...不知道怎样来实现这样的功能啊?特此求助 复制代码 代码如下: <script language="JavaScript">function highlight(key) { var key = key.split('|'); for (var i=0; i<key.

  • js带缩略图的图片轮播效果代码分享

    js带缩略图的图片轮播效果代码分享

    本文实例讲述了js带缩略图的图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于javaScript实现带缩略图的图片轮播特效代码,实现过程很简单. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link href="css/jb51.net.css" rel="stylesheet" type=&q

  • js淡入淡出的图片轮播效果代码分享

    js淡入淡出的图片轮播效果代码分享

    本文实例讲述了淡入淡出的js图片轮播效果代码.分享给大家供大家参考.具体如下: 运行效果图:----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js图片轮播效果代码如下 <html> <head> <title>js图片轮播效果代码</title> <style type="text/css"> table i

  • js图片翻书效果代码分享

    js图片翻书效果代码分享

    这是一款基于javascript实现图片翻书效果代码,图片可以从左右两个方向进行切换,用户还可以自定义对应图片的标题与文字说明,是一款非常实用的图片特效源码. 七夕情人节也可以是表白的神器,放一些回忆的照片,还可以永久保存,是不是很有心意,推荐给大家,有需要的小伙伴可以学习学习. 运行效果图: 大家可以先运行一下    -------------------------------------效果运行----------------------------------------- 为大家分享的

  • js 全兼容可高亮二级缓冲折叠菜单

    js 全兼容可高亮二级缓冲折叠菜单

    在后台或OA系统中最常用到的布局往往是一个全屏布局,一般都是上中下三行两列布局,页头.页脚.左侧菜单加一个右侧ifame框架页.所以那种带折叠的二级菜单是会经常使用到的,本例便是实现这样一种比较通用的全兼容可高亮二级缓冲折叠菜单. 特点: 全兼容,浏览器测试:IE5.5.IE6.IE7.IE8.FF3.0.谷歌.Safari 4.0.Opera9.0. Html结构优雅简洁,无多余标签,利于程序循环输出. 样式与结构分离,你可以在样式表中修改不同的风格. 当前选中项高亮状态,一级菜单和二级菜单都

  • js 玩转正则表达式之语法高亮

    学了几天正则,差不多该总结整理写成果了,之前就想写语法高亮匹配来着,不过水平不够,看着例子都不理解. 那么我们来分析下两位大神 次碳酸钴 和 Barret Lee 语法高亮实现. 先说 Barret Lee 的这篇 <几个小例子教你如何实现正则表达式highlight高亮> 之前看的时候只觉的神奇,特别是下面那个一步一步分开匹配的例子,更是霸气测漏,不过作者也说了,分开只是为了演示方便,可以很直观的看到这一步匹配了什么,不然一步到位匹配完成,你都不知道发生了什么就处理完毕了.来看下他的正则 复

  • JS实现3D图片旋转展示效果代码

    JS实现3D图片旋转展示效果代码

    本文实例讲述了JS实现3D图片旋转展示效果代码.分享给大家供大家参考.具体如下: 这是一段JavaScript代码,围绕成3D模型样式的JavaScript图片旋转展示代码,这里为了演示方便,将图片替换成了数字,预留出了图片的位置,这样速度快些,会HTML的朋友都知道用时候该怎么做.本图片旋转需要手功控制,每点击一下,图片旋转一次,很方便. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3d-pic-scroll-show-style-c

  • js鼠标点击图片切换效果实现代码

    js鼠标点击图片切换效果实现代码

    本文实例讲述了js鼠标点击图片切换效果实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: html代码: <div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:

  • JS实现图片高亮展示效果实例

    本文实例讲述了JS实现图片高亮展示效果的方法.分享给大家供大家参考,具体如下: 昨天朋友让我帮着做个图片高亮展示的效果,虽然不难,不过满有创意的: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w

  • js鼠标点击图片切换效果代码分享

    js鼠标点击图片切换效果代码分享

    本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不断切换效果. 运行效果图:                                      -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js鼠标点击图片切换效果代码如下 <hea

随机推荐