首页 > 其他分享 >JS实现图片放大镜效果

JS实现图片放大镜效果

时间:2024-10-30 22:19:25浏览次数:3  
标签:放大镜 100px 300px height width 500px position JS 图片

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 300px;
            border: 1px solid;
            position: relative;
            img{
                width: 500px;
                height: 300px;
            }
            .active{
                width: 100px;
                height: 100px;
                background: rgba(255, 255, 0, 0.329);
                position: absolute;
                left: 0;
                top: 0;
                display: none;
            }
        }
        .box2{
            display: none;
            width: 500px;
            height: 300px;
            border: 1px solid;
            position: relative;

标签:放大镜,100px,300px,height,width,500px,position,JS,图片
From: https://blog.csdn.net/yyyyyyysc/article/details/143376452

相关文章

  • 568. 蜡笔小新动漫主题 大学生期末大作业 Web前端网页制作 html+css+js
    目录一、网页概述二、网页文件三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界!这里有各行各业的Web前端网页制作的案例,样式齐全新颖,并持续更新!感谢CSDN,提供了这......
  • 本地开发nodejs服务走系统代理 `https-proxy-agent`
    本地开发nodejs服务走系统代理https-proxy-agent使用场景:前端开发中,后端API在工作电脑网络环境不能被直接访问,需要走公司内网代理,或上外网代理等系统代理服务;开发服务nodejs代理的浏览器请求,可能不会自动走系统代理,需要手动配置。constHttpsProxyAgent=require("https-pr......
  • Typora+gitee+picgo突然失效,此前Typora里面的图片image load failed,图片是gitee链接
    Typora+gitee+picgo突然失效,此前Typora里面的图片imageloadfailed,图片是gitee链接单纯把http链接复制粘贴到网页可以打开图片,但在Typora里面就是加载失败尝试解决方法如下:1、怀疑是Typora版本问题从用了几年的TyporaV1.02版本更新到最新的V1.9版本,发现所有图片又全都......
  • Vue.js内置指令全解析:从基础到实践
    文章目录前言Vue.js内置指令详解v-textv-htmlv-showv-ifv-elsev-else-ifv-forv-onv-bindv-modulev-slotv-prev-oncev-memov-cloak结尾前言在Vue.js的世界里,指令是连接数据和视图的桥梁,它们为开发者提供了一种声明式的方法来处理常见的任务。本文将详细介绍Vue.js......
  • CesiumJS 案例 P12:添加指定长宽的图片图层并居中显示(圆点分别为图片图层的中心点、左
    CesiumJSCesiumJSAPI:https://cesium.com/learn/cesiumjs/ref-doc/index.htmlCesiumJS是一个开源的JavaScript库,它用于在网页中创建和控制3D地球仪(地图)一、添加加指定长宽的图片图层并居中显示(原点为图片图层的中心点)<!DOCTYPEhtml><htmllang="en"> <head>......
  • 如何在Vue2项目中使用Mock.js
    引言 首先我们要了解为什么使用Mock.js,我们在前端开发项目期间,可能我们的后端提供接口的速度跟不上我们前端的开发速度,这时我们就需要用到Mock.js来模拟后端接口和数据Mock.js介绍 Mock.js是一个用于生成随机数据和拦截Ajax请求的JavaScript库。它非常适合在前端开发......
  • js0smt.dll 文件丢失?高效修复 js0smt.dll 缺失步骤
    当遇到js0smt.dll文件丢失的问题时,以下是一些高效的修复步骤,可以帮助您恢复文件的正常使用:一、确认文件丢失并重启计算机观察错误提示:当您尝试启动某个程序或游戏时,如果系统提示“找不到js0smt.dll”或“js0smt.dll缺失”,则说明该文件可能已丢失或损坏。重启计算机:......
  • 前端面试题整合(有html、css、js、vue等)
    #一、html#行内外空元素行内元素:a/img/span/b/strong/input/select/section块级元素:div/p/table/ul/li/h1-h6空元素:br/hr/img/input/link/meta#浏览器内核Trident:IE,360,搜狗Gecko:FirefoxPresto:旧OperaWebkit:Safari,旧ChromeBlink:Chrome,Opera#浏览器存储c......
  • 浏览器中在线预览pdf文件,pdf.mjs插件实现web预览pdf
    背景:本来只是淘宝上卖卖袜子,想着扩展一下业务,准备做同名“来家居”海外袜子馆外贸项目,碰到pdf在线预览的需求,就找了pdf.js插件进行实践后把此方法记录下来,可以通过多种方法来实现,每种方法都有其优缺点和适用场景。简单一点的可以使用<iframe>或<embed>标签,这两种方法都是通过浏览......
  • js文件切片上传组件resumable.js使用
    接到一个媒体文件切片上传的需求,写demo记录下。前端<fieldset><legend>videopreview</legend><div><videoid="video-preview"controlsmutedheight="112px"width="200px"></video><inputtype="......