cari

Rumah >hujung hadapan web >tutorial js >JS melaksanakan kesan kotak gesaan teks pautan yang mengikuti tetikus

JS melaksanakan kesan kotak gesaan teks pautan yang mengikuti tetikus

PHPz
PHPzasal
2016-05-16 15:46:411181semak imbas

Artikel ini terutamanya memperkenalkan pelaksanaan JS bagi kesan kotak gesaan teks pautan yang mengikuti tetikus, yang melibatkan teknik berkaitan acara tetikus javascript dan operasi gaya elemen halaman Ia sangat mudah dan praktikal. Rakan yang memerlukannya boleh merujuknya . Butirannya adalah seperti berikut:

JavaScript dan CSS digunakan di sini untuk mencapai kesan segera pautan Ia tidak akan mengubah struktur pautan asal anda teg tajuk sebelum ini, anda hampir hanya perlu menyalin kod JS ke Hanya pergi ke halaman web anda. Anda akan mendapati bahawa selepas menjalankan kesan ini, jika tetikus bergerak pada pautan, kotak gesaan teks akan bergerak dengan tetikus.

Kesan operasi ditunjukkan dalam rajah di bawah:

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>
<title>跟随鼠标的文字提示框</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{font:12px/1.8 arial;}
a,a:visited{color:#3366cc;text-decoration:none;}
a:hover{color:#f60;text-decoration:underline;}
.tip{width:200px;border:2px solid #ddd;padding:8px;background:#f1f1f1;color:#666;}
img{border:none;}
</style>
<script type="text/javascript">
 var tip={$:function(ele){
 if(typeof(ele)=="object")
  return ele;
 else if(typeof(ele)=="string"||typeof(ele)=="number")
  return document.getElementById(ele.toString());
  return null;
 },
 mousePos:function(e){
  var x,y;
  var e = e||window.event;
  return{x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop};
 },
 start:function(obj){
  var self = this;
  var t = self.$("mjs:tip");
  obj.onmousemove=function(e){
   var mouse = self.mousePos(e);
   t.style.left = mouse.x + 10 + &#39;px&#39;;
   t.style.top = mouse.y + 10 + &#39;px&#39;;
   t.innerHTML = obj.getAttribute("tips");
   t.style.display = &#39;&#39;;
  };
  obj.onmouseout=function(){
   t.style.display = &#39;none&#39;;
  };
 }
 }
</script>
</head>
<body>
<ol>
<li><a href="#" target="_blank" onmouseover="tip.start(this)" tips="2013年12月14日，嫦娥3号卫星登上月球，激动人心的一切终于到来了……">中国嫦娥飞天的一些感想</a></li>
<li><a href="#" target="_blank" onmouseover="tip.start(this)" tips="中国未来一定是世界上最强大的国家，你相信么？">中国是世界上最强大的国家</a></li>
</ol>
<p id="mjs:tip" class="tip" style="position:absolute;left:0;top:0;display:none;"></p>
</body>
</html>

Di atas ialah keseluruhan kandungan bab ini, lagi Untuk tutorial berkaitan, sila lawati Tutorial Video JavaScript, Tutorial Video CSS!

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：Ringkasan penggunaan kelas rentetan dalam kemahiran C_javascriptArtikel seterusnya：Ringkasan penggunaan kelas rentetan dalam kemahiran C_javascript

Artikel berkaitan

Lihat lagi