js untuk mencapai tetikus mudah mengikut kemahiran effect

js untuk mencapai tetikus mudah mengikut kemahiran effect_javascript

WBOY

Lepaskan： 2016-05-16 16:04:58

asal

1207 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara untuk mencapai kesan berikut tetikus mudah dalam js. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Tetikus ikut, seperti namanya, bermakna apabila tetikus bergerak, terdapat animasi yang mengikuti tetikus.

Perkara 1:

var oEvent = evt || window.event;

Salin selepas log masuk

Ini ditulis supaya serasi dengan IE dan FF Di bawah IE, window.event mewakili objek acara, manakala di bawah FF, parameter dihantar ke fungsi acara dan parameter ini mewakili objek acara.

Mata 2:

document.onmousemove = function(evt)

Salin selepas log masuk

Mengikut tetikus ialah perkara yang berlaku apabila tetikus bergerak.

Perkara 3:

document.documentElement.scrollTop || document.body.scrollTop;

Salin selepas log masuk

Ini adalah untuk keserasian dengan chrome dan penyemak imbas lain.

Mata 4:

oTop.style.top=oEvent.clientY+scrolltop+10+"px";

Salin selepas log masuk

Tetapkan kedudukan semasa tetikus kepada nilai kedudukan elemen apabila tetikus bergerak.

oEvent.clientY ialah kedudukan koordinat Y semasa tetikus Jarak yang ditambahkan ke atas skrol ditulis supaya apabila menatal ke skrin selain daripada skrin pertama, kesan berikut tetikus kekal tidak berubah.

Kodnya adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0}
#to_top{
width:30px;
height:40px;
padding:20px;
font:14px/20px arial;
text-align:center;
background:#06c;
position:absolute;
cursor:pointer;
color:#fff
}
</style>
<script>
window.onload = function(){
 var oTop = document.getElementById("to_top");
 document.onmousemove = function(evt){
  var oEvent = evt || window.event;
  var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
  var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
  oTop.style.left = oEvent.clientX + scrollleft +10 +"px";
  oTop.style.top = oEvent.clientY + scrolltop + 10 + "px";
 }
}
</script>
</head>
<body style="height:1000px;">
<a href="#">文字</a>
<div id="to_top">鼠标跟随</div>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.