在网上看到好多人搜索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-04
Topcss
* QQ:419074376
* hi.baidu.com/topcss
*
*/
function
$(id){return document.getElementById(id);}
function
change(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)
{
var
target = evt.target;
if
(target.offsetLeft == undefined)
{
target = target.parentNode;
}
var
pageCoord = getPageCoord(target);
var
eventCoord =
{
x: window.pageXOffset +
evt.clientX,
y: window.pageYOffset +
evt.clientY
};
var
offset =
{
offsetX: eventCoord.x -
pageCoord.x,
offsetY: eventCoord.y -
pageCoord.y
};
return
offset;
}
function getPageCoord(element)
{
var
coord = {x: 0, y: 0};
while
(element)
{
coord.x += element.offsetLeft;
coord.y += element.offsetTop;
element = element.offsetParent;
}
return
coord;
}
</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>
分享到：
相关推荐
javascript实现图片局部放大效果
javascript 实现图片轮转效果，效果页面可查看当当品牌店铺
使用javascript实现flash的图片显示效果。
这是一个完全用JavaScript实现的图片切割效果实例，可以设置全透明、换图片、设置图片大小等。
javascript实现的图片点击水波荡漾效果 javascript实现的图片点击水波荡漾效果
主要为大家详细介绍了基于javascript实现动态时钟效果的相关资料，动态显示系统当前时间，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
web前端开发们需要很那些效果打交道,早上事情不多,分享一个javascript实现的绚丽图片展示效果,很适合在产品页面中出现. 这个效果主要和mootools结合一起使用的.
JavaScript实现页面动态验证码
javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询...
图片显示特效javascript 图片显示特效javascript 图片显示特效javascript
通过JS代码简单明了实现动态的显示一个钟表
JavaScript实现鼠标移入图片放大效果，JavaScript实现鼠标移入图片放大效果，好东西大家共享
javascript实现开门效果
用HTML+Javascript实现点击图片自动播放背景音乐。精巧实用，值得参考！
纯javascript实现上传图片前图片预览，判断图片大小，兼容ie-7到10 firefox chrome，非常不错，分享给大家。
支持图片上传及实时显示，可设置显示图片的大小。开发语言：php、Ajax、javascript
javascript 实现的进度条效果 javascript 实现的进度条效果
通过原生JavaScript+Css实现图片滑块效果，通过拖动按钮实现推拉门效果.
JavaScript实现网页图片等比例缩放 JS效果 JS效果特效 图片等比例缩放
JAVAscript实现网页动态的效果