基于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 相关文章推荐
javascript Discuz代码中的msn聊天小功能
May 25 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
js倒计时简单实现代码
Aug 11 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
原生JS实现层叠轮播图
May 17 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 Javascript
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
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/03/03 PHP
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
浅析php header 跳转
2013/06/17 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
js输出列表实现代码
2010/09/12 Javascript
Eval and new funciton not the same thing
2012/12/27 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
wxpython学习笔记(推荐查看)
2014/06/09 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
python正则表达式匹配[]中间为任意字符的实例
2018/12/25 Python
Python unittest框架操作实例解析
2020/04/13 Python
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
介绍一下Java中的Class类
2015/04/10 面试题
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
servlet面试题
2012/08/20 面试题
体育之星事迹材料
2014/05/11 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
个性发展自我评价2015
2015/03/09 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
学前教育见习总结
2015/06/23 职场文书
大学军训心得体会800字
2016/01/11 职场文书
微信小程序实现聊天室功能
2021/06/14 Javascript
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
Redis如何实现分布式锁
2021/08/23 Redis