JQuery (ジュニアバージョン)_JavaScript スキルに基づいて Apple デスクトップの Dock 効果を模倣する

今日私が共有したいのは、JQuery を使用して Apple オペレーティング システム デスクトップの Dock 効果を模倣することです。これがジュニア バージョンと呼ばれる理由は、まだいくつかのバグがあるためです。表示効果が安定しません。時間の都合上、これらのバグはまだ修正されていませんので、専門家からアドバイスや意見をいただき、より良いバージョンを作成して皆さんと共有できることを願っています。

これは静的レンダリングです。まあまあ、見た目はまあまあです

次は HTML ページのコードです:

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

"http://www.w3.org/TR/html4/strict.dtd"> 🎜>

🎜>

;/html>


CSS 装飾がないページはひどいので、適切な CSS を使用して装飾することが必須です

コードをコピーします

コードは次のとおりです: #topBody{ height: 300px; } #topMenu{

height: 256px; 🎜>line-height: 256px;

}
#topMenu img{
height: 50px;
width: 50px;


数か月前、私は方程式を解くのを忘れていたので、マウスが動いたときのアイコン増幅アルゴリズムは単なる個人的なアイデアであり、専門家がより良いアルゴリズムを考案してくれることを願っています。また、ここではマウスを水平方向に移動するアルゴリズムのみを考慮しており、マウスを垂直方向に移動するアルゴリズムはまだ追加されていません。




コードをコピー

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

$(function(){ $(" #topBody").mousemove(function(e){ 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(x-75) {
obj.css( "幅",(128-((78*x*x)/(75*75))) "px"); ((78*x*x) /(75*75)) "px")
}
}); 🎜>

JQuery のマウス取得メソッドについて話しましょう。mousemove(function(e){}) を実行するとき、メソッドのパラメータ e は水平座標を取得するための e.pageX と垂直座標を取得するための e.pageY を提供します。 var x = e.originalEvent.x || e.originalEvent.layerX || 0; var y = e.originalEvent.y || も使用できます。 layerY || 0; マウスの垂直位置の水平位置を取得します。






マウスがゆっくり動く場合、表示効果は許容範囲内ですが、マウスが速く動く場合、アイコンは拡大されますが、それに対応するバグも発生します。

これまでの専門家やマスターの皆様に、修正やより良いアルゴリズムのための貴重な提案をしていただくことを心から歓迎いたします。ご視聴いただきありがとうございました。