标签:jQuery 效果 放大镜 px thumbnail 400px height original
今天就给可爱的你们介绍jQuery实现图片局部放大镜效果,以下只是参考图啊(因为小姐姐喜欢lisa 哈哈哈)
放大镜效果的基本原理就是按照一个合适的比例去放大对应的相对的图片,同时放大镜部分和被放大图片的移动距离都要等比例的放大。
HTML代码如下:
<!-- thumbnail 缩略图
original 原图
magnifier 放大镜 -->
<div class="thumbnail">
<img src="./1.jpg" alt="">
<div class="magnifier"></div>
</div>
<div class="original">
<img src="./1.jpg" alt="">
</div>
css样式如下:
<style>
*{
margin: 0;
padding: 0;
}
.thumbnail,.original{
width: 400px;
height: 400px;
position: absolute;
}
.original{
top: 0;
left: 450px;
overflow: hidden;
display: none;
}
.thumbnail>img{
width: 400px;
height: 400px;
position: absolute;
}
.original>img{
width: 800px;
height: 800px;
position: absolute;
}
.magnifier{
width: 200px;
height: 200px;
background: rgba(34, 33, 33, 0.4);
position: absolute;
top: 0;
left: 0;
display: none;
}
</style>
js代码如下:
<script>
$(".thumbnail").mouseover(function(){
$(".magnifier").show()
$(".original").show()
})
$(".thumbnail").mousemove(function(event){
//鼠标相对 页面 X Y轴的位置
var ymX=event.pageX;
var ymY=event.pageY;
//鼠标 放在遮罩层中间的位置
var mX=ymX/2;
var mY=ymY/2;
//放大镜位置
$(".magnifier").css({
top: mY +"px",
left:mX+"px"
})
// 原图 位置
$(".original>img").css({
top:-mY*2+"px",
left:-mX*2+"px",
})
})
// 鼠标离开 隐藏 放大镜 ,原图
$(".thumbnail").mouseleave(function(){
$(".magnifier").hide()
$(".original").hide()
})
</script>
最后我想问问认真看完的同学们,你们喜欢 iu 还是 lisa 呢,这个回答很重要喔,评论评论
标签:jQuery,效果,放大镜,px,thumbnail,400px,height,original 来源: https://blog.csdn.net/Liang_nm/article/details/112722620
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。