原生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 相关文章推荐
线路分流自动跳转代码;希望对大家有用!
Dec 02 Javascript
jquery select下拉框操作的一些说明
Apr 02 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
vue实现简易的双向数据绑定
Dec 29 Vue.js
原生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生成Gif图片验证码
2013/10/27 PHP
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
javascript比较文档位置
2008/04/08 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
构建高效的python requests长连接池详解
2020/05/02 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
业务员岗位职责
2013/11/16 职场文书
自我评价是什么
2014/01/04 职场文书
关于圣诞节的广播稿
2014/01/26 职场文书
文案策划求职信
2014/03/18 职场文书
签约仪式主持词
2014/03/19 职场文书
个人担保书范文
2014/05/20 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
Python Parser的用法
2021/05/12 Python
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS