javascript_javascript スキルによってカプセル化された実用的なフォーカスマップ切り替え効果-jsチュートリアル-php.cn

javascript_javascript スキルによってカプセル化された実用的なフォーカスマップ切り替え効果

WBOY

リリース： 2016-05-16 18:23:06

オリジナル

1119 人が閲覧しました

そこで、同じページで複数のエフェクトを使用できるように、元のコードを変更してカプセル化し、さらに最適化しました。xhtm と CSS には変更はありません。興味のある方は、js でそれをフォローしてください。理解し、習得しやすくなります。
ご質問やご提案がございましたら、返信してください＠&＠
1.xhtml

コードをコピーコードは次のとおりです:

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

2.css

コードをコピー
コードは次のとおりです:

.jfocus{width:300px;height:300px;border:#ccc 1px Solid;background-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;行の高さ: 200 ピクセル; 背景の色: #CCC; カーソル: ポインター; 行の高さ: 50 ピクセル;表示:インラインブロック; カラー:#999 ソリッド; 背景色:#CCC; }#jfocusnum li.on f00; フォントの太さ:太字; フォントのサイズ:#900 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 , time){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 (function (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);}
関数 setAuto(){autoStart=setInterval( function(){auto();},time)}
setAuto();
}


xhtml の後に関数を呼び出し、オブジェクト パラメーターを渡します: 

完全なデモ コード:



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