原生js仿淘宝网商品放大镜效果


Posted in Javascript onFebruary 28, 2017

效果图:(实例图片由自己添加)

原生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 相关文章推荐
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
微信小程序使用Promise简化回调
Feb 06 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
原生js实现可拖拽效果
Feb 28 #Javascript
javascript 面向对象function详解及实例代码
Feb 28 #Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 #Javascript
原生js实现鼠标跟随效果
Feb 28 #Javascript
canvas实现简易的圆环进度条效果
Feb 28 #Javascript
JS实现的tab切换选项卡效果示例
Feb 28 #Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 #Javascript
You might like
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
PHP实现合并discuz用户
2015/08/05 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
Jquery中offset()和position()的区别分析
2015/02/05 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
举例详解Python中yield生成器的用法
2015/08/05 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
Python列表切片常用操作实例解析
2019/12/16 Python
sklearn线性逻辑回归和非线性逻辑回归的实现
2020/06/09 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
自动化专业个人求职信范文
2013/11/29 职场文书
团结就是力量演讲稿
2014/05/21 职场文书
小学生常见病防治方案
2014/06/06 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
人民的好儿女观后感
2015/06/18 职场文书