本文实例为大家分享了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">

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

标签:
js,图片放大

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“JS图片放大效果简单实现代码”

暂无“JS图片放大效果简单实现代码”评论...