JS melaksanakan kesan kotak gesaan teks pautan yang mengikuti tetikus-tutorial js-php.cn

JS melaksanakan kesan kotak gesaan teks pautan yang mengikuti tetikus

PHPz

Lepaskan： 2018-09-29 11:48:08

asal

1203 orang telah melayarinya

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>

Salin selepas log masuk

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