javascript_javascript 기술로 캡슐화된 실용적인 포커스 맵 전환 효과
- WBOY원래의
- 2016-05-16 18:23:061154검색
그래서 원래 기반으로 변경하고 캡슐화하고 추가 최적화를 수행하여 동일한 페이지에서 이러한 효과를 여러 개 사용할 수 있습니다. xhtm 및 css에는 변경 사항이 없습니다. 관심 있는 친구들은 이전 코드를 비교하여 만들 수 있습니다. 이해하고 익히기가 더 쉽습니다.
질문이나 제안사항이 있으면 회신해 주세요＠&＠
1.xhtml
코드 복사 코드는 다음과 같습니다.
코드 복사
코드는 다음과 같습니다.
.jfocus{width:300px;height:300px;border:#ccc 1px solid;ground-color:#FFF;}#jfocuspic{ FILTER: progid:DXImageTransform.Microsoft.Fade (duration=0.5,overlap=1.0 );width:300px;height:200px;overflow:hidden;}#jfocuspic a{display:none; text-align: center; 라인 높이:200px; 배경색:#CCC; 커서:포인터;}#jfocusnum li{cursor:pointer;height:50px; 디스플레이:인라인 블록; 색상:#999 1px 솔리드; 배경 색상:#CCC; 왼쪽; 여백:0 5px; f00; 글꼴 무게:굵게; 테두리:#900 1px 솔리드; 글꼴 크기:14px;}3.js
코드는 다음과 같습니다.
function $(id,tag){var re=(id&&typeof id!="string" ) ?id:document.getElementById(id);if(!tag){return re;}else{return re.getElementsByTagName(tag);}}//요소 객체 가져오기function FocusImg(focbox,picobj,numbox, numobj , 시간){var n=0;var imglist=$(focbox,picobj);var Num=$(numbox,numobj);function setBg(value){for( var i=0;i함수; plays(value ){
if(document.all) $(focbox).filters[0].Apply();//Filter
for(i=0;iif(document.all) $(focbox).filters[0]. play( );
}
function mouse(n){//마우스가 지나갔다가 떠난 후 이벤트를 설정합니다.
for(var i=0;i (함수(n){
Num[i].onmouseover=imglist[i].onmouseover=function(){clearInterval(autoStart);Mea(n);}
Num[i].onmouseout=imglist[ i] .onmouseout=function(){setAuto();}
})(i) );plays(value);}
function auto(){n ;if(n>Num.length-1 )n=0; Mea(n);}
function setAuto(){autoStart=setInterval( function(){auto();},time)}
setAuto();
}
xhtml 다음에 함수를 호출하고 개체 매개변수를 전달합니다.
전체 데모 코드:
for(i=0;i
}
function mouse(n){//마우스가 지나갔다가 떠난 후 이벤트를 설정합니다.
for(var i=0;i
Num[i].onmouseover=imglist[i].onmouseover=function(){clearInterval(autoStart);Mea(n);}
Num[i].onmouseout=imglist[ i] .onmouseout=function(){setAuto();}
})(i) );plays(value);}
function auto(){n ;if(n>Num.length-1 )n=0; Mea(n);}
function setAuto(){autoStart=setInterval( function(){auto();},time)}
setAuto();
}
xhtml 다음에 함수를 호출하고 개체 매개변수를 전달합니다.
전체 데모 코드:
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.