|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-03-04
最后修改：2009-06-11
在网上看到好多人搜索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>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-03-08
效果不错，看代码也挺少的~~学习！
|
| 返回顶楼 | |
|
发表时间：2009-03-09
watershitter 写道 效果不错，看代码也挺少的~~学习！ 代码为了浏览器兼容才这么多的。关键代码是： # function $(id){return document.getElementById(id);} # # function change(evt){ # evt = evt || window.event; # # xPag = evt.offsetX; # yPag = evt.offsetY; # # a = $("box").offsetWidth / 2; # b = $("box").offsetHeight / 2; # # $("png").style.marginTop = - (yPag - b) + "px"; # $("png").style.marginLeft = - (xPag - a) + "px"; # } |
| 返回顶楼 | |
|
发表时间：2009-06-30
不错，要是还能放大就更不错了
|
| 返回顶楼 | |
浏览 9849 次
