마우스가 움직일 때 특정 연결의 오른쪽에 QR 코드를 표시하고 마우스 움직임을 따라가는 기능을 작성하고 싶습니다. 이 기사에서는 주로 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>
관련 권장 사항:
마우스 움직임에 따른 div의 jQuery 구현에 대한 설명
자세한 설명 예제 마우스 효과에 따른 교차 좌표를 구현하는 JS
J 사용 S ~ 마우스 따라가는 버블 구현 모바일 애니메이션 특수효과 예시에 대한 자세한 설명
위 내용은 jquery는 마우스 움직임에 따라 그림을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!