本效果演示了一个响应鼠标的提示功能,鼠标移到图片上后会滑出一个带背景的提示框,用CSS去控制它的大小和样式,用JS去控制它的滑出和速度,图文混排的时候能用得上。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片提示</title>
</head>
<style>
#list{
 width:420px;
 height:380px;
 border:1px solid #666;
 padding:5px;
}
#list ul
{
 list-style:none;
 float:left;
}
#list li{
 margin:5px;
}
#list img
{
 width:100px;
 vertical-align:middle; 
 border:0;
}
#list div.box
{
 width:130px;
 height:150px;
 border:1px solid #333; 
 display: table-cell;
 vertical-align:middle;
 text-align:center;
 display: block;
 font-size: 130px;
 position:relative;
 overflow:hidden;
}
#list div.tip
{
 height:25px;
 line-height:25px;
 text-align:center;
 width:130px; 
 background:#999; 
 position:absolute;
 z-index:10;
 top:120px;
 font-size:14px;
 filter:alpha(opacity=40);
 -moz-opacity:0.4;
}
</style>
<body>
<div id="list" name="list">
<ul>
 <li><div class="box"><img src="/7/2014-01-10/wall1.jpg" alt="图片1" /></div></li>
 <li><div class="box"><img src="/7/2014-01-10/wall1.jpg" alt="图片2" /></div></li>
</ul>
<ul>
 <li><div class="box"><img src="/7/2014-01-10/wall1.jpg" alt="图片3" /></div></li>
 <li><div class="box"><img src="/7/2014-01-10/wall1.jpg" alt="图片4" /></div></li>
</ul>
</div>
<script language="javascript">
 var list = document.getElementById("list");
   var divs = list.getElementsByTagName("div");
 var t;
   for (var i = 0; i < divs.length; i++) {
           divs[i].onmouseover = function (e) {
   var tip = document.createElement("div");
   var img = this.getElementsByTagName("img");
   tip.innerHTML = img[0].getAttribute("alt");
   var event = event||window.event;
   tip.setAttribute("class", "tip");
   tip.setAttribute("className", "tip");
   tip.style.left = "-100px";
   this.appendChild(tip);
   t = setInterval(function(){showtip(tip);},10);
 
           }
           divs[i].onmouseout = function (e) {
   clearInterval(t);
   var tip = this.lastChild;
   if (tip.tagName == "DIV"){ 
    this.removeChild(tip);   
   }
           }
 }
 function showtip(obj)
 {
  var left = gs(obj, "left");
  var value = left+10;
  if (value <= 0){
   obj.style.left = value+"px";
  }
  else
   clearInterval(t);
 }
 function gs(obj, a){
  if (obj.currentStyle){ 
       var curVal=obj.currentStyle[a]
    }
  else{ 
       var curVal=document.defaultView.getComputedStyle(obj, null)[a]
    } 
    return parseInt(curVal);
 }
</script>
</body>
</html>
CopyRight © 酷8网 www.ku8wang.com