JQuery に基づいた Apple デスクトップの Dock 効果のシミュレート (安定版)_jquery

実際、コードは以前のバージョンと非常によく似ています。

首相は HTML ページのコードです:

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

script type="text/javascript " src="js/dock.js">

< ;/a>

< img alt="歴史" src="images/history.png" />

対応する CSS コードも追加します:

コードをコピーします コードは次のとおりです: #topMenu {

高さ:128px;

行の高さ:250px;
背景画像:url(../images/dock- bg1.png);
#topMenu img{
幅: 50px;
高さ: 50px;


対応する JS コードは次のとおりです:




コードをコピー

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

$ (function(){ $(this).mousemove( function(e){ var MouseY = parseInt(e.pageY); if(mouseY<136 &&mouseY>8){ var MouseX = parseInt(e.pageX);

$( "#topMenu img").each(function(){

var obj = $(this);
var objWidth = obj.css(" width");
//画像の中心の水平座標を取得します
var objX = parseInt(obj.offset().left) parseInt(objWidth.substr(0,objWidth.length-2)) /2;
var x = Math.abs(objX-mouseX);
if(xobj.css("width",(128-((78*x*x)) /(75*75))) "px").css("高さ",( 128-((78*x*x)/(75*75))) "px"); 🎜>obj.css("幅","50px").css("高さ" ,"50px")
}
});
}else{
$("#topMenu) img").each(function(){
$(this).css( "width","50px").css("height","50px");
});
}
});
});
以前のバージョンと比較して最も大きな変更点は JS です。マウスがページ上で移動すると、mousemove イベントがトリガーされ、ページ上のマウスの垂直座標が最初に取得されます。マウスが操作可能なドックメニュー内にある場合、マウスがこの範囲内にない場合は、すべてのアイコンが初期状態に戻ります。逆に、マウスがこの範囲内にある場合は、マウスの水平座標が復元されます。ページ上の は引き続き取得され、mouseX を使用して記録されます。同時に、ページ内の画像の中心の水平座標を取得し、mouseX と objX (x で記録された) の差の絶対値が 75 未満の場合、objX を使用して対応する値を保存します。現在のピクチャの操作可能範囲に入り、ドック効果がトリガーされます。y を使用して、マウスが移動したときの特定のピクチャの幅を表します (簡単にするために、この例で使用されているアイコンの幅と高さは等しいです)。式 y=128-78*x2/752 を使用します。マウスの位置と画像サイズの関係を表します。x が 75 より大きい場合、対応する画像が復元されます。
この例の処理中に IE の小さなバグが発見されました。 タグの途中にあるコンテンツが の場合、img の境界線に CSS スタイルがありません。 IE は、CSS スタイルの text-decoration: none を img に追加しても、IE によって border:none; が追加されます。 img では、煩わしい青色の境界線が表示されます。下の画像は改良版のデモ画像です。すべてのコードは参考用です。