Rumah > Artikel > hujung hadapan web > Kod berikut tetikus dilaksanakan oleh JS (kesan klik tangan kartun)
Kod berikut tetikus dilaksanakan oleh JS (kesan klik tangan kartun)
- PHPzke hadapan
- 2016-05-16 15:35:062211semak imbas
Artikel ini terutamanya memperkenalkan kod berikut tetikus yang dilaksanakan dalam JS, dengan kesan klik tangan kartun. Melibatkan respons kepada peristiwa tetikus JavaScript dan kemahiran memanggil elemen halaman yang dinamik, rakan-rakan yang memerlukannya boleh merujuknya, seperti berikut:
Kesan tangan kecil yang mengikut tetikus ke mana-mana tetikus bergerak, yang kecil Tangan akan mengikut.
Tangkapan skrin kesan berjalan adalah seperti berikut:
Alamat demo dalam talian adalah seperti berikut:
http: //demo.jb51.net/ js/2015/js-handle-style-focus-codes/
Kod khusus adalah seperti berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可爱的鼠标跟随</title>
<style>
html{ background:#000;}
body,html,input{ cursor:none;}
body,html{ height:100%;}
#cursor{ position:absolute; left:100px; top:100px; display:block;}
</style>
<script>
window.onload = function(){
var oCursor = document.getElementById("cursor");
document.onmousemove=function (ev){
var oEvent=ev||event,
oWidth = document.documentElement.clientWidth,
oHeight = document.documentElement.clientHeight,
scrollTop=document.documentElement.scrollTop + oEvent.clientY,
scrollLeft=document.documentElement.scrollLeft + oEvent.clientX;
if(scrollTop > oHeight-oCursor.offsetHeight){
oCursor.style.top = oHeight-oCursor.offsetHeight+'px';
}else if(scrollTop < 0){
oCursor.style.top = 0;
}else{
oCursor.style.top = scrollTop+'px';
}
if(scrollLeft > oWidth-oCursor.offsetWidth){
oCursor.style.left = oWidth-oCursor.offsetWidth+'px';
}else{
oCursor.style.left = scrollLeft+'px';
}
document.onmousedown = function(){
oCursor.innerHTML = "<img src='images/cursor_hover.png' />";
return false;
}
document.onmouseup = function(){
oCursor.innerHTML = "<img src='images/cursor.png' />";
}
};
}
</script>
</head>
<body>
<p id="cursor"><img src="images/cursor.png" /></p>
<input type="button" style="font-size:36px; margin:100px;" value="点击" onclick="window.open('http://www.baidu.com')" />
</body>
</html>Di atas ialah keseluruhan kandungan bab ini. Saya harap ia akan membantu semua orang dalam pengaturcaraan JavaScript Untuk mendapatkan bantuan lanjut, sila lawati Tutorial Video JavaScript untuk lebih banyak tutorial yang berkaitan!