在网上看到好多人搜索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 结构，通常我们会有一个...
本主题主要围绕"图片显示特效javascript"展开，探讨如何利用JavaScript实现各种图片展示的动态效果。 1. 图片加载：JavaScript可以监测图片的加载状态，例如使用`onload`事件来处理图片加载完成后执行的代码，确保...
首先，`zoomy.js`是一个轻量级的JavaScript库，专门用于实现图片的局部放大效果。这个库的特点是代码简洁，易于理解和使用，且对性能的影响较小。`zoomy.min.js`是`zoomy.js`的压缩版本，适用于生产环境，以减少页面...
标题“多图片切换效果JavaScript实现”指的是一种能够动态展示多张图片的技术，这种技术可以创建一个类似焦点图的效果，用户无需手动点击或滚动，图片会按照预设的时间间隔自动轮换。这在网站的首页或者产品展示区...
本篇内容主要围绕如何使用JavaScript编程语言制作一个动态时钟效果，包括显示当前日期和时间，并且每秒更新一次，这种动态时钟在网页设计中能够提供实时的用户体验。 首先，需要了解JavaScript是一种高级的、解释型...
通过这个项目，你不仅能够学习到如何运用 Canvas API 进行图形绘制，还能掌握如何利用 JavaScript 实现动画效果。无论你是编程新手还是有经验的开发者，这个项目都将为你提供灵感和实践的机会，让我们一起探索如何在...
javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询...
"JS图片局部放大效果"就是一个典型的实现方式，它通过JavaScript（可能结合jQuery库）来创建一个类似京东购物平台的放大镜效果，让用户可以方便地查看产品图片的细节。 首先，我们要了解这个功能的基本原理。当鼠标...
在网页设计中，动态效果是提升用户体验的重要手段之一，其中图片的渐隐渐现效果尤其常见，它可以使页面过渡更加平滑，增加视觉吸引力。本文将深入探讨如何使用JavaScript实现这一效果。 首先，我们需要理解...
以上就是实现“商品图片局部放大效果”的主要技术要点，它涉及到前端开发的多个方面，包括JavaScript交互、CSS样式、DOM操作、图像处理、分页逻辑以及性能优化等。一个完整的商城详细页商品图片局部放大效果解决方案...
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言，它主要负责处理客户端的交互和动态效果。在网页设计中，跑马灯（Carousel）效果是一种常见的动态展示元素，常用于轮播图片或文本，给用户带来生动的视觉...
在网页设计中，图片特效是提升用户体验的重要手段，本文将深入探讨使用JavaScript实现的四种图片特效：圆角+阴影效果、斜光阴影效果、相框效果以及水倒映效果。 首先，我们来看**圆角+阴影效果**。在CSS3中，我们...
通过研究和实践这个"JavaScript图片切换效果.rar"中的代码，你可以学习到如何用JavaScript实现动态效果，这对于提升网页交互性和吸引力非常有帮助。同时，这也是一个很好的练习项目，可以帮助你深入理解JavaScript...
3. **动态调整样式**：通过JavaScript动态调整放大镜`div`的位置和图片的显示部分，实现平滑过渡效果。 #### 总结 本示例通过纯JavaScript实现了鼠标移入图片放大效果，不仅提高了网站的互动性，也增强了用户的...
JavaScript，作为一种广泛应用于网页开发的脚本语言，是实现网页动态效果的核心技术。它与HTML和CSS一起，构建了互联网的动态交互体验。本压缩包“JAVAScript.zip”显然是一个关于JavaScript教学或示例资源的集合，...
在这个场景中，JavaScript将用于控制图片的显示和隐藏，以实现切换效果。 实现图片切换展示效果，通常会涉及以下几个关键知识点： 1. DOM操作：Document Object Model (DOM)是HTML和XML文档的结构表示。JavaScript...
JavaScript是实现轮播图动态效果的关键。主要功能包括： - **图片切换**：通过改变图片容器（`.slider-img`）的`left`或`transform`属性来实现图片的左右移动，模拟切换效果。 - **小圆点生成**：根据图片的数量...
在网页设计中，为了增强用户体验，常常会使用一种技术来实现图片的局部放大效果，让用户可以更清晰地查看图片的细节部分。这种效果通常被称为“放大镜”效果，它通过JavaScript（JS）和 Cascading Style Sheets（CSS...
在本文中，我们将深入探讨如何使用jQuery插件Cloud-Zoom来实现图片的局部放大显示效果。Cloud-Zoom是一款强大的jQuery插件，它为网站的图片查看功能提供了丰富的交互体验，尤其是对于电商网站上的商品展示非常实用。...
javascript 实现的进度条效果 javascript 实现的进度条效果