当前位置 > 首页 > 个人随笔 > javascript商品提示效果

javascript商品提示效果

2009年10月10日   作者：     类别：个人随笔

1196 views | 发表评论

分享到: 百度 QQ空间 微博 豆瓣 人人 开心 QQ书签

今天写一个商品展示信息提示的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";
	}
}
点击下面“运行”直接查看效果

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

相关博文

标签：, ,

相关日志

给作者留言：