JQ 放大镜

Posted iwaityou

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQ 放大镜相关的知识，希望对你有一定的参考价值。

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#shangpin{
background-image: url(images/userimg.jpg);
width: 300px;
height: 300px;
border: 1px red solid;
}
#shangpin div{
width: 80px; height: 80px;
background-color: rgba(200,100,0,0.4);
display: none;
position: relative;
}
#fangDa{
width:200px;height: 200px;
border: 1px red solid;
position: absolute;
left: 300px;
top: 50px;
display: none;
background-size: 500%;
}
</style>
<script src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(function(){
$(‘#shangpin‘).hover(
function(){
$(‘#shangpin div‘).show();
$(‘#fangDa‘).show().css(‘background-image‘,$(this).css(‘background-image‘));
},function(){
$(‘#shangpin div‘).hide();
$(‘#fangDa‘).hide();
}
).mousemove(function(e){
var indexX = e.pageX-$(‘#shangpin‘).offset().left;
var indexY =e.pageY-$(‘#shangpin‘).offset().top;
//内Div移动
var dleft = 0;
if(indexX-$(‘#shangpin div‘).width()/2<0){
dleft = 0;
}else if(indexX-$(‘#shangpin div‘).width()/2>$(‘#shangpin‘).width() - $(‘#shangpin div‘).width()){
dleft = $(‘#shangpin‘).width() - $(‘#shangpin div‘).width();
}else{
dleft=indexX-$(‘#shangpin div‘).width()/2;
}

var dtop = 0;
if(indexY-$(‘#shangpin div‘).height()/2<0){
dtop = 0;
}else if(indexY-$(‘#shangpin div‘).height()/2>$(‘#shangpin‘).height() - $(‘#shangpin div‘).height()){
dtop = $(‘#shangpin‘).height() - $(‘#shangpin div‘).height();
}else{
dtop=indexY-$(‘#shangpin div‘).height()/2;
}
$(‘#shangpin div‘).css({"top":dtop,"left":dleft});
$(‘#fangDa‘).css({‘background-position-x‘:-dleft*3,‘background-position-y‘:-dtop*3})
});

});
</script>
</head>
<body>
<div id="shangpin">
<div></div>
</div>
<div id="fangDa"></div>
</body>
<技术分享图片ml>













































































以上是关于JQ 放大镜的主要内容，如果未能解决你的问题，请参考以下文章

基于jq放大镜的原型扩展

JQ面向对象的放大镜

JQ实战天猫淘宝放大镜

jq手机端手势放大缩小怎么弄啊，例如下图使其放大

jq随手写图片放大

jq鼠标经过，放大图片