ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryを使用すると、画像がマウスの動きに追従できるようになります
jqueryを使用すると、画像がマウスの動きに追従できるようになります
- 小云云オリジナル
- 2018-01-15 13:19:052682ブラウズ
マウスが動くと、マウスの動きに追従して、ある接続の右側にQRコードを表示する関数を書きたいです。 この記事では、マウスに追従する画像の例のjqueryの実装に関する関連情報を主に紹介します。この記事がそのような機能を誰もが実現するのに役立つことを願っています。 Implementation Code：
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片跟随鼠标</title>
<script type="text/javascript">
function hideImg(num){
if(num.className == "1_name"){
$('#1_erweima').hide();
}else if(num.className == "2_name"){
$('#2_erweima').hide();
}
}
function showImg(num) {
var intX = window.event.clientX;
var intY = window.event.clientY;
if (num.className == "1_name") {
$('#1_erweima').css("left", intX + 20 + "px");
$('#1_erweima').css("top", intY + 10 + "px");
$('#1_erweima').show();
} else if (num.className == "2_name") {
$('#2_erweima').css("left", intX + 20 + "px");
$('#2_erweima').css("top", intY + 10 + "px");
$('#2_erweima').show();
}
}
</script>
</head>
<body>
<table>
<tr>
<th>
<a href="https://www.baidu.com/" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="1_name" target="_blank" onmouseout="hideImg(this)" onmousemove="showImg(this)" onmouseover="showImg(this)" style="color: #1192cc;">我是百度，会跟随</a>
</th>
</tr>
<tr>
<th>
<a href="https://www.baidu.com/" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="1_name" target="_blank" style="color: #1192cc;">我是百度</a>
</th>
</tr>
<tr>
<th>
<a href="https://www.baidu.com/" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="2_name" target="_blank" onmouseout="hideImg(this)" onmousemove="showImg(this)" onmouseover="showImg(this)" style="color: #1192cc;">我也是百度，也跟随</a>
</th>
</tr>
<p id="1_erweima" style="display:none;right:20;position:absolute;">
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" />
</p>
<p id="2_erweima" style="display:none;right:20;position:absolute;">
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" />
</p>
</table>
</body>
</html>関連の推奨事項：divのjqueryの実装の実装マウスの動きに続くdivの実装詳細な説明Jsマウス追従バブルを実装モバイルアニメーションの特殊効果例を詳しく解説以上がjqueryを使用すると、画像がマウスの動きに追従できるようになりますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。