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

2024-12-04 06:07:07

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图片放大镜实例讲解(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

js自制图片放大镜功能

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下注释: small img size:600x400 big img size:1200x800 原理: 1.大图是小图的 2倍整 2.大图以小图片中心点为中心 a.transform : translate(-50%,-50%) b.(rate-0.5)*50% c.clip : rect(t,r,b,l) 以小图边界为边界 3.rect必须有absolute 4.获取鼠标
图片放大镜jquery.jqzoom.js使用实例附放大镜图标

1. jquery.jqzoom.js //************************************************************** // jQZoom allows you to realize a small magnifier window,close // to the image or images on your web page easily. // // jqZoom version 2.2 // Author Doc. Ing. Renzi
JS实现图片放大镜效果的方法

本文实例讲述了JS实现图片放大镜效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&quo
JavaScript图片放大镜效果代码[代码比较简单]

#div1 { width:304px; height:222px; position:relative; margin:30px auto 0px;} #div1 img{width:304px; height:222px;} #div1 span { width:100px; height:100px; background:red; left:0px;top:0px; position:absolute; display:none; filter:alpha(opacity:20); op
js图片放大镜效果实现方法详解

由项目需要,原生写了个详情页图片放大镜的效果,扔上代码供学习分享,也作为日常笔记... 效果如图(例子中偷偷链了张天猫的图片,希望没啥事 -.-): 实现过程教简单,但我们还是从css开始分析,过程如下(图片已正方形为例): css: /* 图片容器 */ .imgBox{ width: 200px; /* 各位大老爷们看着办 */ height: 200px; /* 各位大老爷们看着办 */ position: relative; /* 必需 */ } /* 图片标签 */ .mainImg{
基于angularjs实现图片放大镜效果

前言一开始打算用原生的angularjs写,但是发现用原生angularjs,无论如何都不能获取里面图片的宽度和高度,因为angularjs内置的jquery方法里没有winth() .height()方法. 最好我还是引入了jquery,在同一scope上绑定了宽度高度.下面上源码,顺便我会把里面的一些注意的点说一下. 效果图首先说明下 1.首先使用了两个同级指令,并在两个同级指令间进行通信,同级指令间通信,非常简单,就是不要让同级的指令生成独立的scope,并且在同一个作用域下就完成了
奇妙的Javascript图片放大镜

在Flash中我们用蒙板加上一些简单的脚本便可实现一个动态的图片放大镜.现在我们只用JavaScript结合CSS语言也可以轻易做出这个效果. 制作思路:"放大镜"后有一幅背景图,它是"放大了"的图的原本.我们通过移动"放大镜"时适当调整背景图的位置,使它显示的刚好是需要要放大的部分. 效果演示: (点这里在新窗口中查看) 制作步骤: 1)先准备两幅内容相同尺寸不同的图片,这里我们找了一个400×300像素的缩略图small_hill.gif,一
原生javascript实现图片放大镜效果

当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大镜效果. 我在代码中进行了代码编写的思路的说明和详细的代码注释,方便读者,请看代码: <html> <head> <meta charset="UTF-8"> <title>Document</title> <style t
JavaScript 图片放大镜（可拖放、缩放效果）第1/4页

前些日子突然想做一个透镜效果,就突然想到了这个效果,于是找出当年"珍藏"的代码决定一尝所愿. 前言:这个程序主要分三部分:层的拖放.层的缩放.图片切割(包括预览). 其中层的拖放是很常见的效果,层的缩放有点难度,图片切割看着炫其实原理也很简单. 不过在实现的过程中也学习到很多以前不知道的东西,下面都会说明,希望大家从中也能学到东西. 原理: [拖放程序] 基本原理很简单,不知道的看代码就明白,其中参考了越兔和BlueDestiny的相关文章. 下面说一下比较有用的地方: [范围限制]
利用javascript实现的三种图片放大镜效果实例（附源码）

本文实现的是一款简单的放大镜效果,有三种不同的样式,支持移动端:大家可以直接下载源码进行学习参考,下面来一起学习学习吧. 实现效果如下效果一效果二效果三调用代码如下 //前面是ID或者Class,后面有init里面参数分别有1,2,3代表三种不同的效果: zoom('#item').init(); //这里写0,或者不写都可以,默认0 zoom('#item').init(1); //效果2 zoom('#item').init(2); //效果3 //另外还有一个参数,就是选择器后面写

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

相关推荐

随机推荐