在网上看到好多人搜索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 来实现这一效果。 首先，我们需要了解基本的 HTML 结构，通常我们会有一个...
首先，`zoomy.js`是一个轻量级的JavaScript库，专门用于实现图片的局部放大效果。这个库的特点是代码简洁，易于理解和使用，且对性能的影响较小。`zoomy.min.js`是`zoomy.js`的压缩版本，适用于生产环境，以减少页面...
标题“多图片切换效果JavaScript实现”指的是一种能够动态展示多张图片的技术，这种技术可以创建一个类似焦点图的效果，用户无需手动点击或滚动，图片会按照预设的时间间隔自动轮换。这在网站的首页或者产品展示区...
本篇内容主要围绕如何使用JavaScript编程语言制作一个动态时钟效果，包括显示当前日期和时间，并且每秒更新一次，这种动态时钟在网页设计中能够提供实时的用户体验。 首先，需要了解JavaScript是一种高级的、解释型...
**实时显示** 是通过Ajax的异步特性实现的，服务器处理图片上传后，返回一个确认消息，JavaScript接收到消息后更新页面，显示上传成功的提示或新图片。 **图片大小设置** 可能涉及到两部分：前端预览和后端处理。...
javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询...
实现这些动态效果，我们还可以借助一些JavaScript库，如jQuery、React或Vue.js，它们提供了更方便的操作DOM的方法和丰富的动画效果。例如，jQuery的`slideToggle()`函数可以轻松实现菜单的滑动展开和折叠效果。 在...
HTML（超文本标记语言）是网页的基础结构，而JavaScript则提供了动态效果和交互性。 首先，我们从HTML部分开始。HTML用于创建网页的基本结构，包括图像元素（`<img>`）和可能的按钮或链接元素。在描述中提到的案例...
在JavaScript中实现图片轮流显示是一项常见的网页动态效果需求，它能为用户带来更生动的视觉体验。本教程将深入探讨如何使用JavaScript实现这一功能，并提供详细的步骤和代码示例。 首先，我们需要理解基本的HTML...
"JS图片局部放大效果"就是一个典型的实现方式，它通过JavaScript（可能结合jQuery库）来创建一个类似京东购物平台的放大镜效果，让用户可以方便地查看产品图片的细节。 首先，我们要了解这个功能的基本原理。当鼠标...
在网页设计中，图片特效是提升用户体验的重要手段，本文将深入探讨使用JavaScript实现的四种图片特效：圆角+阴影效果、斜光阴影效果、相框效果以及水倒映效果。 首先，我们来看**圆角+阴影效果**。在CSS3中，我们...
通过研究和实践这个"JavaScript图片切换效果.rar"中的代码，你可以学习到如何用JavaScript实现动态效果，这对于提升网页交互性和吸引力非常有帮助。同时，这也是一个很好的练习项目，可以帮助你深入理解JavaScript...
通过JavaScript，开发者可以实现动态图片效果，如淡入淡出、滑动显示、旋转、缩放等，为静态的图片添加生动的交互性。 2. **相册特效**：在描述中提到的相册特效是专门针对图片集合的应用。常见的相册特效包括幻灯...
在这个场景中，JavaScript将用于控制图片的显示和隐藏，以实现切换效果。 实现图片切换展示效果，通常会涉及以下几个关键知识点： 1. DOM操作：Document Object Model (DOM)是HTML和XML文档的结构表示。JavaScript...
JavaScript是实现轮播图动态效果的关键。主要功能包括： - **图片切换**：通过改变图片容器（`.slider-img`）的`left`或`transform`属性来实现图片的左右移动，模拟切换效果。 - **小圆点生成**：根据图片的数量...
在本文中，我们将深入探讨如何使用jQuery插件Cloud-Zoom来实现图片的局部放大显示效果。Cloud-Zoom是一款强大的jQuery插件，它为网站的图片查看功能提供了丰富的交互体验，尤其是对于电商网站上的商品展示非常实用。...
javascript 实现的进度条效果 javascript 实现的进度条效果
因此，我们转向JavaScript，它允许我们动态改变CSS属性，实现动态效果。这里我们介绍几种常见的动态背景图实现方式： 1. **基于时间的动画**：可以使用JavaScript的`setInterval`或`requestAnimationFrame`来定时...
本文将详细介绍使用JavaScript实现日期时间动态显示的示例代码。通过这个示例，我们可以了解如何在不刷新页面的情况下，让时间显示始终处于更新状态。 首先，我们需要了解页面的构成。在这段代码中，HTML部分定义了...