ホームページ >ウェブフロントエンド >jsチュートリアル >jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル
jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル
- WBOYオリジナル
- 2016-05-16 15:42:461440ブラウズ
この記事の例では、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="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル"><img src="images/2.jpg" alt="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル" /></a>
<a href="#" title="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル"><img src="images/3.jpg" alt="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル" /></a>
<a href="#" title="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル"><img src="images/4.jpg" alt="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル" /></a>
<a href="#" title="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル"><img src="images/5.jpg" alt="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル" /></a>
<a href="#" title="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル"><img src="images/6.jpg" alt="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル" /></a>
<a href="#" title="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル"><img src="images/7.jpg" alt="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル" /></a>
<a href="#" title="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル"><img src="images/8.jpg" alt="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル" /></a>
<a href="#" title="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル"><img src="images/2.jpg" alt="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル" /></a>
<a href="#" title="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル"><img src="images/3.jpg" alt="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル" /></a>
<a href="#" title="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル"><img src="images/4.jpg" alt="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル" /></a>
<a href="#" title="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル"><img src="images/5.jpg" alt="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル" /></a>
<a href="#" title="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル"><img src="images/6.jpg" alt="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル" /></a>
<a href="#" title="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル"><img src="images/7.jpg" alt="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル" /></a>
<a href="#" title="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル"><img src="images/8.jpg" alt="jsピアノボタン波状画像配置エフェクトコード共有_javascriptスキル" /></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ピアノボタンの波画像配置エフェクトコードです。気に入っていただければ幸いです。 声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。