纯js仿淘宝京东商品放大镜功能
程序员文章站
2023-11-03 20:21:34
效果图：
代码如下：
效果图：
代码如下：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>无标题</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.imgcontent{
width: 420px;
height: 300px;
position: relative;
margin-left: 50px;
margin-top: 50px;
}
.imgcontent>img{
width: 420px;
height: 300px;
}
</style>
</head>
<body>
<div class="imgcontent" id="imgcontent1">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488436622116&di=e3c2b2a5c847d6051d8daaec9a9a2131&imgtype=0&src=http%3a%2f%2f2a.zol-img.com.cn%2fproduct%2f174_1200x900%2f888%2fceey9tj1qrflk.jpg" alt="iphone7">
</div>
</body>
<script>
/*大致功能的思路：(完全按照自己的想法去实现的功能，肯定有很多地方优化，希望大家一起讨论)
1、有一个放原始图片的盒子
2、当鼠标移入这个盒子，在右侧创建一个相同大小的镜像盒子，镜像盒子里创建一个放大4倍的镜像图片，同时也在原始盒子里创建一个放大镜（若存在就display:block，若不存在就创建，镜像盒子同理）
3、当鼠标移动时，原始盒子里的放大镜跟随鼠标移动（类似拖拽功能），镜像盒子里的图片的top和left值是原始盒子里放大镜的top和left值的-4倍
4、当鼠标移出原始盒子时,隐藏镜像盒子和放大镜*/
function scaler(id){
var me = this
var originaldiv = document.queryselector("#"+id)
var mirrordiv = null
var mirrorimg = null
var scaler = null
var real_left = originaldiv.offsetleft
var real_right = originaldiv.offsetwidth+originaldiv.offsetleft
var real_top = originaldiv.offsettop
var real_bottom = originaldiv.offsetheight+originaldiv.offsettop
//创建镜像盒子
this.createmirror = function(){
var originalstyle = getcomputedstyle(originaldiv)
mirrordiv = document.createelement("div")
mirrordiv.style.csstext = 'width:'+originalstyle.width+
';height:'+originalstyle.height+
';position:absolute;left:'+originalstyle.width+
';top:0px;margin-left:10px;overflow:hidden;';
//创建镜像图片
mirrorimg = document.createelement("img")
mirrorimg.style.csstext = 'width:'+(originaldiv.offsetwidth*4)+
'px;height:'+originaldiv.offsetheight*4+'px;position:absolute;top:0px;left:0px;'
mirrorimg.src = document.queryselector("#"+id+" img").src
mirrordiv.appendchild(mirrorimg)
originaldiv.appendchild(mirrordiv)
}
//创建放大镜
this.createscaler = function(left,top){
scaler = document.createelement("div")
scaler.style.csstext = 'width:100px;height:100px;background-color:yellow;opacity:0.4;position:absolute;'
scaler.style.top = top;
scaler.style.left = left;
originaldiv.appendchild(scaler)
}
//设置镜像图片位置
this.setimgposition = function(left,top){
mirrorimg.style.left = '-'+left+'px'
mirrorimg.style.top = '-'+top+'px'
}
//鼠标移入事件
this.e_mouseover = function(){
originaldiv.style.cursor = "move"
if (!mirrordiv) {
me.createmirror()
}else{
mirrordiv.style.display = "block"
};
if (!scaler) {
me.createscaler(0,0)
}else{
scaler.style.display = "block"
};
}
//鼠标移出事件
this.e_mouseleave = function(){
mirrordiv.style.display = "none"
scaler.style.display = "none"
}
//鼠标移动事件(关键代码)
this.e_mousemove = function(e){
// 判断鼠标是否移出原始盒子
if (e.clientx > real_right || e.clientx < real_left || e.clienty > real_bottom || e.clienty < real_top ) {
me.e_mouseleave()
return false
};
// 鼠标到原始盒子顶部的距离
var padtop = e.clienty-real_top
// 鼠标到原始盒子左侧的距离
var padleft = e.clientx-real_left
//放大镜跟随鼠标移动(-50是因为让鼠标在放大镜的中心)
scaler.style.top = padtop-50;
scaler.style.left = padleft-50;
//因为镜像图片放大了4倍，所以跟随移动的时候是4倍
me.setimgposition((padleft-50)*4,(padtop-50)*4)
}
//注册事件监听
originaldiv.onmouseover = me.e_mouseover
originaldiv.onmouseleave = me.e_mouseleave
originaldiv.onmousemove = function(e){
me.e_mousemove(e)
}
}
// 创建图片放大功能对象,参数为原始盒子id即可(放大镜大小，镜像图片放大倍数都可设为参数传递)
new scaler("imgcontent1")
</script>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！