想寫個滑鼠移動某連接右側顯示二維碼,並跟隨滑鼠移動的功能,本文主要介紹了jquery實現圖片跟隨滑鼠的實例的相關資料,希望透過本文能幫助到大家實現這樣的功能,需要的朋友可以參考下,希望能幫助大家。
實作程式碼:
<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>
相關推薦:
以上是jquery實現圖片跟隨滑鼠移動的詳細內容。更多資訊請關注PHP中文網其他相關文章!