<!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>
<title>感应鼠标的图片放大效果</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<style type="text/css">
img {border:0;width:150px;height:100px;}
#imgbox {position:absolute;border:3px solid #999;filter: Alpha(Opacity=85);visibility:hidden;}
</style>
<script language="javascript" type="text/javascript">
/*触发事件*/
function mouse_0(obj){
var imgbox=document.getElementById("imgbox");
imgbox.style.visibility='visible';
var img = document.createElement("img");
img.src=obj.src;
img.style.width=obj.width * 2;
img.style.height=obj.height * 2;
imgbox.innerHTML='';
imgbox.appendChild(img);
}
/*移动事件*/
function mouse_1(obj,e){
var browerHeight=document.documentElement.clientHeight; //浏览器高度
var browerWidth=document.documentElement.clientWidth; //浏览器宽度
var mouseY=e.clientY; //当前光标Y位置
var mouseX=e.clientX; //当前光标X位置
var scrollTop=document.documentElement.scrollTop; //垂直滚动条距离顶部
var scrollLeft=document.documentElement.scrollLeft //水平滚动条距离左边
if (mouseY+obj.height * 2 + 20 <= browerHeight) var height = true; //当前光标Y位置 + 对象高度 <= 浏览器高度 ,则height为真
if (browerWidth-mouseX > mouseX) var width = true; //光标距离右边如果大于左边 ,则width为真
if(height)
y=scrollTop+mouseY+20;
else
y=scrollTop + browerHeight-obj.height * 2 - 20;
if(width)
x=scrollLeft+mouseX+20;
else
x=scrollLeft+mouseX-obj.width * 2 -20;
document.getElementById("imgbox").style.left=x + "px";
document.getElementById("imgbox").style.top=y + "px";
}
/*离开事件*/
function mouse_2(){
document.getElementById("imgbox").style.visibility='hidden';
}
</script>
</head>
<body>
<img src="http://www.568g.cn/tfh/t03/01.jpg" onmouseover="mouse_0(this)" onmousemove="mouse_1(this,event)" onmouseout="mouse_2(this)">
<div id="imgbox" onmouseover="mouse_2(this)"></div>
</body>
</html>
我想将此js代码改为鼠标经过 弹出层是另一个图片xxx.jpg 而不是现在的img放大 改了很多次也不成功

解决方案 »

  1.   

    /*触发事件---theforever_csdn修改*/
    function mouse_0(obj){
    var imgbox=document.getElementById("imgbox");
    imgbox.style.visibility='visible';
    var img = document.createElement("img");
    img.src="http://avatar.profile.csdn.net/A/9/7/2_theforever.jpg";
    imgbox.innerHTML='';
    imgbox.appendChild(img);
    }
    /*移动事件---theforever_csdn修改*/
    function mouse_1(obj,e){
    document.getElementById("imgbox").style.left=e.clientX + "px";
    document.getElementById("imgbox").style.top=e.clientY + "px";
    }
    /*离开事件*/
    function mouse_2(){
    document.getElementById("imgbox").style.visibility='hidden';
    }
      

  2.   

    因为我有多个<img> 我希望img.src 是通过一个参数来传递的 <img src="http://www.568g.cn/tfh/t03/01.jpg" onmouseover="mouse_0(this)" onmousemove="mouse_1(this,event)" onmouseout="mouse_2(this)">我希望mouse_0(this)能传递这个参数 放大后的图片名字 把这个图片名字传递到img.src里