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 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
优化javascript的执行速度
Jan 23 Javascript
javascript forEach通用循环遍历方法
Oct 11 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
微信小程序 网络API发起请求详解
Nov 09 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
JS简单实现数组去重的方法分析
Oct 14 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 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 模拟POST提交的2种方法详解
2013/06/17 PHP
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
JavaScript 动态生成方法的例子
2009/07/22 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
详解node中创建服务进程
2017/05/09 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
Python中is和==的区别详解
2018/11/15 Python
python开发游戏的前期准备
2019/05/05 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
毕业生欢送会主持词
2014/03/31 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
超市活动计划书
2014/04/24 职场文书
爱与责任演讲稿
2014/05/20 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
创业计划书之校园超市
2019/09/12 职场文书
js实现自动锁屏功能
2021/06/02 Javascript
SpringBoot集成Redis的思路详解
2021/10/16 Redis
java项目构建Gradle的使用教程
2022/03/24 Java/Android
python热力图实现的完整实例
2022/06/25 Python