相思资源网 Design By www.200059.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">

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

标签:
js,图片放大

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

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

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

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。