JS+CSS控制鼠标移上图片滑出文字提示代码
代码简介：
本效果演示了一个响应鼠标的提示功能，鼠标移上图片后会滑出一个带背景的提示框，用CSS去控制它的大小和样式，用JS去控制它的滑出和速度，图文混排的时候这个能用得上。
代码内容：
View Code
<!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>JS+CSS控制鼠标移上图片滑出文字提示代码 - www.webdm.cn</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="http://www.webdm.cn/images/wall1_s.jpg" alt="图片1" /></div></li>
<li><div class="box"><img src="http://www.webdm.cn/images/wall2_s.jpg" alt="图片2" /></div></li>
</ul>
<ul>
<li><div class="box"><img src="http://www.webdm.cn/images/wall3_s.jpg" alt="图片3" /></div></li>
<li><div class="box"><img src="http://www.webdm.cn/images/wall4_s.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>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
代码来自：http://www.webdm.cn/webcode/aa4fcf31-1226-4080-a283-68289dbd8145.html
