Home >Web Front-end >JS Tutorial >Implement magnifying glass through jquery technology
This article gives you a detailed analysis of the method of using jquery to achieve the magnifying glass effect, as well as code sharing. If you are interested, learn it.
The two magnifying glass effects written in jquery do not use plug-ins. Conditioning and clarity of thought. It is not written in an object-oriented way, so it is easier for beginners to understand. Without further ado, let’s look at the code. The pictures will not be uploaded here, you can find them by yourself. It is best to find the proportion, so the effect is better.
<body>
<p id="father">
<p id="container">
<img src="img/400_1.jpg" style="display: block;">
<img src="img/400_2.jpg" >
<p class="shade"></p>
</p>
<p class="small first"><img src="img/50_1.jpg"></p>
<p class="small second"><img src="img/50_2.jpg"></p>
</p>
<p class="big">
<img src="img/800_1.jpg" style="display: block;">
<img src="img/800_2.jpg">
</p>
</body>css code
*{padding: 0; margin: 0;}
#father .small{width: 50px; height: 50px; border: 2px solid #ccc; bottom: 0; position: absolute;}
#father .second{left: 70px;}
.third{left: 140px;}
#father{position: relative; top: 100px; left: 50px; height: 460px;}
#container{position: absolute; width: 400px; height: 400px;}
#container img{position: absolute; display: none;}
.shade{width: 200px; height: 200px; position: absolute; background: #000; opacity: 0.4; top: 0;
left: 0; display: none;}
.big{width: 400px; height: 400px; position: absolute; top: 100px; overflow: hidden; left: 500px; display: none;}
.big img{width: 800px; height: 800px; position: absolute; display: none;}js code
<script type="text/javascript" src='js/jquery-1.12.4.min.js'></script>
<script type="text/javascript">
$(function () {
changePic('.first',0);
changePic('.second',1);
var shadeWidth = $('.shade').width(),//阴影的宽度
shadeHeight = $('.shade').height(),//阴影的高度
middleWidth = $('#container').width(),//容器的宽度
middleHeight = $('#container').height(),//容器的高度
bigWidth = $('.big').width(),//放大图片盒子的宽度
bigHeight = $('.big').height(),//放大图片盒子的高度
rateX = bigWidth / shadeWidth,//放大区和遮罩层的宽度比例
rateY = bigHeight / shadeHeight;//放大区和遮罩层的高度比例
//当鼠标移入与移出时阴影与放大去显现/消失
$('#container').hover(function() {
$('.shade').show();
$('.big').show();
}, function() {
$('.shade').hide();
$('.big').hide();
}).mousemove(function(e) {//当鼠标移动时，阴影和放大区图片进行移动
//记录下光标距离页面的距离
var x = e.pageX,
y = e.pageY;
//设置遮罩层的位置
$('.shade').offset({
top: y-shadeHeight/2,
left: x-shadeWidth/2
});
//获取遮罩层相对父元素的位置
var cur = $('.shade').position(),
_top = cur.top,
_left = cur.left,
hdiffer = middleHeight - shadeHeight,
wdiffer = middleWidth - shadeWidth;
if (_top < 0) _top = 0;
else if (_top > hdiffer) _top = hdiffer;
if (_left < 0) _left = 0;
else if (_left > wdiffer) _left =wdiffer;
//判断完成后设置遮罩层的范围
$('.shade').css({
top: _top,
left: _left
});
//设置放大区图片移动
$('.big img').css({
top: - rateY*_top,
left: - rateX*_left
});
});;
//封装的改变图片显示的函数
function changePic (element,index) {
$(element).click(function() {
$('#container img').eq(index).css('display', 'block').siblings().css('display', 'none');
$('.big img').eq(index).css('display', 'block').siblings().css('display', 'none');
});
}
});The above are commonly used, the following one is enlarged based on the original image of
htm
<body>
<p id="father">
<p id="container">
<img src="img/400_1.jpg" style="display: block;">
<img src="img/400_2.jpg" >
<img src="img/400_3.jpg" >
<p class="shade">
<img src="img/800_1.jpg" style="display: block;">
<img src="img/800_2.jpg">
<img src="img/800_3.jpg">
</p>
</p>
<p class="small first"><img src="img/50_1.jpg"></p>
<p class="small second"><img src="img/50_2.jpg"></p>
<p class="small third"><img src="img/50_3.jpg"></p>
</p>
</body>css code
*{padding: 0; margin: 0;}
#father .small{width: 50px; height: 50px; border: 2px solid #ccc; bottom: 0; position: absolute;}
#father .second{left: 70px;}
.third{left: 140px;}
#father{position: relative; top: 100px; left: 50px; height: 460px;}
#container{position: absolute; width: 400px; height: 400px;}
#container img{position: absolute; display: none;}
.shade{width: 200px; height: 200px; position: absolute; top: 0;left: 0; display: none; border-radius: 50%; overflow: hidden; background: #000;}
.shade img{display: none; width: 800px; height: 800px; position: absolute;}js code
<span style="white-space:pre"> </span><script type="text/javascript" src='js/jquery-1.12.4.min.js'></script>
<script type="text/javascript">
$(function () {
changePic('.first',0);
changePic('.second',1);
changePic('.third',2);
var shadeWidth = $('.shade').width(),//阴影的宽度
shadeHeight = $('.shade').height(),//阴影的高度
middleWidth = $('#container').width(),//容器的宽度
middleHeight = $('#container').height(),//容器的高度
bigImgWidth = $('.shade img').width(),//放大图片盒子的宽度
bigImgHeight = $('.shade img').height(),//放大图片盒子的高度
rateX = bigImgWidth / middleWidth,//放大区和遮罩层的宽度比例2
rateY = bigImgHeight / middleHeight;//放大区和遮罩层的高度比例2
//当鼠标移入与移出时阴影与放大去显现/消失
$('#container').hover(function() {
$('.shade').show();
$('.big').show();
}, function() {
$('.shade').hide();
$('.big').hide();
}).mousemove(function(e) {//当鼠标移动时，阴影和放大区图片进行移动
//记录下光标距离页面的距离
var x = e.pageX,
y = e.pageY;
//设置遮罩层的位置
$('.shade').offset({
top: y-shadeHeight/2,
left: x-shadeWidth/2
});
//获取遮罩层相对父元素的位置
var cur = $('.shade').position(),
_top = cur.top,
_left = cur.left,
hdiffer = middleHeight - shadeHeight,
wdiffer = middleWidth - shadeWidth;
if (_top < 0) _top = 0;
else if (_top > hdiffer) _top = hdiffer;
if (_left < 0) _left = 0;
else if (_left > wdiffer) _left =wdiffer;
//判断完成后设置遮罩层的范围
$('.shade').css({
top: _top,
left: _left
});
//设置放大区图片移动
$('.shade img').css({
top: - _top*rateY*3/2,
left: - _left*rateX*3/2
});
});;
//封装的改变图片显示的函数
function changePic (element,index) {
$(element).click(function() {
$('#container img').eq(index).css('display', 'block').siblings().css('display', 'none');
$('.shade img').eq(index).css('display', 'block').siblings().css('display', 'none');
});
}
});
<span style="white-space:pre"> </span></script>The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to implement custom global methods in vue
How to implement global registration and local registration in vue components
How to modify the project name through the vue-cli webpack project
The above is the detailed content of Implement magnifying glass through jquery technology. For more information, please follow other related articles on the PHP Chinese website!