首页 > 代码库 > 鼠标移上图片滑出文字提示

鼠标移上图片滑出文字提示

2024-07-18 04:25:14   219人阅读

  • 本效果演示了一个响应鼠标的提示功能，鼠标移上图片后会滑出一个带背景的提示框，用CSS去控制它的大小和样式，用JS去控制它的滑出和速度，图文混排的时候这个能用得上。
  •   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2 <html xmlns="http://www.w3.org/1999/xhtml">  3 <head>  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  5 <title>图片提示</title>  6 </head>  7 <style>  8 #list{  9  width:420px; 10  height:380px; 11  border:1px solid #666; 12  padding:5px; 13 } 14 #list ul 15 { 16  list-style:none; 17  float:left; 18 } 19 #list li{ 20  margin:5px; 21 } 22 #list img 23 { 24  width:100px; 25  vertical-align:middle;  26  border:0; 27 } 28 #list div.box 29 { 30  width:130px; 31  height:150px; 32  border:1px solid #333;  33  display: table-cell; 34  vertical-align:middle; 35  text-align:center; 36  display: block; 37  font-size: 130px; 38  position:relative; 39  overflow:hidden; 40 } 41 #list div.tip 42 { 43  height:25px; 44  line-height:25px; 45  text-align:center; 46  width:130px;  47  background:#999;  48  position:absolute; 49  z-index:10; 50  top:120px; 51  font-size:14px; 52  filter:alpha(opacity=40); 53  -moz-opacity:0.4; 54 } 55 </style> 56 <body> 57 <div id="list" name="list"> 58 <ul> 59  <li><div class="box"><img src="/jscss/demoimg/wall_s1.jpg" alt="图片1" /></div></li> 60  <li><div class="box"><img src="/jscss/demoimg/wall_s2.jpg" alt="图片2" /></div></li> 61 </ul> 62 <ul> 63  <li><div class="box"><img src="/jscss/demoimg/wall_s3.jpg" alt="图片3" /></div></li> 64  <li><div class="box"><img src="/jscss/demoimg/wall_s4.jpg" alt="图片4" /></div></li> 65 </ul> 66 </div> 67 <script language="javascript"> 68  var list = document.getElementById("list"); 69    var divs = list.getElementsByTagName("div"); 70  var t; 71    for (var i = 0; i < divs.length; i++) { 72            divs[i].onmouseover = function (e) { 73    var tip = document.createElement("div"); 74    var img = this.getElementsByTagName("img"); 75    tip.innerHTML = img[0].getAttribute("alt"); 76    var event = event||window.event; 77    tip.setAttribute("class", "tip"); 78    tip.setAttribute("className", "tip"); 79    tip.style.left = "-100px"; 80    this.appendChild(tip); 81    t = setInterval(function(){showtip(tip);},10); 82   83            } 84            divs[i].onmouseout = function (e) { 85    clearInterval(t); 86    var tip = this.lastChild; 87    if (tip.tagName == "DIV"){  88     this.removeChild(tip);    89    } 90            } 91  } 92  function showtip(obj) 93  { 94   var left = gs(obj, "left"); 95   var value = left+10; 96   if (value <= 0){ 97    obj.style.left = value+"px"; 98   } 99   else100    clearInterval(t);101  }102  function gs(obj, a){103   if (obj.currentStyle){ 104        var curVal=obj.currentStyle[a]105     }106   else{ 107        var curVal=document.defaultView.getComputedStyle(obj, null)[a]108     } 109     return parseInt(curVal);110  }111 </script>112 </body>113 </html>

     


联系
我们