原生js仿淘宝网商品放大镜效果
更新时间：2017年02月28日 11:53:12 作者：chang红达
本文主要介绍了原生js仿淘宝网商品放大镜效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧
效果图：（实例图片由自己添加）
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿淘宝放大镜特效</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#demo{width:350px;height:350px;border: 1px solid #000;position:relative;margin:100px;}
#smil_box{width: 350px;height: 350px;position:relative;}
#mask{width:175px;height: 175px;background:rgba(255,255,0,0.4);position:absolute;top:0;left:0;display:none;cursor:move;}
#big_box{width: 400px;height: 400px;position:absolute;top:0;left:360px;border: 1px solid #000;overflow:hidden;display:none;}
#big_box img{position:absolute;top:0;left:0;}
</style>
</head>
<body>
<div id="demo">
<div id="smil_box">
<img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=193662baf63738c68b594f3ec920769f" height="350" width="350" alt="">
<div id="mask"></div>
</div>
<div id="big_box">
<img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=3e8b3554eb90dd13fa0f82465ac6d382" height="800" width="800" alt="" id="big_img">
</div>
</div>
</body>
<script type="text/javascript">
(function(window){
function $(id){
return document.getElementById(id);
};
// 获取对象
var demo = $("demo"),smilBox = $("smil_box"),mask = $("mask"),bigImg = $("big_img"),bigBox = $("big_box");
// smilBox的hover事件
smilBox.onmouseover = function(){
mask.style.display = "block";
bigBox.style.display = "block";
};
smilBox.onmouseout = function(){
mask.style.display = "none";
bigBox.style.display = "none";
};
// 鼠标移动事件
smilBox.onmousemove = function(event){
var event = event || window.event;
// 获取鼠标在页面上的坐标
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// mask的位置坐标
var boxX = pageX - demo.offsetLeft;
var boxY = pageY - demo.offsetTop;
var maskX = boxX - mask.offsetWidth / 2;
var maskY = boxY - mask.offsetHeight / 2;
// 限制mask的移动范围
if( maskX < 0 ){
maskX = 0;
};
if( maskX > smilBox.offsetWidth - mask.offsetWidth){
maskX = smilBox.offsetWidth - mask.offsetWidth;
};
if( maskY < 0 ){
maskY = 0;
};
if( maskY > smilBox.offsetHeight - mask.offsetHeight){
maskY = smilBox.offsetHeight - mask.offsetHeight;
};
// 黄色遮罩层的位置坐标
mask.style.top = maskY + "px";
mask.style.left = maskX + "px";
// 大图片移动的比例
var prop = ( bigImg.offsetWidth - bigBox.offsetWidth ) / (smilBox.offsetWidth - mask.offsetWidth);
// 大图片的坐标
var bigImgX = prop * maskX;
var bigImgY = prop * maskY;
bigImg.style.top = -bigImgY + "px";
bigImg.style.left = -bigImgX + "px";
}
})(window)
</script>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要介绍了javascript引擎长时间独占线程造成卡顿的解决方案,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了JS获取子节点、父节点和兄弟节点的方法,结合实例形式总结分析了JavaScript针对子节点、父节点和兄弟节点获取相关操作技巧与使用注意事项,需要的朋友可以参考下2018-07-07
uniapp小程序自定义tabbar以及初次加载闪屏解决方法
Uniapp小程序可以通过自定义tabbar来实现更加个性化的界面设计,下面这篇文章主要给大家介绍了关于uniapp小程序自定义tabbar以及初次加载闪屏解决方法,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了JSONP原理及简单实现的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
随着多核cpu的普级,并发/并行多线程运算在主流的编程语言越来越流行,而在目前Javascript实现中还看不到在语言方面支持多线程,现在Javascript如此流行,真希望今后会在语言的层面有很大的变化.2010-11-11
本文介绍了如何在Electron应用中隐藏顶部菜单,具体方法是在main.js文件中添加一行代码,这是一个简单有效的技巧,适用于需要简化界面的Electron应用2024-09-09
本文给大家分享的是一段点击自动添加inpu节点的代码，非常的简单实用，这里推荐给大家。2014-12-12
下面小编就为大家分享一篇js操作二进制数据方法，具有很好的参考价值，希望对的大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家详细介绍了js实现图片切割功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
大家讨论下constructor的作用哈,需要的朋友可以参考下。从51js摘编而来。2011-11-11
最新评论