原生js如何实现淘宝放大镜效果-创新互联

这篇文章给大家分享的是有关原生js如何实现淘宝放大镜效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

成都创新互联公司服务项目包括如东网站建设、如东网站制作、如东网页制作以及如东网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，如东网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到如东省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！js有什么特点

1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，js不仅可以创建对象，也能使用现有的对象。

先说一下这个效果需要用到的一些基础知识：

css相对定位：position：absolute；

鼠标移入移出以及移动事件：onmouseover、onmouseout、onmousemove，记住这些事件一般不会单个出现

获取鼠标点击坐标：X轴：clientX，Y轴：clientY

当前元素相对于父元素的左位移：offsetLeft

当前元素相对于父元素的上位移：offsetTop

当前元素的实际高、宽度（不包括滚动条）：offsetWidth、offsetHeight

球当前元素的最小值，大值：Math.min()、Math.max()；

话不多说直接上代码吧！

*{
padding: 0;
margin: 0;
}
#demo{
display: block;
width: 400px;
height: 255px;
margin: 50px;
position: relative;
border: 1px solid #ccc;
}
#float-box{
position: relative;
z-index: 1;
}
#small-box{
display: none;
width: 160px;
height: 120px;
position: absolute;
background: #ffffcc;
border: 1px solid #ccc;
filter: alpha(opacity=50);
opacity: 0.5;
cursor: move;
}
#big-box{
display: none;
position: absolute;
top: 0;
left: 460px;
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
z-index: 1;
 
 
}
#big-box img{
position: absolute;
z-index: 5;
}