木子屋
 

标题: 鼠标移到产品缩略图时弹出显示大图

作者: dnawo

日期: 2007-08-28 04:57 PM

分类: 脚本语言

内容: 客户要求站点产品栏目中当鼠标移到产品缩略图上时能弹出显示大图，用JS写两个函数即可实现：一个函数在鼠标移到图片上调用，显示隐藏层并将图片载入到层中；另一个函数在鼠标移出图片上调用，清空层的内容并隐藏层。
HTML代码
显示大图-mzwu.com
function showPic(sUrl){
var x,y;
x = event.clientX;
y = event.clientY;
document.getElementById("Layer1").style.left = x;
document.getElementById("Layer1").style.top = y;
document.getElementById("Layer1").innerHTML = "";
document.getElementById("Layer1").style.display = "block";
}
function hiddenPic(){
document.getElementById("Layer1").innerHTML = "";
document.getElementById("Layer1").style.display = "none";
}

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
上例只做演示，使用时需将"this.src"改为产品大图地址。

+ 查看当前日志评论 (0)

 

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.049 ms

标题: 鼠标移到产品缩略图时弹出显示大图

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.049 ms

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.049 ms