cari

Rumah >hujung hadapan web >tutorial js >js untuk mencapai tetikus mudah mengikut kemahiran effect_javascript

js untuk mencapai tetikus mudah mengikut kemahiran effect_javascript

WBOY
WBOYasal
2016-05-16 16:04:581220semak imbas

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;

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)

Mengikut tetikus ialah perkara yang berlaku apabila tetikus bergerak.

Perkara 3: 

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

Ini adalah untuk keserasian dengan chrome dan penyemak imbas lain.

Mata 4: 

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

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>

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js untuk mencapai perkongsian dan kesan gelongsor sebagai kemahiran halaman scrolls_javascriptArtikel seterusnya：js untuk mencapai perkongsian dan kesan gelongsor sebagai kemahiran halaman scrolls_javascript

Artikel berkaitan

Lihat lagi