溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
jquery實現圖片跟隨鼠標的實例
開發后臺寫頁面困難的一比啊，想寫個鼠標移動某連接右側顯示二維碼，并跟隨鼠標移動的功能，各種查資料，花了一小天終于搞出來了，代碼的記下來，浪費了我這么多時間，記你一輩子，這個可以直接在W3School直接運行，可以根據某行顯示某個特定的圖片，自己定義就行
實現代碼：
<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 rel="external nofollow" rel="external nofollow" rel="external nofollow" class="1_name" target="_blank" onmouseout="hideImg(this)" onmousemove="showImg(this)" onmouseover="showImg(this)" >我是百度，會跟隨</a>
</th>
</tr>
<tr>
<th>
<a rel="external nofollow" rel="external nofollow" rel="external nofollow" class="1_name" target="_blank" >我是百度</a>
</th>
</tr>
<tr>
<th>
<a rel="external nofollow" rel="external nofollow" rel="external nofollow" class="2_name" target="_blank" onmouseout="hideImg(this)" onmousemove="showImg(this)" onmouseover="showImg(this)" >我也是百度，也跟隨</a>
</th>
</tr>
<div id="1_erweima" >
<img src="https://cache.yisu.com/upload/information/20200622/114/62494.png" />
</div>
<div id="2_erweima" >
<img src="https://cache.yisu.com/upload/information/20200622/114/62494.png" />
</div>
</table>
</body>
</html>
如有疑問請留言或者到本站社區交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
