jquery实现淘宝商品图片局部放大
时间：2022-11-24 09:11:21|栏目：jquery|点击： 次
本篇博文用于简单记录图片放大功能实现，供大家参考，具体内容如下
功能实现还存在一些小漏洞在文章结尾提出，希望各位指正
1、图片放大初考虑将图片转换为字体图片形式，然后进行放大处理，但最终本人技术不过关无法实现，后用width: 200%;进行一般的图片放大，所以当图片越大就存在一些失真；
2、图片放大后的显示为本次实现的关键，通过获取鼠标指针的位置从而获取指针在图片的那一个位置，再以当前位置进行图片放大，放大后将图片进行偏移，偏移量以鼠标指针在原图的位置上获取的left和top值乘以放大倍数就可以显示局部放大的功能了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.10.2.js" ></script>
<style>
*{margin: 0;padding: 0;}
.div1{
width: 450px;
height: 300px;
overflow: hidden;
display: inline-block;
}
.div1>img{width: 100%;}
.div2{
width: 450px;
height: 300px;
border: 1px solid #A9A9A9;
overflow: hidden;
display: inline-block;
position: relative;
}
.div2>img{
position: absolute;
width: 200%;
height: 200%;
}
.list1{
width: 70px;
height: 50px;
float: left;
margin-left: 10px;
}
.list1>img{width: 100%;}
#zhezhao{
width: 100px;
height: 100px;
background: #BC8F8F;
opacity: 0.7;
display: none;
position: absolute;
}
</style>
</head>
<body>
<div class="div1">
<img src="../img/wall1.jpg" alt="" class="img1" />
<div id="zhezhao"></div>
</div>
<div class="div2"></div>
<div class="list">
<div class="list1">
<img src="../img/wall2.jpg" alt="" class="listimg1" />
</div>
<div class="list1">
<img src="../img/wall3.jpg" alt="" class="listimg2" />
</div>
<div class="list1">
<img src="../img/wall4.jpg" alt="" class="listimg3" />
</div>
<div class="list1">
<img src="../img/wall6.jpg" alt="" class="listimg4" />
</div>
<div class="list1">
<img src="../img/wall5.jpg" alt="" class="listimg5" />
</div>
</div>
<script>
$(function(){
$('.list1').mouseover(function(){
$('.div1').children()[0].src = $(this).children()[0].src;
});
$('.div1').mousemove(function(e){
$('#zhezhao').css({
left: e.clientX-50+'px',
top: e.clientY-50+'px',
display: 'block'
});
var $img = $('.div1').children().eq(0);
$('.div2').empty();
$('.div2').append($img.clone());
$('.img1').css({
left: -(e.clientX-50)*2+'px',
top: -(e.clientY-50)*2+'px'
});
if(50>e.clientX||e.clientX>450||50>e.clientY||e.clientY>300) {
$('#zhezhao').css({
display: 'none'
});
}else{ //(400<e.clientX&&e.clientX<450||250<e.clientY&&e.clientY<300)
$('#zhezhao').css({
left: e.clientX-50+'px',
top: e.clientY-50+'px',
display: 'block'
});
}
});
});
</script>
</body>
</html>
本功能在具体操作上还存在一些问题，当鼠标快速移开原图区域时，无法有效的监听到鼠标移出区域的事件，在考虑使用移出事件时，鼠标悬浮于原图上的遮罩层影响力鼠标在原图上的移出事件，无法很好的解决，希望各位帮忙移出事件。
上一篇：jquery 分页控件实现代码
栏 目：jquery
下一篇：jQuery实现底部浮动窗口效果
本文标题：jquery实现淘宝商品图片局部放大
本文地址：http://www.codeinn.net/misctech/219762.html
