我是在http://www.space007.com/200809/imgzoom/看到这个的，感觉很不错的效果。
效果: [url]http://www.space007.com/lab/pic/
[/url]
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>图片局部放大</title>
<style>
body {
font-size: 12px;
}
#origin {
float: left;
width: 400px;
height: 300px;
margin-right: 16px;
overflow: hidden;
cursor:url(point.ico), auto;
}
#origin img{
display:none;
}
#zoom {
float: left;
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
display: none;
}
#detail {
float: left;
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="origin"><img src="big.jpg" id="srcImg"></div>
<div id="zoom"><img id="zoomImg"></div>
<div id="detail">详细说明</div>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//获取两个图片对象
var oImg = $('#srcImg');
var nImg = $('#zoomImg');
//获取原始图片的宽,高以及宽/高比
var oW = oImg.width();
var oH = oImg.height();
var bal = oW/oH;
//获取图片展示区的宽度和高度
var originW = $('#origin').width();
var originH = $('#origin').height();
//获取将被缩小的系数zoomRate
if(bal >= 4/3 && oW>originW){ //如果图片比较宽并且过界的话
var zoomRate = oW/originW;
oImg.width(originW);
oImg.height(originW/bal);
oImg.show();
}else if(oH>originH){ //如果图片比较高并且过界
var zoomRate = oH/originH;
oImg.height(originH);
oImg.width(originH*bal);
oImg.show();
}else{
oImg.show();
$('#origin').css('cursor','default');
return
}
//设置放大图片的url地址
nImg.attr('src',oImg.attr('src'));
//获取原始图片的位置
var oPos = oImg.offset();
var w = oImg.width()/zoomRate/2;
var h = oImg.height()/zoomRate/2;
oImg.bind('mouseover',function(){
$('#detail').hide();
$('#zoom').show();
});
oImg.bind('mouseout',function(){
$('#detail').show();
$('#zoom').hide();
});
oImg.bind('mousemove',function(event){
var x = event.pageX - oPos.left;
x=x<(oImg.width()-w)?x<w?w:x:oImg.width()-w;
nImg.css('marginLeft',(w-x)*zoomRate);
var y = event.pageY - oPos.top;
y=y<(oImg.height()-h)?y<h?h:y:oImg.height()-h;
nImg.css('marginTop',(h-y)*zoomRate);
});
});
</script>
</body>
</html>
分享到：
相关推荐
放大镜效果-图片局部放大 鼠标放上去 图片变大 而且清晰
"Android-Android自定义控件之局部图片放大镜--BiggerView"这个项目，专注于为用户提供一种可以局部放大图片的功能，类似于我们在电商平台浏览商品详情时常见的图片放大镜效果。这种功能能够帮助用户更清晰地查看...
在IT领域，"局部放大，放大镜效果"是一种常见的用户界面功能，特别是在图像查看、设计工具和地图应用中。这个程序实现了一个简单的Java Applet，它允许用户在图像上移动鼠标时，对图像的特定区域进行实时放大，类似...
本项目“图片放大镜--模仿淘宝”旨在实现类似的功能，让用户能够无损地放大图片以观察细节，提升购物体验。 在网页或应用开发中，图片放大镜功能主要由以下几个关键知识点构成： 1. **JavaScript与jQuery**：通常...
可以通过设置`BitmapShader`来实现局部放大的效果，`BitmapShader`可以根据指定的模式对位图进行着色，这里我们可以使用`SHADER_MODE_CLAMP_TO_EDGE`来保证边缘的平滑过渡。 3. **计算放大区域**：当用户点击或移动...
"jQuery图片局部放大镜特效"是利用JavaScript库jQuery实现的一种高效、便捷的交互效果。在本案例中，我们将深入探讨这个主题，包括jQuery的基础知识，图片放大镜的原理，以及如何使用jQuery来实现这样的特效。 首先...
"JS产品图片局部放大效果Html源码"就是一个典型的例子，它模拟了淘宝宝贝描述详情页中的图片查看功能，当用户鼠标悬停在图片上时，会出现一个放大镜效果，让用户可以更清晰地查看产品的细节。这种效果通过JavaScript...
在网页设计中，为了增强用户体验，常常会使用一种技术来实现图片的局部放大效果，让用户可以更清晰地查看图片的细节部分。这种效果通常被称为“放大镜”效果，它通过JavaScript（JS）和 Cascading Style Sheets（CSS...
"图片的局部放大（放大镜效果）"是一种常见的网页交互功能，尤其在电商网站中广泛运用，如淘宝的商品详情页。这个功能基于jQuery库，它的实现原理是利用JavaScript和CSS技术来模拟放大镜的效果，当鼠标悬停在图片上...
在Android开发中，实现图片局部放大效果，通常被称为“放大镜”功能，它能为用户提供一个更加直观的查看细节的方式。这种效果常用于电子阅读器、地图应用或者任何需要用户查看图片细节的场景。以下是对这个主题的...
标题 "Delphi7-delphiXE10屏幕放大镜 局部放大 可调放大倍数" 描述的是一个使用 Delphi 开发的屏幕放大工具，适用于 Delphi 7 到 Delphi XE10 等多个版本。该工具允许用户在屏幕上选择一个区域，并对其进行放大，以...
"JS图片局部放大效果"就是一个典型的实现方式，它通过JavaScript（可能结合jQuery库）来创建一个类似京东购物平台的放大镜效果，让用户可以方便地查看产品图片的细节。 首先，我们要了解这个功能的基本原理。当鼠标...
这种效果允许用户在鼠标悬停在图片上时，看到图片的局部区域以更大的比例显示，类似于实体商店中的放大镜。本教程将详细介绍如何使用JavaScript，特别是jQuery库，来实现这样的功能。 首先，我们来看"js实现图片...
这种效果可以让用户在鼠标悬停在图片上时，看到图片的局部放大视图，就像在实体店中通过放大镜查看商品细节一样。本教程将详细介绍如何使用jQuery实现一个简单而实用的图片放大镜效果。 首先，jQuery是一款广泛使用...
在网页设计中，为了提升用户体验，常常需要实现一些交互效果，比如图片的局部放大功能，这正是"通过js插件图片局部放大效果和放大镜的功能"所涉及的技术。这一技术通常用于电商网站或者产品展示页面，使用户可以更...
"商品图片局部放大效果"是一种常见的用户体验设计，它允许用户在不离开当前页面的情况下，通过鼠标悬停或点击来查看商品图片的细节部分，从而提高购物体验。这种功能在JavaScript商城详细页中尤为常见，因为它能够...
局部放大镜的基本原理是通过创建一个透明的放大层，当鼠标在图片上移动时，实时改变放大层的位置和显示的图片区域，从而实现局部放大的效果。这个放大层通常是一个小的浮动窗口，显示的是鼠标下方图片对应区域的放大...
标题“图片显示--放大镜效果(JQuery)”指的是使用JQuery库实现的一种互动式的图片展示技术，它为用户提供了一种类似放大镜的效果，让用户能够更清晰地查看图片的细节部分。这种效果通常用于电商网站的商品展示，提高...
在网页设计中，为了提升用户体验，局部图片放大镜效果是一种常用的技术，它允许用户在鼠标悬停或点击图片时查看细节。jQuery作为一个轻量级、功能丰富的JavaScript库，提供了多种实现这种效果的方法。本篇文章将深入...
总结起来，"js图片局部放大效果"是一种提高网页图片查看体验的技术，主要通过JavaScript监听鼠标事件，结合`canvas`进行图像处理来实现。了解并掌握这一技术，能为你的网页设计增添更多交互性和专业性。