基于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 相关文章推荐
htm调用JS代码
Mar 15 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 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自动适应范围的分页代码
2008/08/05 PHP
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
js获得鼠标的坐标值的方法
2013/03/13 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
python简单猜数游戏实例
2015/07/09 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
存储过程和sql语句的优缺点
2014/07/02 面试题
供货协议书
2014/04/22 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
新店开张宣传语
2015/07/13 职场文书
电工生产实习心得体会
2016/01/22 职场文书