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中typeof的用途介绍
Apr 11 Javascript
js replace 与replaceall实例用法详解
Aug 03 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
jquery自适应布局的简单实例
May 28 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
微信小程序自定义导航隐藏和显示功能
Jun 13 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
vue组件开发之slider组件使用详解
Aug 21 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之字符串变相相减的代码
2007/03/19 PHP
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
JavaScript 变量命名规则
2009/09/23 Javascript
Javascript面向对象编程
2012/03/18 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
js实现文字截断功能
2016/09/14 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
Python生成器以及应用实例解析
2018/02/08 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
Selenium定位元素操作示例
2018/08/10 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
自动化专业个人求职信范文
2013/12/30 职场文书
医院护士见习期自我鉴定
2014/04/10 职场文书
梅花魂教学反思
2014/04/25 职场文书
企业职业病防治方案
2014/05/29 职场文书
运动会拉拉队口号
2014/06/09 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
工作简历自我评价
2015/03/11 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS