基于JavaScript实现购物网站商品放大镜效果


Posted in Javascript onSeptember 06, 2016

大家几乎都有在网上购物的经验,有的网站会有一个商品放大镜功能,就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,等同于放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
*{margin:0;padding: 0;}
#warp{width: 1184px;height:500px;margin:50px auto 0;background-color: #ccc;overflow: hidden;padding: 10px;position: relative;}
#warp #minbox{width: 350px;height: 350px;float: left;position: relative;}
#maxbox{width: 400px;height: 400px;position: absolute;left: 380px;overflow: hidden;display: none;}
#maxbox img{width: 800px;height: 800px;position: absolute;}
#con{float: left;margin-left: 20px;}
#meng{width: 175px;height: 175px;position: absolute;background-color:yellow;opacity:0.4;filter:alpha(opacity=40);left: 0;top: 0;display: none;}
</style>
</head>
<body>
<div id="warp">
<div id="minbox">
<img src="images/min.jpg" alt="">
<p id="meng"></p>
</div>
<div id="maxbox">
<img src="images/max.jpg" alt="">
</div>
<div id="con">
<img src="images/msg.png" alt="">
</div>
</div>
<script>
var minbox=document.getElementById('minbox');
var meng=document.getElementById('meng');
var maxbox=document.getElementById('maxbox');
var maximg=maxbox.getElementsByTagName('img')[0];
var minimg=minbox.getElementsByTagName('img')[0];
function offsetTL(obj){
var ofL=0,ofT=0;
while(obj){
ofL+=obj.offsetLeft+obj.clientLeft;
ofT+=obj.offsetTop+obj.clientTop;
obj=obj.offsetParent;
}
return{left:ofL,top:ofT};
}
minbox.onmousemove=function(e){
var e=e||window.event;
meng.style.display='block';
maxbox.style.display='block';
var niubi1=e.clientX-offsetTL(minbox).left-meng.clientWidth/2;//蒙板的X坐标
var niubi2=e.clientY-offsetTL(minbox).top-meng.clientHeight/2;//蒙板的Y坐标
var bili=maximg.clientWidth/minimg.clientWidth;
if (niubi1<=0) {
niubi1=0;
}else if (niubi1>=minbox.clientWidth-meng.clientWidth) {
niubi1=minbox.clientWidth-meng.clientWidth;
}
if (niubi2<=0) {
niubi2=0;
}else if (niubi2>=minbox.clientHeight-meng.clientHeight) {
niubi2=minbox.clientHeight-meng.clientHeight;
}
console.log(niubi1);
console.log(niubi2);
meng.style.left=niubi1+'px';
meng.style.top=niubi2+'px';
maximg.style.left=-parseInt(meng.style.left)*bili+'px';
maximg.style.top=-parseInt(meng.style.top)*bili+'px';
}
minbox.onmouseout=function(){
meng.style.display='none';
maxbox.style.display='none';
}
</script>
</body>
</html>

以上所述是小编给大家介绍的基于JavaScript实现购物网站商品放大镜效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用正则获取指定路径文件的名称
Feb 27 Javascript
javascript 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
js window.onload 加载多个函数的方法
Nov 02 Javascript
javascript天然的迭代器
Oct 29 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 Javascript
理解AngularJs指令
Dec 10 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
vue动态改变背景图片demo分享
Sep 13 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
AngularGauge 属性解析详解
Sep 06 #Javascript
AngularJS 面试题集锦
Sep 06 #Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 #Javascript
JS原型链 详解及示例代码
Sep 06 #Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 #Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 #Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 #Javascript
You might like
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
javascript不同页面传值的改进版
2008/09/30 Javascript
YUI的Tab切换实现代码
2010/04/11 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
python使用matplotlib画饼状图
2018/09/25 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
使用python制作一个解压缩软件
2019/11/13 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
Python @property及getter setter原理详解
2020/03/31 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
思想政治自我鉴定
2013/10/06 职场文书
毕业生个人的求职信范文
2013/12/03 职场文书
师德建设实施方案
2014/03/21 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
Python初识逻辑与if语句及用法大全
2021/08/07 Python