js 네 이 티 브 코드 가 라운드 맵 의 인 스 턴 스 설명 을 실현 합 니 다.

윤 방 도 는 현재 사이트 홈 페이지 에서 가장 흔히 볼 수 있 는 효과 중 하나 로 윤 방 도의 기능 에 대한 요구 가 다 르 고 효과 도 다르다.우 리 는 다양한 방식 으로 이 효 과 를 실현 하 는 것 을 많이 보 았 지만,비교적 번 거 롭 고 이해 하기 어렵 고 호환성 도 좋 지 않다.여기 서 공유 해 보 세 요.js 네 이 티 브 코드 로 라운드 맵 의 흔 한 효 과 를 실현 합 니 다!사고방식 이 비교적 뚜렷 하고 중복 성 이 높 으 며 현재 홈 페이지 에서 돌아 가면 서 실현 되 는 모든 효과 도 거의 포함 되 어 있다!
1.이제 그것 이 어떤 효과 인지 보 겠 습 니 다.그림 을 캡 처 해서 보 여 드 리 겠 습 니 다.

2.우리 가 어떤 필 터 를 하 든 하나의 원칙 을 기억 하고 정적 코드 를 먼저 쓴 다음 에 동적 처 리 를 해 야 합 니 다!
우리 의 라운드 정적 효 과 는 html 와 css 로 이 루어 집 니 다.
1.코드 의 규범 성 을 위해 우 리 는 css 와 js 를 연결 하 는 방식 으로 다음 과 같다.

2.body 의 부분 도 우리 의 규범 적 인 이름 이 필요 합 니 다.

자,여기까지 저희 html 부분 이 끝 났 습 니 다!현재 프레임 워 크 가 구축 되 었 습 니 다.다음 단 계 는 css 스타일 설정 입 니 다.
3.css 스타일 의 설정 은 유연성 이 비교적 크다.왜냐하면 이것 은 우리 의 페이지 에 따라 구체 적 인 설정 과 규정 을 해 야 하기 때문에 아래 의 효 과 는 참고 하 시기 바 랍 니 다!우 리 는 직접 코드 를 올 렸 다.


/*       */
* {
margin:0;
padding:0; 
}
/*   box    */
img {
vertical-align: top;
}
/*  box     */
.css_box {
width: 500px;
height: 265px;
margin:100px auto;
position: relative;
overflow: hidden;
border: 1px solid green;
}
/*      */
.slider {
width: 500px;
height: 200px;
border: 1px solid red;

}
/*           */
.slider-main {
border: 1px solid yellow;
width: 500px;
height: 200px;
}
/*             */
.slider-main-img {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 200px;
}
.slider-main-img img {
width: 100%;
}
/*         */
.slider_ctrl {
text-align: center;
padding-top: 25px;
}
/*     ， html    ，        ，         js         ！*/
/*          */
.slider-ctrl-con {
width: 24px;
height: 20px;
display:inline-block;
background:url(../images/icon.jpg) no-repeat -24px -782px;
margin: 0 5px;
cursor: pointer;
text-indent: -20em;
overflow: hidden;
}
.current {
background-position: -24px -762px;
}

/*       span  */
.slider-ctrl-prev,.slider-ctrl-next {
position: absolute;
top: 50%;
margin-top: -35px;
background:url(../images/icon.jpg) no-repeat 6px top;
width: 30px;
height: 35px;
opacity: 0.8;
cursor: pointer;
}
.slider-ctrl-prev {
left: 0;
}
.slider-ctrl-next {
right: 0;
background-position: -6px -44px;
}
/*css        */

자,이제 우리 의 정적 효 과 는 이미 구축 되 었 습 니 다.우리 가 필요 로 하 는 기능 js 를 실현 하려 면 우리 의 핵심 입 니 다.다음 에 우 리 는 원생 코드 로 그것 을 실현 하 겠 습 니 다.
관건 적 인 기술 1:우리 의 윤 방 도 는 움 직 여야 한다.타이머 가 현재 자동 으로 굴 러 가 는 효 과 를 이용 하여 그림 의 전환 은 레이 어드 와 관련 되 고 마지막 으로 우 리 는 브 라 우 저의 호 환 문 제 를 고려한다!
이렇게 하 는 것 이 우리 js 의 첫걸음 이다.등등,거의 모든 라운드 방송 이 이러한 효 과 를 실현 해 야 하기 때문에,만약 우리 가 다시 하나의 패 키 지 를 만 들 수 있다 면,수시로 호출 할 수 있다 면,그것 은 너무 완벽 한 것 이 아 닙 니까?
그래,우 리 는 이렇게 해 야 해!
나 는 여기 서 animate 라 는 함 수 를 봉 했다.함수 봉 인 된 후에 우 리 는 호출 만 하면 실현 할 수 있다.


//         ，       ！
//       animate   ！obj   ，json json ，fn     ！
function animate(obj,json,fn) 
{ 
clearInterval(obj.timer);//     ，        ！
//           ！
obj.timer = setInterval(function() 
{
var flag = true; //             ！

//for in   ，  json  ！ 
for(var attr in json){ 

var current = 0;
//      ，      ！
if(attr == "opacity")
{
current = parseInt(getStyle(obj,attr)*100);
}
else
{
current = parseInt(getStyle(obj,attr));
}
//   ！
var step = ( json[attr] - current) / 10; 
step = step > 0 ? Math.ceil(step) : Math.floor(step);

//      ！
if(attr == "opacity") 
{ //in         ，                      ，   true！
//                    opacity    ！
if("opacity" in obj.style) 
{
//       ，      
obj.style.opacity = (current + step) /100;
}
else
{ 
//      ，       ！

obj.style.filter = "alpha(opacity = "+(current + step)+")";

}
}

//   ！
else if(attr == "zIndex")
{
obj.style.zIndex = json[attr];
}
else
{
obj.style[attr] = current + step + "px" ;
}
//    !
if(current != json[attr]) 
{
flag = false;
}
}
if(flag) 
{
clearInterval(obj.timer);
//           ！
if(fn) 
{
fn(); 
}
}
},5)
}
//        ！
function getStyle(obj,attr) { 
if(obj.currentStyle) 
{
return obj.currentStyle[attr]; 
}
else
{
return window.getComputedStyle(obj,null)[attr]; 
}
}
//          ！

핵심 기술 2:animate 의 패 키 징 함수 가 있어 서 우 리 를 위해 많은 힘 을 절약 했다.그러나 우 리 는 사용 하지 않 는 요구 에 직면 하여
다른 효과 가 있 군요.구체 적 인 효 과 를 실현 하 겠 습 니 다!
1.우 리 는 js 의 예로부터 변 하지 않 은 첫 번 째 단 계 를 사용 합 니 다.필요 한 모든 요 소 를 얻 는 것 이 바로 DOM 의 작업 입 니 다.