CSS スタイルシート部分: bigimage jQuery を使用します。大きな画像を保存するための p タグの ID を作成し、そのスタイルを絶対配置に設定して、最初に非表示にします。 a タグに黒の背景を追加すると、画像を暗くする効果が得られます。このようにして、簡単なフォトアルバムエフェクトが完成します。
最初に 2 つの変数 x を宣言します大きな画像を保存する場合は y と y マウスからの距離。大きい画像を格納するには、ID が bigimage の p タグをボディに追加します。 a タグの rel 属性には、大きい画像のパスが含まれます。小さい画像の上にマウスを置くと、ブラウザ上で取得したマウスの座標が大きい画像の絶対位置の座標に代入され、フェードイン効果を伴って表示されます。その後、mousemove イベントを小さい画像にバインドします。つまり、マウスが移動すると、大きい画像もマウスとともに移動します。次のコードを見てください:
function widthJudge(e){ //ページの合計幅からマウスの現在の X 座標を引いたものが右枠の幅です var marginRight = document.documentElement.clientWidth - e.pagex; if(marginright< imagewidth)//変数x x = imageWidth 22の値を再計算します$("#bigimage").css({top:(e.pageY - y ) 'px',left:(e.pageX - x ) 'px'}); 値が表示に十分な場合大きな画像の場合、元の位置に表示されます $("#bigimage").css({top:(e.pageY - y ) 'px',left:(e.pageX x ) 'px ' }); }; }