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 相关文章推荐
js判断undefined变量类型使用typeof
Jun 03 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
浅谈angular懒加载的一些坑
Aug 20 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 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中常用编辑器推荐
2007/01/02 PHP
php 301转向实现代码
2008/09/18 PHP
Destoon模板制作简明教程
2014/06/20 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
船舶专业个人求职信范文
2014/01/02 职场文书
导游个人求职信
2014/04/25 职场文书
重阳节慰问信
2015/02/15 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
详解Spring事件发布与监听机制
2021/06/30 Java/Android