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

本文实例为大家分享了JS实现图片放大效果 ,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"/>
   <title></title>
   <style type="text/css"> 
  #div1 { 
    width:300px; 
    height:300px; 
    position:relative; 
    margin:30px auto 0px;
  } 
  #div1 img{
     width: 300px;
  } 
   #div1 span { 
    width:150px; 
    height:150px; 
    background:red; 
    position:absolute;
     left:0px;
     top:0px; 
    display:none; 
    opacity:0.2;
  } 
  .show { 
    width:100%; 
    height:100%;
     background:red;
     position:absolute;
     left:0px; top:0px; 
    z-index:10px; 
    opacity:0.1;
  } 
  #div2 {
     width:300px;
     height:300px; 
    position:relative; 
    top: -300px;
     left: 300px;
     display:none; 
    overflow:hidden; 
    margin:0px auto 0px;
  } 
  #img1 { 
    position:absolute;
  } 
  </style> 
  </head>
  <body>
     <div id="div1"> 
      <!-- 图片 -->
      <img src="/UploadFiles/2021-04-02/xiangqing.png">

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

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