ホームページ > 記事 > ウェブフロントエンド > JQuery に基づいた Apple デスクトップの Dock 効果のシミュレート (安定版)_jquery
JQuery に基づいた Apple デスクトップの Dock 効果のシミュレート (安定版)_jquery
- WBOYオリジナル
- 2016-05-16 17:49:021331ブラウズ
実際、コードは以前のバージョンと非常によく似ています。
首相は HTML ページのコードです:
コードをコピーします コードは次のとおりです:
script type="text/javascript " src="js/dock.js">
< ;/a> 
対応する CSS コードも追加します:
コードをコピーします コードは次のとおりです: #topMenu {
高さ:128px; 行の高さ:250px;
背景画像:url(../images/dock- bg1.png);
#topMenu img{
幅: 50px;
高さ: 50px;
対応する JS コードは次のとおりです:
コードをコピー
背景画像: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 の小さなバグが発見されました。 タグの途中にあるコンテンツが![JQuery に基づいた Apple デスクトップの Dock 効果のシミュレート (安定版)_jquery]()
の場合、img の境界線に CSS スタイルがありません。 IE は、CSS スタイルの text-decoration: none を img に追加しても、IE によって border:none; が追加されます。 img では、煩わしい青色の境界線が表示されます。下の画像は改良版のデモ画像です。すべてのコードは参考用です。
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 の小さなバグが発見されました。 タグの途中にあるコンテンツが
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。