富贵资源网 Design By www.hznty.com

Javascript 实现放大镜效果

今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的放大镜效果效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个很好的思路就是,展示区是一小块可视区域,给他一个图片,超出可视区域的部分设为隐藏,有了这个思路,这个效果就能够很好的实现了,先看一下HTML结构!

 

<div id="pic_wrap">
  <div id="float_box"></div>
  <img src="/UploadFiles/2021-04-02/1.jpg">

  最外层的两个div,分别是商品原始图片区域,和放大后的可视区域!id为float_box的区域为放大镜所示的区域!第一个img为商品图片,第二个img为预留的放大后的商品!图片CSS代码如下!

img {
      width: 250px;
      height: 150px;
    }
    #pic_wrap {
      position: relative;
      width: 250px;
      height: 150px;
    }
    #float_box {
      width: 100px;
      height: 100px;
      background-color: green;
      filter: opacity(alpha: 30);
      opacity: 0.3;
      position: absolute;
      display: none;
    }
    #big_img {
      background-image: url(1.jpg);
      height: 450px;
      width: 750px;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
    }
    #show {    
      width: 300px;
      height: 300px;
      background-color: white;
      opacity: 1;
      filter: opacity(alpha:1);
      overflow: hidden;
      display: none;
    }

HTML和CSS写好之后,就要利用js给放大镜加一些交互效果!

  第一步,当鼠标移入的时候,放大镜能够显示出来!需要加onmouseover事件。

  第二步,当鼠标没有移除,且鼠标在图片内不停地移动, 需要加onmousemove事件。

  第三步,当鼠标完全移除后,需要加onmouseout事件。

  第四步,onmouseover事件需要让放大镜和可视窗口显示出来。

  第五步,onmousemove事件,让放大镜和可视窗口中的图片同时移动。

  第六步,onmouseout时间,让放大镜和可是窗口消失!

完整代码如下:



<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    /*body {
      margin: 0;
      padding: 0;
    }*/
    img {
      width: 250px;
      height: 150px;
    }
    #pic_wrap {
      position: relative;
      width: 250px;
      height: 150px;
    }
    #float_box {
      width: 100px;
      height: 100px;
      background-color: green;
      filter: opacity(alpha: 30);
      opacity: 0.3;
      position: absolute;
      display: none;
    }
    #big_img {
      background-image: url(1.jpg);
      height: 450px;
      width: 750px;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
    }
    #show {    
      width: 300px;
      height: 300px;
      background-color: white;
      opacity: 1;
      filter: opacity(alpha:1);
      overflow: hidden;
      display: none;
    }
  </style>
</head>
<body>
  <div id="pic_wrap">
    <div id="float_box"></div>
    <img src="/UploadFiles/2021-04-02/1.jpg">

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com