您的位置：首页 > 其它

鼠标悬停放大图片 - 漂亮

2011-08-26 13:07 176 查看

<!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">

<style type="text/css">

img {border:0;width:139px;height:150px;}

#imgbox {position:absolute;border:3px solid #999;filter: Alpha(Opacity=95);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="images/head/ssmall.JPG" onmouseover="mouse_0(this)" onmousemove="mouse_1(this,event)" onmouseout="mouse_2(this)">'

<div id="imgbox" onmouseover="mouse_2(this)"></div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航