CSS를 사용하여 그림 돋보기 효과를 구현하는 예에 대한 자세한 설명(그림)-CSS 튜토리얼-php.cn

이 글에서는 CSS를 사용하여 이미지 돋보기 효과? 다음은 그림 돋보기 효과의 CSS 예시에 대한 자세한 설명입니다

효과는 그림과 같습니다. Tmall 괜찮았으면 좋겠습니다-.-):

CSS를 사용하여 그림 돋보기 효과를 구현하는 예에 대한 자세한 설명(그림)

구현 과정은 간단하지만 그래도 CSS에서 분석을 시작합니다. 과정은 다음과 같습니다. square 예):

css:

/* 图片容器 */
    .imgBox{
      width: 200px; /* 各位大老爷们看着办 */
      height: 200px; /* 各位大老爷们看着办 */
      position: relative; /* 必需 */
    }
 
    /* 图片标签 */
    .mainImg{
      width: 100%; /* 各位大老爷们看着办，尽量100%好看些[斜眼笑] */
      height: 100%; /* 各位大老爷们看着办，尽量100%好看些[斜眼笑] */
    }
 
    /* 遮罩层-既放大区域 */
    .glass{
      position: absolute; /* 必需 */
      width: 50px; /* 遮罩层宽度 此处是放大4倍，所以为200/4=50 */
      height: 50px; /* 遮罩层高度 此处是放大4倍，所以为200/4=50  */
      top: -9999px; /* 绝对位置，先放远些 */
      left: -9999px; /* 绝对位置，先放远些 */
      cursor: move; /* 鼠标样式，好看些 */
      background: rgba(0,0,180,0.5); /* 遮罩层样式，好看些 */
    }
 
    /* 大图所在的容器 */
    .imgMax{
      position: absolute;  /* 必需 */
      overflow: hidden; /* 必需，盖掉超出的大图[斜眼笑] */
      left: 210px; /* 必需，此处为距原图左边10像素 */
      top: 0; /* 必需，此处为距上边0像素 */
      width: 200px; /* 放大图片容器的宽度 此处此处是放大4倍，为200，保持和原图容器一般大，若此处为400，则是放大2*4倍，那么相应的放大图片应该是200*4*2=1600 */
      height: 200px; /* 放大图片容器的高度 此处此处是放大4倍，为200，保持和原图容器一般大，若此处为400，则是放大2*4倍，那么相应的放大图片应该是200*4*2=1600 */
      display: none; /* 先隐藏 */
    }
    .maxImg{
      position: absolute; /* 必需 */
      width: 800px; /* 此处是放大4倍，所以为200*4=800  受放大图片所在的容器影响，规则如上 */
      height: 800px; /* 此处是放大4倍，所以为200*4=800  受放大图片所在的容器影响，规则如上 */
    }

로그인 후 복사

위 CSS에서 주의해야 할 것은 여러 위치와 크기 조정 비율입니다.

스타일을 작성한 후 레이아웃을 살펴보겠습니다.

html:

<!-- 图片容器 -->
    <pclass="J_imgBox imgBox">
      <!-- 需要放大的图片-原始图 -->
      <imgclass="J_mainImg mainImg" src="http://img.alicdn.com/bao/uploaded/i7/TB1Xpe_NXXXXXXRXFXXGTq09XXX_035318.jpg_430x430q90.jpg"/>
      <!-- 遮罩-既放大的区域 -->
      <pclass="J_glass glass"></p>
      <!-- 大图的容器 -->
      <pclass="J_imgMax imgMax">
        <!-- 大图 -->
        <imgclass="J_maxImg maxImg"/>
      </p>
    </p>

로그인 후 복사

다음은 기본 js 코드이며, 주석은 다음과 같습니다. Always:

js:

(function(){
    /* 放大镜函数
    ** @imgContainer  需要实现放大镜效果的图片容器  此处是 class 为 J_imgBox 的 p
    */
    function imgZoom(imgContainer){
 
      // 取大图url，不知道淘宝图片规则如何，反正看了详情页的大图和小图url对比，随便写了个替换
      var imgUrl = imgContainer.querySelector('.J_mainImg').src.replace(/.(jpg|jpeg|png|gif)(_)(d+)(x)(d+)(q90)?/g,'');
 
      // 取大图标签的节点
      var maxImg = imgContainer.querySelector('.J_maxImg');
 
      // 给该节点的src属性赋值为大图的url
      maxImg.src = imgUrl;
 
      // 取大图所在的容器
      var maxImgContainer = imgContainer.querySelector('.J_imgMax');
 
      // 取遮罩块
      var glassBlock = imgContainer.querySelector('.J_glass');
 
      // 取消放大镜效果
      var hideMaxImg = function(){
        glassBlock.style.top = '-9999px';
        glassBlock.style.left = '-9999px';
        maxImgContainer.style.display = 'none';
      }
 
      // 鼠标移出图片区域，取消放大镜效果
      imgContainer.onmouseout = function(event){
        event.stopPropagation();
        hideMaxImg();
      };
 
      // 鼠标在图片区域内移动事件
      imgContainer.onmousemove = function(event) {
        event.stopPropagation();
 
        // 取图片容器的大小及其相对于视口的位置，需要实时取，所以放在move事件里
        var clientRect = event.currentTarget.getBoundingClientRect();
 
        // 获取距鼠标距的上和左的坐标
        var leftX = event.clientX - clientRect.left;
        var leftY = event.clientY - clientRect.top;
 
        // 动态设置遮罩块的left和top位置  这里需要减去遮罩层的一半，因为鼠标位于遮罩块中心点
        var pointerLeft = leftX - 25;
        var pointerTop = leftY - 25;
 
        // 如果鼠标坐标移动超出原始图片区域边缘 则取消放大镜效果  因为这里存在快速移动鼠标到大图区域时，鼠标仍处在外层的图片区域内，并不会触发mouseout事件(虽然中间隔了小小的间距，但是快速移动仍能产生这个bug,如代码下面的图所示)
        if((pointerLeft+25) > clientRect.width || pointerLeft  clientRect.height || pointerTop ){
          hideMaxImg();
          return !1;
        };
 
        // 遮罩块在最左边的时候，鼠标仍在图片区域内，可在遮罩块左边缘至中心线区域内移动，且这时遮罩块为距左0像素
        if(pointerLeft ){
          pointerLeft = 0;
        };
 
        // 同上 右边限制
        if(pointerLeft > clientRect.width - 50){
          pointerLeft = clientRect.width - 50;
        };
 
        // 同上 顶部限制
        if(pointerTop ){
          pointerTop = 0;
        };
 
        // 同上 底部限制
        if(pointerTop > clientRect.height - 50){
          pointerTop = clientRect.height - 50;
        };
 
        // 设置遮罩块的位置
        glassBlock.style.left = pointerLeft;
        glassBlock.style.top = pointerTop;
 
        // 取遮罩快距离左边的位置和图片区域的宽高比，用于计算大图偏移距离，展示遮罩块所对应的图片区域
        var percentLeft = pointerLeft/clientRect.width;
        var percentHeight = pointerTop/clientRect.height;
 
        // 设置大图偏移距离 因为其父元素存在 overflow:hidden 所以只会展示对应区块
        maxImg.style.left = -(percentLeft*maxImg.clientWidth)+'px';
        maxImg.style.top = -(percentHeight*maxImg.clientHeight)+'px';
      };
    }
 
    var elem = document.querySelectorAll('.J_imgBox');
 
    elem.forEach(function(item,idx){
      imgZoom(item)
    })
  })()

로그인 후 복사

버그 수정 사진:

CSS를 사용하여 그림 돋보기 효과를 구현하는 예에 대한 자세한 설명(그림)

이 글을 읽고 나면 다음과 같은 느낌이 드시나요? 너무 간단하지 않나요? 다음으로 일상적인 개발에서 위 코드에서 추출할 수 있는 보다 실용적인 지식 포인트를 살펴보겠습니다.

Element .getBoundingClientRect()

Element.getBoundingClientRect () 메소드는 요소의 크기와 뷰포트를 기준으로 한 위치를 반환합니다.

예:

<bodystyle="width:1400;height:1000">
      <pid="testp" style="width:10px;height:20px;background:#f00"></p>
      <script>
        (function(){
          var elem = document.getElementById('testp');
          document.body.addEventListener('click',function(){
              console.log(elem.getBoundingClientRect())
          },false)
        })()
      </script>
    </body>

로그인 후 복사

효과 그림과 같이:

CSS를 사용하여 그림 돋보기 효과를 구현하는 예에 대한 자세한 설명(그림)

뷰를 이동한 다음 본문을 클릭하면 인쇄된 객체가 모두 올바르게 반환된다는 것을 렌더링에서 보는 것은 어렵지 않습니다. 요소의 크기와 뷰포트에 상대적인 위치

이 방법은 요소가 아래쪽/상단으로 스크롤될 때 해당 이벤트를 트리거하는 데에도 사용할 수 있어 매우 편리합니다.

1.event.target 및 event.currentTarget

target: 이벤트를 트리거한 요소를 가리킵니다.

currentTarget: 이벤트 핸들이 바인딩된 요소를 가리킵니다.

바인딩된

이벤트 핸들러

프로그램과 이벤트 핸들러를 트리거하는 프로그램이 동일한 객체인 경우에만 둘은 동일합니다

예제 코드:

html:

  <pid="ap">
      123
      <pid="bp">456</p>
    </p>

로그인 후 복사

js:

  document.getElementById('ap').addEventListener('click',function(e){
    if(e.target === e.currentTarget) {
      console.log('target === currentTarget')
    }else{
      console.log('target !== currentTarget')
    }
    console.log('target',e.target)
    console.log('currentTarget',e.currentTarget)
  },false)

로그인 후 복사

렌더링:

렌더링에서 우리는 456을 클릭하면 대상은 456이 있는 bp를 가리키고 currentTarget은 ap를 가리킵니다. 왜냐하면 이벤트는 ap에 바인딩되어 있지만 트리거는 bp에 있고 bp는 ap 내에 있기 때문입니다. ap. 123을 클릭하면 대상이 currentTarget과 일치하고 바인딩과 트리거링이 모두 ap에 있습니다. CSS를 사용하여 그림 돋보기 효과를 구현하는 예에 대한 자세한 설명(그림)

2.event.preventDefault() & event.stopPropagation()

preventDefault: 이벤트가 취소 가능한 경우 이벤트 전파를 더 이상 중단하지 않고 이벤트를 취소합니다.

stopPropagation : 캡처 및 버블링 단계에서 현재 이벤트의 추가 전파 방지

3.event.stopPropagation() & event.stopImmediatePropagation()

stopPropagation: 캡처 및 버블링 단계에서 현재 이벤트의 추가 전파 방지 단계

stopImmediatePropagation의 추가 전파: 다른 이벤트 리스너가 요소에서 동일한 이벤트를 호출하는 것을 방지하고 버블링을 방지합니다.

둘 사이의 차이점 예:

html:

  <pid="ap">
      123
      <pid="bp">456</p>
    </p>

로그인 후 복사

js:

  document.getElementById('ap').addEventListener('click',function(){
    console.log('click ap')
  },false)
  document.getElementById('bp').addEventListener('click',function(e){
    e.stopImmediatePropagation();
    console.log('click bp')
  },false)
  document.getElementById('bp').addEventListener('click',function(){
    console.log('click me too')
  },false)

로그인 후 복사

위 코드의 실행 결과는 다음과 같습니다.