<!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: block;
} #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="win7.jpg" id="srcImg" />
</div>
<div id="zoom">
<img id="zoomImg" />
</div>
<div id="detail">
详细说明
</div>
<script type="text/javascript" src="jquery-1.3.1.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();
//console.log(originW);
//获取将被缩小的系数zoomRate
if (bal >= 4 / 3 && oW > originW) { //如果图片比较宽并且过界的话
var zoomRate = oW / originW;
//originW展示区图片区域;
//oImg为原来的那个显示区域；
oImg.width(originW);
//console.log(oImg.width(originW).attr("width"));
oImg.height(originW / bal);
//console.log(originW / bal);
//console.log(oImg.height(originW / bal).attr("height"));
// 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();
// console.log(oPos);
var w = oImg.width() / zoomRate / 2;
var h = oImg.height() / zoomRate / 2;
/*
console.info(w);
console.info(h);
*/
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>
分享到：
相关推荐
在Unity引擎中，实现“鼠标滑过，图片局部放大效果”是一种常见的交互设计，常见于电商网站的商品展示或游戏中的UI元素互动。这种效果能够增强用户的视觉体验，提供更直观的信息展示。以下将详细介绍如何利用Unity来...
在Android开发中，实现“Android图片局部放大镜”的功能是一项常见的需求，特别是在处理地图、细节丰富的图像或文本阅读等场景。这个功能允许用户在不改变整个图片大小的情况下，聚焦并放大图片的特定区域，以便更好...
总结，C# WinForm中实现pictureBox控件背景图片局部放大，主要涉及以下知识点： 1. 图像处理：使用Bitmap和Graphics对象进行图像操作。 2. 事件处理：处理pictureBox的MouseMove和Paint事件。 3. 坐标转换：将鼠标...
在IT行业中，图片局部放大的技术常常用于提升用户体验，特别是在电商网站上，用户往往需要查看商品的细节。这个“图片局部放大（仿淘宝）”的功能就是模拟了淘宝网站中的图片查看方式，允许用户将鼠标悬停在图片的...
**jQuery图片局部放大的原理与实现** 在网页设计中，为用户提供高质量的视觉体验是至关重要的，而图片局部放大功能可以有效地提升用户的交互性。jQuery作为一个轻量级、高效的JavaScript库，提供了丰富的API和插件...
标题 "jquery图片局部放大代码" 涉及到的是使用jQuery库实现的一种常见的网页交互功能，即当用户鼠标悬停在图片上时，能够显示图片的局部放大效果，以提供更清晰的细节视图。这一功能在电商网站、产品展示页面等场景...
本话题主要关注“图片放大”和“图片局部放大”的技术实现，特别是使用jQuery插件jqZoom来达成这一目标。jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果，使得开发人员能够轻松地...
在网页设计中，为了提升用户体验，常常会使用到图片局部放大的功能，特别是在电商网站上，用户希望在查看商品图片时能清晰地看到细节。"JS图片局部放大效果"就是一个典型的实现方式，它通过JavaScript（可能结合...
在IT行业中，图片局部放大效果是一种常见的图像处理技术，它能帮助用户更加清晰地查看图片的细节部分。这种效果在各种应用中都有所体现，比如网页设计、图像编辑软件、甚至是移动应用。在这个案例中，我们有一个名为...
jQuery图片局部放大特效就是一种增强用户对图片细节观察的交互设计技术。它允许用户在不离开当前页面的情况下，通过鼠标悬停或点击来查看图片的局部放大版本，从而提供更清晰的视觉体验。这种效果常见于电商网站的...
"JS产品图片局部放大效果Html源码"就是一个典型的例子，它模拟了淘宝宝贝描述详情页中的图片查看功能，当用户鼠标悬停在图片上时，会出现一个放大镜效果，让用户可以更清晰地查看产品的细节。这种效果通过JavaScript...
在网页设计中，为了提升用户体验，常常会使用到图片局部放大镜特效。这种技术使得用户在鼠标悬停在图片上时，能查看图片的细节部分，就像透过放大镜观察一样。"jQuery图片局部放大镜特效"是利用JavaScript库jQuery...
在网页设计中，"鼠标滑过图片局部放大"是一种常见的交互效果，它可以增强用户体验，让用户在不离开当前页面的情况下预览图片的细节。这个效果通常应用于电商网站的产品展示或者任何需要用户查看图片详细信息的场景。...
在C#编程中，实现图片局部放大的功能可以极大地提升用户体验，特别是在电商网站上查看商品细节时。这个功能类似于淘宝网的图片放大效果，让用户能够更清晰地查看图片的某个部分。下面我们将深入探讨如何使用C#来实现...
"商品图片局部放大效果"是一种常见的用户体验设计，它允许用户在不离开当前页面的情况下，通过鼠标悬停或点击来查看商品图片的细节部分，从而提高购物体验。这种功能在JavaScript商城详细页中尤为常见，因为它能够...
在本教程中，我们将深入探讨如何使用这两种技术创建一个“图片局部放大效果”。 首先，让我们了解JavaScript在这个过程中的作用。JavaScript是一种客户端脚本语言，用于增加网页的交互性。在图片局部放大效果中，JS...
在网页设计中，为了提升用户体验，常常会使用到图片局部放大的功能，特别是在产品展示或者图像细节呈现的场景。这个“图片局部放大JS特效”就是一个专门实现这一功能的JavaScript库。它提供了多种不同的放大效果，...
在IT行业中，jQuery图片局部放大预览插件是一种常见的网页交互功能，尤其在电商网站上广泛应用，用于提高用户对商品细节的查看体验。这个插件允许用户在不离开当前页面的情况下，通过鼠标悬停或点击来查看图片的局部...
综上所述，实现"Delphi 放大图片，拖动图片局部放大"的功能，需要掌握 Delphi 的图形处理库、TImage 和 TTrackBar 控件的使用，理解图像坐标转换，应用适当的放大算法，以及熟练运用事件驱动编程和绘图函数。...
总结来说，这个JS产品图片局部放大效果结合了事件监听、DOM操作、CSS样式控制和浏览器兼容性处理等多个JavaScript核心技术，是提高网页交互性和用户体验的重要手段。在实践中，开发者需要熟练掌握这些技能，才能创造...