js 피아노 버튼 물결 모양 이미지 배열 효과 코드 공유_javascript 기술
- WBOY원래의
- 2016-05-16 15:42:461434검색
이 글의 예시에서는 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="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으로 문의하세요.