`
ihuashao
  • 浏览: 4722607 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

用javascript放大图片局部

JavaScriptHTML 
阅读更多




<html>
<head>
<title>emu</title>
</head>
<body>
<BR>
原图：<BR>
<imgsrc="http://img.pconline.com.cn/images/photo2/839980/1118509777696.JPG"onmousemove="zoom()"id=srcImg>
<BR>
局部放大图：<BR>
<divstyle="overflow:hidden"><imgid=zoomImg></div>

<SCRIPTLANGUAGE="JavaScript">
<!--
zoomImg.src=srcImg.src;
srcImg.height=srcImg.height/2;
varzoomRate=5;
zoomImg.height=srcImg.height*zoomRate;
zoomImg.parentNode.style.width=srcImg.width;
zoomImg.parentNode.style.height=srcImg.height;
functionzoom(){
varelm=event.srcElement;
h=elm.offsetHeight/zoomRate/2;
w=elm.offsetWidth/zoomRate/2;
varx=event.x-elm.offsetLeft;
x=x<(elm.offsetWidth-w)?x<w?w:x:elm.offsetWidth-w;
zoomImg.style.marginLeft=(w-x)*zoomRate;
vary=event.y-elm.offsetTop;
y=y<(elm.offsetHeight-h)?y<h?h:y:elm.offsetHeight-h;
zoomImg.style.marginTop=(h-y)*zoomRate;
}
//-->
</SCRIPT>
</body>
</html>
分享到：
| 反思以前对“多对多”关系处理的设计
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    放大图片局部 JS+css

    例如，你可以创建一个图片列表，每个图片都有一个唯一的ID，当用户点击某张图片时，通过AJAX从服务器获取该图片的高分辨率版本，然后使用上述JS和CSS方法实现局部放大。这样可以提高用户体验，同时减轻页面加载负担...

    javascript实现图片局部放大效果

    JavaScript 是一种广泛使用的客户端脚本语言，它可以动态地修改页面元素，实现图片局部放大的功能。本文将深入探讨如何使用 JavaScript 来实现这一效果。 首先，我们需要了解基本的 HTML 结构，通常我们会有一个...

    javascript对图片局部放大

    在JavaScript中实现图片局部放大的技术是Web开发中一种常见的需求，它允许用户在查看大图时聚焦到图像的特定区域，从而提供更细致的视觉体验。本文将深入探讨如何利用JavaScript来创建这样的功能。 首先，我们需要...

    通过 javascript 实现局部放大图

    首先，`zoomy.js`是一个轻量级的JavaScript库，专门用于实现图片的局部放大效果。这个库的特点是代码简洁，易于理解和使用，且对性能的影响较小。`zoomy.min.js`是`zoomy.js`的压缩版本，适用于生产环境，以减少页面...

    JS图片局部放大效果

    在网页设计中，为了提升用户体验，常常会使用到图片局部放大的功能，特别是在电商网站上，用户希望在查看商品图片时能清晰地看到细节。"JS图片局部放大效果"就是一个典型的实现方式，它通过JavaScript（可能结合...

    图片放大、图片局部放大

    本话题主要关注“图片放大”和“图片局部放大”的技术实现，特别是使用jQuery插件jqZoom来达成这一目标。jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果，使得开发人员能够轻松地...

    移动焦点放大图片局部(仿淘宝

    在网页设计中，"移动焦点放大图片局部"是一种常见的交互效果，它常见于电商网站，如淘宝，用于提升用户体验，使用户能更清晰地查看商品细节。这种效果通常包括一个主图展示区域和一个放大部分的缩略图，当用户在主图...

    图片局部放大效果

    3. **局部放大插件或库**：在Web开发中，我们可以利用JavaScript库如jQuery Zoom、Magnific Popup等，或者使用CSS3的`transform: scale()`属性配合`transition`实现平滑的局部放大效果。这些方法通常用于交互式图片...

    图片局部放大（仿淘宝）

    在实际项目中，开发者可能会选择使用现成的库或插件，如jQuery的`zoom`插件，或者使用现代Web API，如Intersection Observer，来实现更高效、更灵活的图片局部放大效果。 总的来说，实现“图片局部放大（仿淘宝）”...

    Jquery图片局部放大

    jQuery作为一个轻量级、高效的JavaScript库，提供了丰富的API和插件，使得实现图片局部放大变得简单易行。本教程将深入探讨如何使用jQuery实现这一功能，以及相关的实例应用。 1. **jQuery基础** 在开始之前，我们...

    js图片局部放大效果

    总结起来，"js图片局部放大效果"是一种提高网页图片查看体验的技术，主要通过JavaScript监听鼠标事件，结合`canvas`进行图像处理来实现。了解并掌握这一技术，能为你的网页设计增添更多交互性和专业性。

    jquery图片局部放大代码

    标题 "jquery图片局部放大代码" 涉及到的是使用jQuery库实现的一种常见的网页交互功能，即当用户鼠标悬停在图片上时，能够显示图片的局部放大效果，以提供更清晰的细节视图。这一功能在电商网站、产品展示页面等场景...

    jQuery图片局部放大特效.zip

    jQuery图片局部放大的核心原理是利用JavaScript和CSS来创建动态的放大镜效果。当用户将鼠标移动到图片上时，JavaScript检测到鼠标位置，并根据预设的放大倍数计算出相应局部区域的坐标。然后，这个局部区域会被放大...

    商品图片局部放大效果

    以上就是实现“商品图片局部放大效果”的主要技术要点，它涉及到前端开发的多个方面，包括JavaScript交互、CSS样式、DOM操作、图像处理、分页逻辑以及性能优化等。一个完整的商城详细页商品图片局部放大效果解决方案...

    图片放大和局部放大代码

    总之，图片放大和局部放大是提升网页用户体验的重要手段，而JavaScript和jQuery提供了强大的工具来实现这些功能。通过理解并实践这些代码，开发者可以更好地掌握前端动态效果的实现，为用户带来更加生动、细腻的视觉...

    JS产品图片局部放大效果Html源码

    "JS产品图片局部放大效果Html源码"就是一个典型的例子，它模拟了淘宝宝贝描述详情页中的图片查看功能，当用户鼠标悬停在图片上时，会出现一个放大镜效果，让用户可以更清晰地查看产品的细节。这种效果通过JavaScript...

    js局部放大图片

    在JavaScript（简称JS）编程中，局部放大图片是一种常见的交互效果，它允许用户在鼠标悬停或点击图片时，以放大镜的形式查看图片的细节。这个功能在网站展示产品细节或者图片密集型应用中非常常见，例如在线购物平台...

    图片局部放大特效 js

    下面我们将深入探讨如何使用JavaScript来创建图片局部放大特效，以及涉及到的相关技术点。 首先，我们要理解基本的HTML和CSS布局。在创建这种特效时，通常会有一个主图片元素和一个预览区域。主图片显示整个图像，...

    jquery图片局部放大镜特效.rar

    在网页设计中，为了提升用户体验，常常会使用到图片局部放大镜特效。这种技术使得用户在鼠标悬停在图片上时，能查看图片的细节部分，就像透过放大镜观察一样。"jQuery图片局部放大镜特效"是利用JavaScript库jQuery...

    JS放大镜,JavaScript图片放大代码.rar

    JS放大镜,JavaScript图片放大代码.rarJS放大镜,JavaScript图片放大代码.rarJS放大镜,JavaScript图片放大代码.rarJS放大镜,JavaScript图片放大代码.rarJS放大镜,JavaScript图片放大代码.rarJS放大镜,JavaScript图片...

Magicbox
Global site tag (gtag.js) - Google Analytics