javascript_javascript 기술로 캡슐화된 실용적인 포커스 맵 전환 효과-JS 튜토리얼-php.cn

javascript_javascript 기술로 캡슐화된 실용적인 포커스 맵 전환 효과

WBOY

풀어 주다： 2016-05-16 18:23:06

원래의

1119명이 탐색했습니다.

그래서 원래 기반으로 변경하고 캡슐화하고 추가 최적화를 수행하여 동일한 페이지에서 이러한 효과를 여러 개 사용할 수 있습니다. xhtm 및 css에는 변경 사항이 없습니다. 관심 있는 친구들은 이전 코드를 비교하여 만들 수 있습니다. 이해하고 익히기가 더 쉽습니다.
질문이나 제안사항이 있으면 회신해 주세요＠&＠
1.xhtml

코드 복사 코드는 다음과 같습니다.

;/a & gt; <🎜 🎜> li class = "on"& gt; 1 & lt;/li & gt;
🎜> & lt;/ ul>

2.css

코드 복사
코드는 다음과 같습니다.

.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 다음에 함수를 호출하고 개체 매개변수를 전달합니다. 

전체 데모 코드:



<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS </title>