Javascript实现显示图片局部,动态截图效果 [ 原创 ]
在网上看到好多人搜索js切图（其实js切不了图），于是写了一个js截图的效果。希望对这些朋友有所帮助。代码原创。思路原创。<!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>JavaScript截图效果『截取图片局部』</title>
<style type="text/css">
#box{
overflow:hidden;border:1px solid #000;width:100px;
height:100px;margin:3px;background-color:#0182c4;
position:absolute;top:1px;left:1px;
}
#mainBox{
padding:3px;border:1px solid #000;
width:276px;height:110px;
}
</style>
<script type="text/javascript">
/**
*
* 2009-03-04Topcss
* QQ:419074376
* hi.baidu.com/topcss
*
*/
function$(id){return document.getElementById(id);}
functionchange(evt){
evt = evt || window.event;
xPag = evt.offsetX ==undefined ? getOffset(evt).offsetX : evt.offsetX;
yPag = evt.offsetY ==undefined ? getOffset(evt).offsetY : evt.offsetY;
a = $("box").offsetWidth / 2;
b = $("box").offsetHeight / 2;
$("png").style.marginTop= - (yPag - b) + "px";
$("png").style.marginLeft= - (xPag - a) + "px";
}
//ff
function getOffset(evt)
{
vartarget = evt.target;
if(target.offsetLeft == undefined)
{
target = target.parentNode;
}
varpageCoord = getPageCoord(target);
vareventCoord =
{
x: window.pageXOffset +evt.clientX,
y: window.pageYOffset +evt.clientY
};
varoffset =
{
offsetX: eventCoord.x -pageCoord.x,
offsetY: eventCoord.y -pageCoord.y
};
returnoffset;
}
function getPageCoord(element)
{
varcoord = {x: 0, y: 0};
while(element)
{
coord.x += element.offsetLeft;
coord.y += element.offsetTop;
element = element.offsetParent;
}
returncoord;
}
</script>
</head>
<body>
<div id="box">
<img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif"id="png"/>
</div>
<br /><br /><br /><br /><br /><br />
<div id="mainBox" onmousemove="change(event);">
<img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif"/>
</div>
<p>把鼠标滑过较大的图片，将出现效果！</p>
</body>
</html>
页:
[1]