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

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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="//ku.shouce.ren/files/images/201601/56a0c75be9c60.jpg" alt="图片1" /></div></li>
 <li><div class="box"><img src="//ku.shouce.ren/files/images/201601/56a0c75c2577f.jpg" alt="图片2" /></div></li>
</ul>
<ul>
 <li><div class="box"><img src="//ku.shouce.ren/files/images/201601/56a0c75c4558b.jpg" alt="图片3" /></div></li>
 <li><div class="box"><img src="//ku.shouce.ren/files/images/201601/56a0c75c578e6.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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

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

分类

图片代码

描述

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