実践的なjsフォーカスマップ切り替え効果、構造と動作の分離

実践的なjsフォーカスマップ切り替え効果、構造と動作の分離_javascriptスキル

WBOY

リリース： 2016-05-16 18:25:29

オリジナル

1062 人が閲覧しました

フォーカス画像の切り替え効果は、おそらくフロントエンドではよく知られているものであり、仕事でよく使用される方法の 1 つを以下に説明します。
現在のデジタルナビゲーションをディスプレイと同期する方法。写真の？
ここには、ピクチャ切り替えエリアとデジタルナビゲーションエリアの 2 つのエリアがあり、それぞれ play(value) と setBg(value) の 2 つのループ関数に対応します。
ピクチャループが 2 番目のピクチャに切り替わるとき、このとき、デジタルナビゲーションの現在の状態も 2 番目の位置に変更され、同期効果が得られます。ここで重要なのは、同じパラメータ値をそれらに渡すことであり、このタスクは関数 Mea(value) に渡されます。
ループ内で最後の画像が表示された後、最初の画像に戻る必要がありますが、auto() はパラメータ n を判断するだけです。
このとき、関数 setInterval() が実行されます。 auto() は一定時間ごとに、パラメータ n に対応して常に増分変化します。n は関数 Mea(n) に渡されます。
マウスがスライドすると、画像が切り替わります。デジタルナビゲーションエリアは現在の状態のままです。マウス (n) 機能を忘れないでください。これはその功績です。
このようにして、複数の機能兄弟が分業し、協力してそれぞれの役割を果たしました。
1.html

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

画像 1< /a>
写真 2
写真 3 #">写真 4

; >
コードをコピー

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

.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{表示: なし; 行の高さ: 200 ピクセル; カーソル: ポインター; } jfocusnum li{カーソル:ポインター;高さ:50ピクセル;行の高さ:50ピクセル;色:#999 1ピクセルの背景色:# CCC; float: left; margin:0 5px;} #jfocusnum li.on{color:#f00; border:#900 font-size:14px;} 3.js

コードをコピー


 コードは次のとおりです:
 
function $(id){return document.getElementById(id);} 
var n=0; 
var Num=$("jfocusnum").getElementsByTagName("li"); 🎜>var imglist=$("jfocuspic").getElementsByTagName("a"); 
function setBg(value){//数値領域の切り替え、現在の要素にクラス「on」を追加、他の要素のクラスをクリア; 
for(var i=0;i} 
関数value )//画像領域変換
try//try...catch は、コード内のエラーをテストできます。 try セクションには実行する必要があるコードが含まれ、catch セクションにはエラーが発生したときに実行されるコードが含まれます。 
{ 
with (jfocuspic)//IE にフィルター効果を追加します。
{ 
filters[0].Apply();//動的効果を開始する前に、それを装備する必要があります (適用) )、Apply イベントを使用してフィルター効果を生成します。 
for(i=0;ifilters[0].play();//play() メソッドは動的エフェクトを再生するために使用されます。これより前に、フィルター スタイルは #jfocus_pic スタイル; 
} 
} 
catch(e) 
{ 
for(i=0;i{ 
i==value?imglist[i].style.display="block":imglist[i].style.display="none";// 現在の画像を表示、非表示他の写真; 
} 
} 
} 
function Mouse(n){ 
for(var i=0;i(function( n ){ 
Num[i].onmouseover=imglist[i].onmouseover=function(){clearInterval(autoStart);Mea(n);}//マウス通過後の自動切り替えを停止し、関数 Mea() Pass を与える現在のパラメータ n 
Num[i].onmouseout=imglist[i].onmouseout=function(){setAuto();} 
})(i); 
} 
} 
 function Mea(value){ 
n=value; 
setBg(value); 
} 
function auto();パラメータ n の増分は、画像の自動回転の鍵となります。
if(n>Num.length-1)n=0; >function setAuto(){autoStart=setInterval("auto()", 2000)}//2000 ミリ秒ごとに auto() 関数が実行され、実行されるたびにパラメーター n が 1 ずつ増加します
setAuto ();// 関数呼び出し 

 
デモコード: 












写真 1<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt--> <p>写真 2<meta content="text/html; charset=gb2312"> </p>写真 3<style type="text/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;margin-bottom:20px;} 
#jfocuspic a{display:none; font-size:2em; text-align:center; line-height:200px; font-weight:bold; background-color:#CCC; height:200px; cursor:pointer;} 
#jfocusnum li{cursor:pointer;height:50px; width:50px; line-height:50px;display:inline-block; color:#000; border:#999 1px solid; text-align:center; background-color:#CCC; float:left; margin:0 5px;} 
#jfocusnum li.on{color:#f00; font-weight:bold; border:#900 1px solid; font-size:14px;} 
--></style> <div class="jfocus">写真 4<div id="jfocuspic"> <a href="#" style="display: block;">
</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>4<ul id="jfocusnum">
<li class="on">
</li>
<li>
<li> </li> <li>[Ctrl A すべて選択 注: </li>外部 Js を導入する必要がある場合は、更新して実行する必要があります </ul>] <br>動作層は js で構成されています。これを実現するために、ここでの作業は単純なスケルトンを構築するだけです。レンダリングをより美しくしてデザイン要件を満たしたい場合は、CSS の強力な役割を使用する必要があります。 <input onclick="runEx('runcode10313')" type="button" value="运行代码">js はコンパイル後、次回再利用できますが、CSS を記述するときは毎回デザイナーが異なるスタイルを作成する可能性があるため、CSS コードを書き直して実装する必要があります。 css 正確に配置して良好な互換性を維持するだけでなく、最適化を最大限に高めることは、実際には簡単なことではありません。</div>