単純なマウスを達成するための js メソッド、effect_javascript スキルに従ってください
May 16, 2016 pm 04:04 PMこの記事の例では、js で簡単なマウス追従効果を実現する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。
マウスフォローとは、その名前が示すように、マウスが動くとマウスを追いかけるアニメーションがあることを意味します。
ポイント1:
var oEvent = evt || window.event;
これは IE と FF と互換性があるように記述されています。IE では window.event がイベント オブジェクトを表しますが、FF ではパラメーターがイベント関数に渡され、このパラメーターがイベント オブジェクトを表します。
ポイント 2:
document.onmousemove = function(evt)
マウスフォローとは、マウスが動いているときに起こることです。
ポイント3:
document.documentElement.scrollTop || document.body.scrollTop;
これは、Chrome と他のブラウザとの互換性のため、スクロール バーと上部のスクロールの間の距離は、Chrome では後者が使用され、他のブラウザでは前側が使用されます。
ポイント 4:
oTop.style.top=oEvent.clientY+scrolltop+10+"px";
マウスが移動したときの要素の位置の値に、マウスの現在位置を代入します。
oEvent.clientY は、マウスの現在の Y 座標位置です。最初の画面以外の画面にスクロールするときに、マウスの追従効果が変わらないように、scrolltop に追加される距離が書き込まれます。
コードは次のとおりです:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>无标题文档</title> <style> body{margin:0; padding:0} #to_top{ width:30px; height:40px; padding:20px; font:14px/20px arial; text-align:center; background:#06c; position:absolute; cursor:pointer; color:#fff } </style> <script> window.onload = function(){ var oTop = document.getElementById("to_top"); document.onmousemove = function(evt){ var oEvent = evt || window.event; var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft; var scrolltop = document.documentElement.scrollTop || document.body.scrollTop; oTop.style.left = oEvent.clientX + scrollleft +10 +"px"; oTop.style.top = oEvent.clientY + scrolltop + 10 + "px"; } } </script> </head> <body style="height:1000px;"> <a href="#">文字</a> <div id="to_top">鼠标跟随</div> </body> </html>
この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。

人気の記事

人気の記事

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます

PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする
