基于JavaScript实现放大镜效果

最新推荐文章于 2022-05-02 21:25:16 发布

苦涩2020

最新推荐文章于 2022-05-02 21:25:16 发布

阅读量290

点赞数

分类专栏：前端案例练习文章标签： javascript html5 css3

本文链接：https://blog.csdn.net/UserPython/article/details/106893080

版权

基于JavaScript实现放大镜效果描述：右侧图片必须是左侧图片的倍数大，主要是获取鼠标相对与被触发元素的坐标位置，再通过位置定位实现效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>放大镜效果</title> <style type="text/css"> *{ .

摘要由CSDN通过智能技术生成

基于JavaScript实现放大镜效果

在这里插入图片描述

描述：右侧图片必须是左侧图片的倍数大，主要是获取鼠标相对与被触发元素的坐标位置，再通过位置定位实现效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜效果</title>
    <style type="text/css">
        *{
    
            margin: 0; padding: 0;
        }
        #left{
    
            width: 400px; height: 400px; 
            background: url(./400x400.jpg) no-repeat 0 0/100% 100%;
            float: left; margin-left: 20px;
            position: relative;
            cursor: crosshair;
        }
        
        #box{
    
            /* 大小应该是图片的四分之一 */
            width: 200px; height: 200px; 
            background:

最低0.47元/天解锁文章

苦涩2020

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
基于JavaScript实现放大镜效果

基于JavaScript实现放大镜效果描述：右侧图片必须是左侧图片的倍数大，主要是获取鼠标相对与被触发元素的坐标位置，再通过位置定位实现效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>放大镜效果</title> <style type="text/css"> *{ .
复制链接

扫一扫

专栏目录