鼠標移上圖片滑出文字提示

2024-09-05 12:21:12

字體：大中小

來源：轉載

供稿：網友

本效果演示了一個響應鼠標的提示功能，鼠標移上圖片后會滑出一個帶背景的提示框，用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   class="iwvjtn8m0"   id="list" name="list"><ul> <li><div   id="iwvjtn8m0"   class="box"><img src="/d/file/p/2024/09-05/304070c36193b4c57e322ad8e9931128.jpg" alt="圖片1" /></div></li> <li><div   id="iwvjtn8m0"   class="box"><img src="/d/file/p/2024/09-05/0ababf9533096d5fd9a1cda1d4413c20.jpg" alt="圖片2" /></div></li></ul><ul> <li><div   id="iwvjtn8m0"   class="box"><img src="/d/file/p/2024/09-05/c51dcb09d01090b8dae00ddeaba2ff60.jpg" alt="圖片3" /></div></li> <li><div   id="iwvjtn8m0"   class="box"><img src="/d/file/p/2024/09-05/2390c73a684d21062d57152a69551a7b.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>

上一篇：JavaScript圖片幻燈片代碼

下一篇：前后輪翻的JavaScript圖片切換特效