suchen

Heim  >  Artikel  >  Web-Frontend  >  JS lässt einen schwebenden Ebeneneffekt erscheinen, wenn die Maus über den Text fährt

JS lässt einen schwebenden Ebeneneffekt erscheinen, wenn die Maus über den Text fährt

php中世界最好的语言
php中世界最好的语言Original
2018-06-14 10:18:593644Durchsuche

Dieses Mal bringe ich Ihnen JS mit, um einen Spezialeffekt zu erzielen, bei dem eine schwebende Ebene erscheint, wenn die Maus über Text fährt. Welche Vorsichtsmaßnahmen gibt es, um einen Spezialeffekt zu erzielen, bei dem eine schwebende Ebene erscheint, wenn die Maus über Text fährt? JS? Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

Zum Beispiel die CSDN-Benachrichtigung (sollte die Glocke oben auf der Seite sein, nachdem Sie die Seite aufgerufen haben, um einen neuen Artikel zu schreiben), was ist die konkrete Implementierung? Obiger Code: 

<!doctype html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <title>TEST</title> 
</head> 
<style type="text/css"> 
 body{ 
 position: relative; 
 } 
 #inform{ 
  position: absolute; 
  top: 20px; 
  width: 350px; 
  max-height: 250px; /* 设置最大高度，当高度达到此值时出现滚动条 */ 
  z-index: 10; 
  background-color: #E0E5E5; 
  overflow: auto;  /* 自动添加滚动条 */ 
  box-shadow:0px 0px 10px #000; /* 外阴影 */ 
  display: none; /* 默认隐藏 */ 
 } 
 #informTable{ 
 table-layout:fixed;  /* 用于实现表格td自动换行的部分代码*/ 
 width: 325px; 
 } 
 
 #informTable tr td{ 
 width: 325px; 
 height:30px; 
 font-size: 16px; 
 font-family: Georgia; 
 color: #555555; 
 word-wrap:break-word; /*自动换行*/ 
 padding: 0 0 0 0; 
 } 
 #informTable tr td:hover{ 
 background-color: #D9D9D9; 
 } 
 #inform hr{ 
 border:1; 
 width: 325px; 
 margin-bottom: 0px; 
 } 
 
</style> 
<script type="text/javascript"> 
 //显示悬浮层 
 function showInform(){ 
 document.getElementById("inform").style.display='block'; 
  // document.getElementById("inform").css("display","block"); 
 } 
 //隐藏悬浮层 
 function hiddenInform(event){ 
  var informp = document.getElementById('inform'); 
  var x=event.clientX; 
  var y=event.clientY; 
  var px1 = informp.offsetLeft; 
  var py1 = informp.offsetTop; 
  var px2 = informp.offsetLeft + informp.offsetWidth; 
  var py2 = informp.offsetTop + informp.offsetHeight; 
  if( x < px1 || x > px2 || y < py1 || y > py2){ 
  document.getElementById('inform').style.display='none'; 
  } 
  
 } 
 
 
</script> 
<body> 
 <a id="btn" onMouseOver="javascript:showInform();" onMouseOut="hiddenInform()"> 
 警告消息 
 </a> 
 <p id="inform" onMouseOver="javascript:showInform();" onMouseOut="hiddenInform(event)"> 
  <table id="informTable"> 
  <tr> 
  <td> 
   编号5005车辆发车间隔异常 
   <hr/> 
  </td> 
  </tr> 
  <tr> 
  <td> 
   编号5005车辆发车间隔异常 
   <hr/> 
  </td> 
  </tr> 
  <tr> 
  <td> 
   编号5005车辆发车间隔异常 
   <hr/> 
  </td> 
  </tr> 
  <tr> 
  <td> 
   编号5005车辆发车间隔异常 
   <hr/> 
  </td> 
  </tr> 
  <tr> 
  <td> 
   编号5005车辆发车间隔异常 
   <hr/> 
  </td> 
  </tr> 
  <tr> 
  <td> 
   编号5005车辆发车间隔异常 
   <hr/> 
  </td> 
  </tr> 
  <tr> 
  <td> 
   编号5005车辆发车间隔异常 
   <hr/> 
  </td> 
  </tr> 
  <tr> 
  <td> 
   编号5005车辆发车间隔异常 
   <hr/> 
  </td> 
  </tr> 
  </table> 
 </p> 
</body> 
</html>

Die Darstellung ist wie folgt:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen Bitte achten Sie auf andere verwandte Themen im Artikel über die chinesische PHP-Website!

Empfohlene Lektüre:

So bestimmen Sie die Gleitrichtung des Benutzers in H5-Berührungsereignissen

Angularjs sorgt dafür, dass Controller miteinander kommunizieren Sonstiges Ausführliche Erklärung

Das obige ist der detaillierte Inhalt vonJS lässt einen schwebenden Ebeneneffekt erscheinen, wenn die Maus über den Text fährt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie Vue berechnetNächster Artikel：So verwenden Sie Vue berechnet

In Verbindung stehende Artikel

Mehr sehen