您的位置：首页 > Web前端 > JQuery

分别用javascript，jquery实现 对图片的放大镜效果

2017-03-25 21:10 921 查看
javascript实现：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#dsmall{
height: 200px;
width: 200px;
border: solid 1px;
float: left;
position: relative;
left: 5px;
top: 5px;
overflow: hidden;
}
#dsmall img{
height: 200px;
}
#smallblock{
height: 40px;
width: 40px;
background-color: white;
opacity: 0.5;
position: absolute;
left: 0px;
top: 0px;
display: none;
}
#dbig{
/* display: none;*/
height: 400px;
width: 400px;
position: absolute;
left: 250px;
top:13px;
overflow: hidden;
display: none;
}
#bigimg{
height: 480px;
position: absolute;
left: 0px;
right: 0px;
}
</style>

</head>
<body>
<div id="dsmall">
<img src="img/small.jpg" alt="">
<div id="smallblock"></div>
</div>
<div id="dbig">
<img src="img/big.jpg" alt="" id="bigimg">
</div>

<script src="js/jquery.min.js"></script>
<script>
var oSmall=document.getElementById("dsmall");
var oSBlock=document.getElementById("smallblock");
var oBig=document.getElementById("dbig");
var oBImg=document.getElementById("bigimg");
oSmall.onmouseover = function(){
oSBlock.style.display='block';
oBig.style.display='block';
}
oSmall.onmouseout = function(){
oSBlock.style.display='none';
oBig.style.display='none';
}
oSmall.onmousemove = function(e){
var e=e||window.event;
var sleft=e.clientX-oSmall.offsetLeft-oSBlock.offsetWidth/2;
var stop=e.clientY-oSmall.offsetTop-oSBlock.offsetHeight/2;
if(sleft>oSmall.offsetWidth-oSBlock.offsetWidth){
sleft=oSmall.offsetWidth-oSBlock.offsetWidth;
}
if(sleft<0){
sleft=0;
}
if(stop>oSmall.offsetHeight-oSBlock.offsetHeight){
stop=oSmall.offsetHeight-oSBlock.offsetHeight;
}
if(stop<0){
stop=0;
}
oSBlock.style.left=sleft+'px';
oSBlock.style.top=stop+'px';

var fleft=sleft/(oSmall.offsetWidth-oSBlock.offsetWidth);
var ftop=stop/(oSmall.offsetHeight-oSBlock.offsetHeight);
oBImg.style.left=fleft*(oBig.offsetWidth-oBImg.offsetWidth)+'px';
oBImg.style.top=ftop*(oBig.offsetHeight-oBImg.offsetHeight)+'px';

}
</script>
</body>
</html>


jquery实现：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#dsmall{
height: 200px;
width: 200px;
border: solid 1px;
float: left;
position: relative;
left: 5px;
top: 5px;
overflow: hidden;
}
#dsmall img{
height: 200px;
}
#smallblock{
height: 40px;
width: 40px;
background-color: white;
opacity: 0.5;
position: absolute;
left: 0px;
top: 0px;
display: none;
}
#dbig{
/* display: none;*/
height: 400px;
width: 400px;
position: absolute;
left: 250px;
top:13px;
overflow: hidden;
display: none;
}
#bigimg{
height: 480px;
position: absolute;
left: 0px;
right: 0px;
}
</style>

</head>
<body>
<div id="dsmall">
<img src="img/small.jpg" alt="">
<div id="smallblock"></div>
</div>
<div id="dbig">
<img src="img/big.jpg" alt="" id="bigimg">
</div>

<script src="js/jquery.min.js"></script>
<script>
$(function(){
var $dsmall=$('#dsmall');
var $smallblock=$('#smallblock');
var $dbig=$('#dbig');
var $bigimg=$('#bigimg');
$dsmall.hover(function(){
$smallblock.show();
$dbig.show();
},function(){
$smallblock.hide();
$dbig.hide();
})
$dsmall.mousemove(function(e){
var sleft=e.pageX-$dsmall.offset().left-$smallblock.width()/2;

var stop=e.pageY-$dsmall.offset().top-$smallblock.height()/2;

if(sleft<0){
sleft=0;
}
if(stop<0){
stop=0;
}
if(sleft>$dsmall.width()-$smallblock.width())
{
sleft=$dsmall.width()-$smallblock.width();
}
if(stop>$dsmall.height()-$smallblock.height())
{
stop=$dsmall.height()-$smallblock.height();
}
$smallblock.css({
left:sleft,
top:stop
});

var fleft=sleft/($dsmall.width()-$smallblock.width());
var ftop=stop/($dsmall.height()-$smallblock.height());
var bleft=fleft*($dbig.width()-$bigimg.width());
var btop=ftop*($dbig.height()-$bigimg.height());
$bigimg.css({
left:bleft,
top:btop
})
})
})
</script>
</body>
</html>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript jquery 放大镜效果
相关文章推荐
新的分享
章节导航