js图片放大镜实例讲解(必看篇)


Posted in Javascript onJuly 17, 2017

1、图片放大镜的思路:

当打开页面时只有图片

首先,说一下基本效果和调理,图片放大镜,也就是当你鼠标移入当前的商品图片时,会出现一个小灰色的观察移动框,有点会出现一个对应部位的放大的图片。

然后当鼠标移动时,右边的放大镜会出现对应部位的放大图片

最后当鼠标移开后,小的观察框和放大的图片都会消失。

2、有了基本思路就看代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      #small{
        width: 300px;
        height: 300px;
        border: 1px solid firebrick;
        float: left;
        position: relative;
      }
      #small img{
        width: 100%;
        height: 100%;
         
      }
      #mask{
        width: 100px;
        height: 100px;
        background: rgba(0,0,0,0.3);
        position: absolute;
        top: 0;
        left: 0;
        display: none;
      }
      #big{
        width: 300px;
        height: 300px;
        border: 1px solid hotpink;
        overflow: hidden;
        float: left;
        margin-left: 50px;
        position: relative;
        display: none;
      }
      #big img{
        position: absolute;
      }
    </style>
    <script type="text/javascript">
      window.onload = function(){
//       获取到所有的元素,因为有对应元素的移动,所以在设置样式的,一定要给对应的元素绝对定位,类似于拖拽
        var oSmall = document.getElementById('small'),
        oMask = document.getElementById('mask'),
        oBig = document.getElementById('big'),
        oBigImg = document.getElementById('bigImg');
        //给当前小的div一个鼠标移入事件
        oSmall.onmouseover = function(){
//         当鼠标移入时,对应的区域显示 小的观察框,和 对应的右面的放大图片
          oMask.style.display = 'block';
          oBig.style.display = 'block';
        };
        oSmall.onmouseout = function(){
//         当鼠标移除时对应的区域隐藏
          oMask.style.display = 'none';
          oBig.style.display = 'none'
        }
        oSmall.onmousemove = function(ev){
//         首先获取到event事件
          var oEvent = ev || event;
//         offsetWidth = 本身的样式宽 + 左右padding + 左右border
//         clientX clientY 获取鼠标指针位置,相对于当前窗口的 X 和 Y 坐标
           
//         鼠标距离当前窗口左边的距离 了l ,就为当前鼠标距离窗口左边的距离 减去 小的观察框的宽度
//             oMask.offsetWidth / 2 设置鼠标处于正中心的位置
          var l = oEvent.clientX - oMask.offsetWidth / 2;
          var t = oEvent.clientY - oMask.offsetHeight / 2;
           
//         对观察框距离的限制, 1.当它距离左边的距离比0 小的时候,设置它为0 就是它移动到最左边的时候
          if (l < 0) {
            l = 0;
          }else if(l > oSmall.offsetWidth - oMask.offsetWidth){
//           当它移动到最右边的时候,设置它的left值为 当前的left值
            l = oSmall.offsetWidth - oMask.offsetWidth;
          };
           
          //同理对上下边界进行设置
          if (t < 0) {
            t = 0;
          }else if(t > oSmall.offsetHeight - oMask.offsetHeight){
            t = oSmall.offsetHeight - oMask.offsetHeight;
          };
 
//         设置小的观察框的移动时的当前位置
          oMask.style.left = l + 'px';
          oMask.style.top = t + 'px';
           
//         设置对应的右边放大图片对应的位置
          //var scale = l / (oSmall.offsetWidth - oMask.offsetWidth);
//         大的可视区域的宽减去小的观察框对应的宽,就是可移动的总距离,  当前处的位置,处于总的距离的比例 与大图片,在大图片的可视框里所处的位置相同所以如下
          oBigImg.style.left = l * (oBig.offsetWidth - oBigImg.offsetWidth)/(oSmall.offsetWidth-oMask.offsetWidth)+"px";
          oBigImg.style.top = t * (oBig.offsetHeight - oBigImg.offsetHeight)/(oSmall.offsetHeight-oMask.offsetHeight)+"px";
           
        }
      }
    </script>
  </head>
  <body>
    <div id="small">
      <img src="img/s.jpg" />
      <spanS id="mask"></span>
    </div>
    <div id="big">
      <img src="img/b.jpg" id="bigImg"/>
    </div>
  </body>
</html>

还有什么更好的方法互相交流

以上这篇js图片放大镜实例讲解(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的淡入淡出可自动切换的幻灯插件
Aug 24 Javascript
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 #Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 #Javascript
node.js express中app.param的用法详解
Jul 16 #Javascript
Node.js中流(stream)的使用方法示例
Jul 16 #Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 #Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 #Javascript
Vue应用部署到服务器的正确方式
Jul 15 #Javascript
You might like
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
网上抓的一个特效
2007/05/11 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
详解angular笔记路由之angular-router
2017/09/12 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
2019/03/06 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
python实现折半查找和归并排序算法
2017/04/14 Python
Python元字符的用法实例解析
2018/01/17 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
python通过链接抓取网站详解
2019/11/20 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
英国大码女性时装零售商:Evans
2018/08/29 全球购物
北大自主招生自荐信
2013/10/19 职场文书
省级四好少年事迹材料
2014/01/25 职场文书
心理健康教育制度
2014/01/27 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
学校就业保障协议书
2019/06/24 职场文书
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript