前端思考：专注前端开发，关注用户体验 » 提示 http://www.artcss.com 一个像素的距离... Sat, 12 Feb 2011 03:34:07 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 javascript商品提示效果 http://www.artcss.com/archives/327.html http://www.artcss.com/archives/327.html#comments Sat, 10 Oct 2009 07:50:21 +0000 Artcss http://www.artskin.cn/blog/?p=327 今天写一个商品展示信息提示的js小例子，就是当鼠标放到商品图片上的时候出现一个半透明层，层上写商品的相关信息。

用到的javascript代码如下：

Download script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var oLight = document.getElementById("light");
var oList = oLight.getElementsByTagName("li");
for (var i=0,iLen = oList.length; i<iLen; i++){
	oList[i].onmouseover = function(){
		var oSpan = this.getElementsByTagName("span")[0];
		var oImg = this.getElementsByTagName("img")[0];
		oSpan.style.display="block";
		oSpan.innerHTML=oImg.alt;
	}
	oList[i].onmouseout = function(){
		var oSpan = this.getElementsByTagName("span")[0];
		var oImg = this.getElementsByTagName("img")[0];
		oSpan.style.display="none";
	}
}
点击下面“运行”直接查看效果

提示：你可以先修改部分代码再运行。

]]> http://www.artcss.com/archives/327.html/feed 0