原生JS实现简单放大镜效果


Posted in Javascript onFebruary 08, 2017

本文实例为大家分享了原生JS实现放大镜效果的具体代码,供大家参考,具体内容如下

<html>

 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 * {
 margin: 0;
 padding: 0;
 }
 img{
 vertical-align: top;
 }
 .fdj {
 width: 350px;
 height: 350px;
 position: relative;
 margin: 100px auto;
 border: 1px solid gainsboro;
 }
 .small {
 position: relative;
 }
 .small img {
 width: 350px;
 }
 .mask {
 width: 100px;
 height: 100px;
 background: rgba(255, 255, 0, 0.4);
 position: absolute;
 left: 0;
 top: 0;
 cursor: move;
 display: none;
 }
 .big {
 position: absolute;
 top: 0;
 left: 360px;
 width: 500px;
 height: 500px;
 border: 1px solid gainsboro;
 overflow: hidden;
 display: none;
 }
 .big img{
 position: absolute;
 left: 0;
 top: 0;
 }
 </style>
 </head>

 <body>
 <div class="fdj">
 <div class="small">
 <img src="http://cdn.attach.qdfuns.com/notes/pics/201702/08/162503mw0fawb5b02va22i.jpg" />
 <div class="mask"></div>
 </div>
 <div class="big">
 <img src="http://cdn.attach.qdfuns.com/notes/pics/201702/08/162503mw0fawb5b02va22i.jpg" />
 </div>
 </div>
 </body>
 <script type="text/javascript">
 var fdj = document.querySelector('.fdj') // 获得最大的盒子
 var small = document.querySelector('.small'); //获取小图片盒子
 var big = document.querySelector('.big'); //获取大图片盒子
 var bigs = big.children[0] //大图片 
 var smalls = small.children[0] //小图片
 var mask = small.children[1]; //遮罩

 //鼠标移入小图片盒子
 small.onmouseover = function() {
 //鼠标移入图片盒子将遮罩与大图片显示
 mask.style.display = 'block';
 big.style.display = ' block';
 };

 //鼠标移出小图片盒子
 small.onmouseout = function() {
 //鼠标移出小图片盒子将遮罩与大图片隐藏
 mask.style.display = 'none';
 big.style.display = 'none';
 };

 var x=0;
 var y=0;
 //鼠标在小图片上移动时
 small.onmousemove = function(ev) {
 var ev = event || window.event;
 //让鼠标在遮罩正中
 //鼠标X坐标与Y坐标
 x = ev.clientX -this.offsetParent.offsetLeft- mask.offsetWidth / 2 ; 
 y = ev.clientY -this.offsetParent.offsetTop- mask.offsetHeight / 2 ;
 //将遮罩限制在小图片盒子中

 if (x<0) {
 x=0;
 }else if(x>small.offsetWidth-mask.offsetWidth){
 x = small.offsetWidth-mask.offsetWidth;
 }

 if(y<0){
 y=0;
 }else if(y>small.offsetHeight-mask.offsetHeight){
 y= small.offsetHeight-mask.offsetHeight
 }
 mask.style.left = x + 'px';
 mask.style.top = y + 'px';

 //大图与小图的比例

 /*var scalX = bigs.offsetWidth/small.offsetWidth;
 var scalY = bigs.offsetHeight/small.offsetHeight;*/

 var scalX = x/(small.offsetWidth-mask.offsetWidth);
 var scalY = y/(small.offsetHeight-mask.offsetHeight);

 bigs.style.left = -(x*scalX)+'px';
 bigs.style.top = -(y*scalY)+'px';

 };

 </script>

</html>

效果图:(演示)

原生JS实现简单放大镜效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
Apr 23 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
Vue触发隐藏input file的方法实例详解
Aug 14 Javascript
基于JavaScript实现本地图片预览
Feb 08 #Javascript
js 判断登录界面的账号密码是否为空
Feb 08 #Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 #Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 #Javascript
Bootstrap模态窗口源码解析
Feb 08 #Javascript
Bootstrap路径导航与分页学习使用
Feb 08 #Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 #Javascript
You might like
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
详解Bootstrap插件
2016/04/25 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
基于Vue实例对象的数据选项
2017/08/09 Javascript
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
JavaScript位置参数实现原理及过程解析
2020/09/14 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
python数据结构之链表的实例讲解
2017/07/25 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
django创建超级用户过程解析
2019/09/18 Python
python实现银行管理系统
2019/10/25 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
详解Python yaml模块
2020/09/23 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
采购人员的个人自我评价
2014/01/16 职场文书
大学生个人事迹材料
2014/01/21 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书