자바 스 크 립 트 가 라운드 맵 효 과 를 실현 하 는 예제

9312 단어 JavaScript윤파 도
효과 전시
1.페이지 캡 처

2.관련 효과

html 페이지
위 챗 독서 에서 책 표지 몇 장 을 찾 아 윤 방 된 그림 을 만 들 었 다.
index.html

<body>
 <div id="container">
  <div class="big_pic_div">
   <div class="prev"></div>
   <div class="next"></div>
   <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="mark_left"></a>
   <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="mark_right"></a>

   <div class="big_pic" style="z-index: 1;"><img src="img/1.jpg" alt=""></div>
   <div class="big_pic"><img src="img/2.jpg" alt=""></div>
   <div class="big_pic"><img src="img/3.jpg" alt=""></div>
   <div class="big_pic"><img src="img/4.jpg" alt=""></div>
   <div class="big_pic"><img src="img/5.jpg" alt=""></div>
   <div class="big_pic"><img src="img/6.jpg" alt=""></div>
  </div>

  <div class="small_pic_div">
   <div class="small_pic" style="filter: opacity(100); opacity: 1;"><img src="img/1.jpg" alt=""></div>
   <div class="small_pic"><img src="img/2.jpg" alt=""></div>
   <div class="small_pic"><img src="img/3.jpg" alt=""></div>
   <div class="small_pic"><img src="img/4.jpg" alt=""></div>
   <div class="small_pic"><img src="img/5.jpg" alt=""></div>
   <div class="small_pic"><img src="img/6.jpg" alt=""></div>
  </div>
 </div>
</body>
css 스타일
grid 레이아웃 의 gap 는 IE 를 호 환 하지 않 아 건 드릴 수 없습니다.
style.css

body {
 margin: 0;
 padding: 0;
 background: skyblue;
}

#container {
 position: relative;
 overflow: hidden;
 width: 350px;
 height: 390px;
 margin: 50px auto 0;
 padding: 0 15px;
 background: goldenrod;
 box-shadow: 2px 1px 5px 1px #666;
}

.mark_left {
 position: absolute;
 left: 0;
 z-index: 3000;
 width: 65px;
 height: 360px;
}

.mark_right {
 position: absolute;
 right: 0;
 z-index: 3000;
 width: 65px;
 height: 360px;
}

.prev {
 position: absolute;
 top: 150px;
 left: 5px;
 z-index: 3001;
 width: 60px;
 height: 60px;
 background: url(img/btn.gif) olivedrab;
 /* transform: translateY(50%); */
 /* alpha   IE8    IE    */
 filter: alpha(opacity=0);
 opacity: 0;
}

.next {
 position: absolute;
 top: 120px;
 right: 5px;
 z-index: 3001;
 width: 60px;
 height: 60px;
 background: url(img/btn.gif) olivedrab;
 background-position-y: 60px;
 transform: translateY(50%);
 filter: alpha(opacity=0);
 opacity: 0;
}

.big_pic_div {
 position: relative;
 width: 250px;
 height: 360px;
 padding: 15px 0;
}

.big_pic {
 position: absolute;
 /* height   0   360px    */
 overflow: hidden;
 height: 360px;
 box-shadow: 1px 1px 2px #777;
}

.small_pic_div {
 display: grid;
 grid-template: repeat(6, 110px) / 80px;
 gap: 15px;
 position: absolute;
 top: 0;
 left: 273px;
 padding: 15px 0;
}

.small_pic {
 height: 110px;
 filter: alpha(opacity = 60);
 opacity: 0.6;
}

.small_pic img {
 width: 80px;
 height: 100%;
}
JavaScript 구현
다 물체 운동 프레임
move.js

//     
function getStyle(obj, name) {
 if (obj.currentStyle) {
  // IE...
  return obj.currentStyle[name];
 } else {
  // Chrome...
  return getComputedStyle(obj, false)[name];
 }
}

function startMove(obj, attr, target) {
 clearInterval(obj.timer);

 obj.timer = setInterval(function () {
  var cur = 0;
				
  	//    
  if (attr == 'opacity') {
   cur = Math.round(parseFloat(getStyle(obj, 'opacity')) * 100);
  } else {
   cur = parseInt(getStyle(obj, attr));
  }

  	//     ，        
  var speed = 0;
  speed = (target - cur) / 6;
  	// 1px     ，1.9px      1px;      ，            target
  speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

  if (cur == target) {
   clearInterval(obj.timer);
  } else {
   //        ，    
   if (attr == 'opacity') {
    obj.style.filter = 'alpha(opacity = ' + (cur + speed) + ')';
    obj.style.opacity = (cur + speed) / 100;
   } else {
    obj.style[attr] = cur + speed + 'px';
   }
  }
 }, 30);

}
윤 방도 기능 실현

window.onload = function () {
 var markLeft = document.getElementsByClassName('mark_left')[0];
 var markRight = document.getElementsByClassName('mark_right')[0];
 var btnPrev = document.getElementsByClassName('prev')[0];
 var btnNext = document.getElementsByClassName('next')[0];
 var smallPicDiv = document.getElementsByClassName('small_pic_div')[0];
 var smallPic = document.getElementsByClassName('small_pic');
 var bigPic = document.getElementsByClassName('big_pic');
 var nowZIndex = 2;
 var now = 0;
 var container = document.getElementById('container');

 //          
 btnPrev.onmouseover = markLeft.onmouseover = function () {
  startMove(btnPrev, 'opacity', 100);
 };
 btnPrev.onmouseout = markLeft.onmouseout = function () {
  startMove(btnPrev, 'opacity', 0);
 };
 btnNext.onmouseover = markRight.onmouseover = function () {
  startMove(btnNext, 'opacity', 100);
 };
 btnNext.onmouseout = markRight.onmouseout = function () {
  startMove(btnNext, 'opacity', 0);
 };

 //      ，      
 for (var i = 0; i < smallPic.length; i++) {

  smallPic[i].index = i;

  smallPic[i].onclick = function () {

   if (now == this.index) return;
   //    now           ，                   
   now = this.index;
   bigPic[this.index].style.zIndex = nowZIndex++;
   bigPic[this.index].style.height = 0;
   startMove(bigPic[this.index], 'height', 360);

   //           ，         
   for (var i = 0; i < smallPic.length; i++) {
    startMove(smallPic[i], 'opacity', 60);
   }
   startMove(smallPic[this.index], 'opacity', 100);
  };

  //          ，    
  smallPic[i].onmouseover = function () {
   startMove(this, 'opacity', 100);
  };
  smallPic[i].onmouseout = function () {
   if (now != this.index) {
    startMove(this, 'opacity', 60);
   }
  };

 }

 // tab   ：         ；    ；       
 function tab() {
  bigPic[now].style.zIndex = nowZIndex++;
  for (var i = 0; i < smallPic.length; i++) {
   startMove(smallPic[i], 'opacity', 60);
  }
  startMove(smallPic[now], 'opacity', 100);

  bigPic[now].style.height = 0;
  startMove(bigPic[now], 'height', 360);

  if (now == 0) {
   startMove(smallPicDiv, 'top', 0);
  } else if (now == smallPic.length - 1) {
   startMove(smallPicDiv, 'top', -(now - 2) * (smallPic[0].offsetHeight + 15));
  } else {
   startMove(smallPicDiv, 'top', -(now - 1) * (smallPic[0].offsetHeight + 15));
  }
 }

 //       
 btnPrev.onclick = function () {
  now--;
  if (now == smallPic.length) {
   now = smallPic.length - 1;
  } else if (now < 0) {
   now = smallPic.length - 1;
   // return;
  }
  tab();
 };
 btnNext.onclick = function () {
  now++;
  if (now == smallPic.length) {
   now = 0;
  }
  tab();
 };
 var timer = setInterval(btnNext.onclick, 3000);
 container.onmouseover = function () {
  clearInterval(timer);
 };
 container.onmouseout = function () {
  timer = setInterval(btnNext.onclick, 3000);
 };
};
이상 은 자 바스 크 립 트 가 라운드 맵 효 과 를 실현 하 는 상세 한 내용 입 니 다.자 바스 크 립 트 라운드 맵 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 해 주 십시오!
Vue 에서$refs 에 대한 탐색 에 대한 간단 한 분석
셸 은 자동 adsl 전 화 를 걸 고 연결 상황 스 크 립 트 공 유 를 감지 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage