无聊试着写个商品放大镜功能

发布时间:2020-08-13 22:00:19发布者:Mr.Zhang阅读(390)

css:
<style>
.ylImg { width: 100%; max-width: 500px; margin: 50px auto 0; position: relative; }

.ylZoom { position: relative; }

.ylZoom .zoomImg{width:100%;}

.ylZoom .zoomW { position: absolute; top: 0; left: 100%; width: 100%; max-width: 400px; overflow: hidden; margin-left: 10px; border: 1px solid #dfe2ed; }

.ylZoom .zoomW img { max-width: none; position: absolute; transition: 0s all; -moz-transition: 0s all; -webkit-transition: 0s all; -o-transition: 0s all; -ms-transition: 0s all; }

.ylZoom { position: relative; }

.ylZoom .overW { position: absolute; width: 80px; height: 80px; background: rgba(255, 255, 255, 0.2); border: 1px solid #dfe2ed; top: 0; left: 0; cursor: move; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

@media screen and (max-width: 600px) { .ylZoom .overW { width: 50px; height: 50px; }
.ylZoom .zoomW { left: 0; top: 100%; margin-left: 0; margin-top: 10px; } }
</style>

html:
<div class="ylImg">
<div class="ylZoom">
<img class="zoomImg" src="//resourcewebsite.singoo.cc/15937570820400231/en/image/5f06c3cc88bd2.jpg_.webp" alt="">
</div>
</div>

js:
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(function(){

$('.ylZoom').mouseenter(function(){
let overW = $('<div class="overW"></div>'),
zoomW = $('<div class="zoomW"><img src=""></div>');
$(this).append(overW).append(zoomW);
$(this).find('.zoomW').find('img').attr('src',$(this).find('.zoomImg').attr('src'));
$(this).find('.zoomW').height($(this).find('.zoomW').innerWidth());
});

$('.ylZoom').mouseleave(function(){
$(this).find('.overW').remove();
$(this).find('.zoomW').remove();
});

$('.ylZoom').mousemove(function(event){
let x = event.pageX,/*光标X坐标*/
y = event.pageY,/*光标Y坐标*/
left = 0,/*拖拽元素左边距到父元素的距离*/
top = 0,/*拖拽元素上边距到父元素的距离*/
width = $(this).find('.overW').innerWidth(),/*拖拽元素宽度*/
height = $(this).find('.overW').innerHeight(),/*拖拽元素高度*/
offsetX = $(this).offset().left,/*父元素左边距到body的距离*/
offsetY = $(this).offset().top,/*父元素上边距到body的距离*/
percentage = 0,/*拖拽元素宽度相对父元素宽度的百分比*/
zoomW = 0,
zoomH = 0;

/*拖拽元素贴近父容器时*/
if(x-offsetX<=width/2&&x-offsetX>=0){
left = 0;
}else if(x-offsetX<=$(this).innerWidth()&&(x-offsetX>=$(this).innerWidth()-width/2)){
left = $(this).innerWidth()-width;
}else{
left = x-offsetX- width/2;
}
if(y-offsetY<=height/2&&y-offsetY>=0){
top = 0;
}else if(y-offsetY<=$(this).innerHeight()&&(y-offsetY>=$(this).innerHeight()-height/2)){
top = $(this).innerHeight()-height;
}else{
top = y-offsetY- height/2;
}
$(this).find('.overW').css({
left:left+'px',
top:top+'px'
});
if(x<=offsetX || x>=offsetX+$(this).innerWidth() || y<=offsetY || y>=offsetY+$(this).innerHeight()){
console.log(x,offsetX);
$(this).find('.overW').remove();
$(this).find('.zoomW').remove();
}

percentage = -$(this).find('.zoomW img').innerWidth()/$(this).innerWidth();

zoomH = top*percentage;
if($(this).find('.zoomW img').innerWidth() + left*percentage < $('.zoomW').innerWidth()){
zoomW = -($(this).find('.zoomW img').innerWidth() - $(this).find('.zoomW').innerWidth());
}else{
zoomW = left*percentage;
}
if($(this).find('.zoomW img').innerHeight() + top*percentage < $('.zoomW').innerHeight()){
zoomH = -($(this).find('.zoomW img').innerHeight() - $(this).find('.zoomW').innerHeight());
}else{
zoomH = top*percentage;
}
$(this).find('.zoomW img').css({
left:zoomW +'px',
top:zoomH +'px'
});

});

});
</script>






本文转自博客园,原文地址:https://www.cnblogs.com/myyt/p/13403990.html

自己做的一款记账小程序,请多多支持