基于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 相关文章推荐
jQuery 跨域访问问题解决方法
Dec 02 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
May 05 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 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小教程之实现双向链表
2014/06/12 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
javascript 进度条 实现代码
2009/07/30 Javascript
Javascript 中介者模式实例
2009/12/16 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
python在每个字符后添加空格的实例
2018/05/07 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
Python configparser模块应用过程解析
2020/08/14 Python
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
linux面试题参考答案(4)
2014/09/21 面试题
面试后的感谢信范文
2014/02/01 职场文书
房屋继承公证书
2014/04/10 职场文书
团日活动总结
2014/04/28 职场文书
房租涨价通知
2015/04/23 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
病假条格式范文
2015/08/17 职场文书
辞职申请书范本
2019/05/20 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang