注释：* 测试兼容it8，ff，chome，其余浏览器未测试；
* ff和chrome中需要设置图片的高度宽度；
<!doctype html>
<html>
<head><meta charset="gb2312">
<title></title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
.goods_img {
cursor: pointer;
float: left;
padding: 0;
position: relative;
width: 342px;
height: 455px;
margin-left: 200px;
}
.bigImg{display: block;}
body{ margin: 10px auto;}
</style>
</head>
<body>
<div class="goods_img">
<img id="mediumImg" src="small_img.jpg" zoomSrc="big_img.jpg"/>
</div>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
<script>
/*
* sImg：小图片的jquery对象；
* 小图片中的zoomSrc存储大图片的地址；
* 测试兼容it8，ff，chome，360；
* ff和chrome中需要设置图片的高度宽度；
***keimon***2013-01-07***
*/
function showBigImg(sImg){
var sContent = sImg[0].parentNode;
var sWidth = sImg.width() || 345; //chrome中不能自动获得图片的宽度和高度，需设置；
var sHeight = sImg.height() || 455;//
var sLeft = $(sContent).offset().left;
var sTop = $(sContent).offset().top;
var sLeft = $(sContent).offset().left;
var bLeft = sLeft+sWidth+10;
var bTop = sTop;
var bImgSrc = sImg.attr('zoomSrc');
//放置大图片的div框
var bContent = document.createElement('div');
var bContentStyle = {
width:sWidth+'px',
height:sHeight+'px',
left : bLeft+'px',
top : bTop +'px',
border :'1px solid #000',
overflow : 'hidden',
visibility : 'hidden',
position: 'absolute'
}
$(bContent).css(bContentStyle);
$('body').get(0).appendChild(bContent);
var bigImg = document.createElement('img');
$(bigImg).attr({'id':'bImg','src':bImgSrc});
var bigImgStyle = {
position:'absolute',
top:'0px',
left:'0px',
width:'1200px', //需要设置大图的宽度和高度，否则ff浏览器中存在问题；
height:'1600px' //
}
$(bigImg).css(bigImgStyle);
bContent.appendChild(bigImg);
//$(bContent).append($('<img id="bImg" style="position:absolute; top:0px; left:0px;">'))
//$('#bImg').attr('src',bImgSrc);
var bWidth = $('#bImg').width();
var bHeight = $('#bImg').height();
var hoverDivWidth = sWidth/bWidth * sWidth;
var hoverDivHeight = sHeight/bHeight * sHeight;
$('#a').html('hoverDivWidth'+hoverDivWidth);
$('#b').html('sWidth'+sWidth);
$('#c').html('bWidth'+bWidth);
//鼠标移入时，在小图片上的div框
var hoverDiv = document.createElement('div');
var hoverDivStyle = {
width:hoverDivWidth + 'px',
height:hoverDivHeight + 'px',
border:'1px solid #fff',
backgroundColor:'#fff',
position:'absolute',
visibility : 'hidden',
left:'0px',
top:'0px',
zIndex:999,
opacity:0.5
}
$(hoverDiv).css(hoverDivStyle);
sContent.appendChild(hoverDiv);
//鼠标在小图片上移动时，hoverDiv的位置发生变化，大图片的位置也发生变化；
$(sContent).mousemove(function(e){
var x = e.pageX;
var y = e.pageY;
var sx = x - sLeft - hoverDivWidth/2;
if(sx<0){
sx = 0;
}else if(sx>(sWidth-hoverDivWidth)){
sx = sWidth-hoverDivWidth;
}
var sy = y - sTop - hoverDivHeight/2;
if(sy<0){
sy = 0;
}else if(sy>(sHeight-hoverDivHeight)){
sy = sHeight-hoverDivHeight;
}
$(hoverDiv).css('visibility','visible');
//hoverDiv
$(hoverDiv).css('left', sx+'px');
$(hoverDiv).css('top', sy+'px');
//大图片
$('#bImg').css('visibility','visible');
var bx = -sx/sWidth*bWidth;
var by = -sy/sHeight*bHeight;
$('#bImg').css('left',bx+'px');
$('#bImg').css('top',by+'px');
})
$(sContent).mouseout(function(){
$(hoverDiv).css('visibility','hidden');
$('#bImg').css('visibility','hidden')
})
}
//调用放大镜方法
$(function(){
var sImg = $('#mediumImg');
showBigImg(sImg);
})
</script>
</html>
相关推荐
在网页设计中，为了提升用户体验，常常会使用到图片放大镜效果。这种效果可以让用户在鼠标悬停在图片上时，看到图片的局部放大视图，就像在实体店中通过放大镜查看商品细节一样。本教程将详细介绍如何使用jQuery实现...
使用react写一个仿图片放大镜效果使用react写一个仿图片放大镜效果
在网页设计中，为了提升用户体验，常常会使用到图片放大镜效果。这种效果可以让用户在鼠标悬停在图片上时，看到图片的局部放大视图，就像在实体店中通过放大镜观察商品一样。jQuery，一个广泛使用的JavaScript库，...
在网页设计中，图片放大镜效果是一种常见的交互设计，它能提供用户更细致查看产品细节的能力，尤其在电商网站上非常常见。JavaScript 是实现这种效果的理想选择，因为它可以在客户端动态处理DOM元素，实现即时的视觉...
在网页设计中，为了提升用户体验，常常会使用到图片放大镜效果。这种效果可以在用户将鼠标悬停在图片上时，使图片的部分区域以更大的比例显示，方便用户查看细节。"jquery图片放大镜效果鼠标移到图片放大CloudZoom...
"jQuery仿淘宝商品详情页图片放大镜效果"就是一个实现这种功能的技术方案，它适用于IE6及以上的浏览器，旨在提供与淘宝网站类似的放大镜效果。 首先，jQuery是一个强大的JavaScript库，它的易用性和丰富的插件使其...
本文将详细介绍如何使用JavaScript库jQuery来实现这一功能，主要围绕"jQuery实现图片放大镜效果"这一主题展开。 首先，jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。...
jqZoom是一种广泛应用于电商网站的JavaScript插件，它主要用于实现商品详细页面上的图片放大镜效果。这个效果使得用户能够在不离开原始图片位置的情况下，通过鼠标悬停或点击，查看商品图片的局部细节，从而提高购物...
在IT领域，图片放大镜效果通常用于电商网站或者图像展示应用中，允许用户对细节部分进行查看，提高用户体验。这个示例项目就是针对这一需求设计的，它利用JavaScript技术实现了一个图片放大镜的功能。 首先，我们要...
JavaScript图片放大镜效果是一种常见的网页交互功能，常用于电商网站的商品展示，允许用户在鼠标悬停或点击图片时查看图片的细节部分。这种效果通过结合HTML、CSS和JavaScript技术实现，为用户提供更好的视觉体验。 ...
在电子商务网站中，图片放大镜效果是一个非常常见的功能，它能提供给用户更细致的产品查看体验，特别是对于服装、饰品等细节丰富的商品。本资源提供的是一个商城图片放大镜效果的源码，包含了10种不同的实现方式，...
本资源“jquery图片放大镜插件制作多种图片放大镜效果.rar”显然是一个关于使用jQuery实现图片放大镜功能的项目压缩包。在电商网站、产品展示页面等场景，图片放大镜功能可以让用户更清晰地查看商品细节，提高用户...
在网页设计和开发中，有时候为了提供用户更好的交互体验，我们常常会利用JavaScript或相关的库实现一些特殊的效果，比如图片放大镜效果。标题中的"zoomimage"就是这样一个功能，它能够在用户点击图片时，呈现出一个...
购物网站上的图片放大镜效果是一种常见的交互设计，它允许用户在不离开商品页面的情况下，查看商品图片的细节，从而提高用户的浏览体验和购买决策的准确性。这种效果通过将鼠标悬停在图片上时，显示出一个浮动的放大...