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


Posted in Javascript onAugust 26, 2015

本文实例讲述了js钢琴按钮波浪式图片排列效果。分享给大家供大家参考。具体如下:

这是一款基于javascript实现的钢琴按钮波浪式图片排列效果,鼠标在图片列表上移动,当前图片高亮显示,以此为根基点,周围的图片逐渐变小,所以有种手指划过钢琴键盘的感觉。

运行效果图:                                -------------------查看效果-------------------

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

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

注意:图片的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钢琴按钮波浪式图片排列效果代码,希望大家可以喜欢。

Javascript 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
javascript面向对象编程代码
Dec 19 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
jquery分割字符串的方法
Jun 24 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
利用JS制作万年历的方法
Aug 16 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
Vue+ElementUI table实现表格分页
Dec 14 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 Javascript
javascript中alert()与console.log()的区别
Aug 26 #Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 #Javascript
基于jQuery实现的QQ表情插件
Aug 25 #Javascript
js中javascript:void(0) 真正含义
Nov 05 #Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 #Javascript
js焦点文字滚动效果代码分享
Aug 25 #Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 #Javascript
You might like
PHP运行模式的深入理解
2013/06/03 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python list中append()与extend()用法分享
2013/03/24 Python
Python下的twisted框架入门指引
2015/04/15 Python
python实现在sqlite动态创建表的方法
2015/05/08 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
python hough变换检测直线的实现方法
2019/07/12 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
幼儿园门卫岗位职责范本
2014/07/02 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
学生个人评语大全
2015/01/04 职场文书
爱国主义主题班会
2015/08/14 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
MySQL分区表管理命令汇总
2022/03/21 MySQL