- 本效果演示了一个响应鼠标的提示功能，鼠标移上图片后会滑出一个带背景的提示框，用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 else 100 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>
鼠标移上图片滑出文字提示
时间： 2024-10-28 22:09:12