jquery는 마우스 움직임에 따라 그림을 구현합니다.
- 小云云원래의
- 2018-01-15 13:19:052662검색
마우스가 움직일 때 특정 연결의 오른쪽에 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.