집 > 기사 > 웹 프론트엔드 > js 피아노 버튼 물결 모양 이미지 배열 효과 코드 공유_javascript 기술

js 피아노 버튼 물결 모양 이미지 배열 효과 코드 공유_javascript 기술

WBOY원래의: 2016-05-16 15:42:461401검색

이 글의 예시에서는 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 피아노 버튼 웨이브 이미지 배열 효과 코드입니다.

성명：

이전 기사：jQuery 드롭다운 미화 검색 양식 효과 코드 Sharing_jquery다음 기사：jQuery 드롭다운 미화 검색 양식 효과 코드 Sharing_jquery

js 피아노 버튼 물결 모양 이미지 배열 효과 코드 공유_javascript 기술

관련 기사