鼠标悬停放大图片 - 漂亮-白红宇

鼠标悬停放大图片 - 漂亮

阅读量：5299 次

发布时间：2019-06-14

本文共 1773 字，大约阅读时间需要 5 分钟。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

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

#imgbox {position:absolute;border:3px solid #999;filter: Alpha(Opacity=95);visibility:hidden;}

</style>

/*触发事件*/

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" οnmοuseοver="mouse_0(this)" οnmοusemοve="mouse_1(this,event)" οnmοuseοut="mouse_2(this)">'

</body>

</html>

转载于:https://www.cnblogs.com/qinhaijun/archive/2011/08/26/2154347.html

你可能感兴趣的文章

CCFlow中通过excel向Dtl明细表（从表）导入数据的操作说明

查看>>

根据当前时间计算上月月初到月末

查看>>

【Java并发系列】----JUC之Lock

leetcode Letter Combinations of a Phone Number

查看>>

kbhit()

查看>>

哈希表查找（散列表查找） c++实现HashMap

查看>>

六. jenkins部署springboot项目(3)--windows环境--远程windows server服务器

查看>>