- 论坛徽章:
- 0
|
|
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>复制代码
|
|
免费注册
发表于 2012-01-12 16:42
