JS源码实现放大镜功能

Suda Masaki534

已于 2022-03-12 14:55:06 修改

阅读量381

点赞数 1

文章标签： javascript html css

于 2022-03-12 14:39:43 首次发布

本文链接：https://blog.csdn.net/qq_59191991/article/details/123440792

版权

用到的方法有：

1.mousemove() 方法：当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件

2.mouseout() 方法：当鼠标指针离开被选元素时，会发生 mouseout 事件。

3.offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。返回第一个匹配元素的偏移坐标。该方法返回的对象包含两个整型属性：top 和 left。

详细代码如下：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>图片放大镜</title>
    <style>
        body,
        ul,
        li {
            padding: 0;
            margin: 0;
            list-style: none;
        }
 
        /* 缩略图和原图宽高一样 */
        .thumbnail,
        .origin {
            width: 400px;
            height: 465px;
            position: absolute;
            margin-top: 30px;
            margin-left: 30px;
        }
 
        .origin {
            left: 410px; /* 原图在缩略图的右边 */
            top: 0;
            overflow: h

最低0.47元/天解锁文章

Suda Masaki534

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS源码实现放大镜功能

用到的方法有：1.mousemove() 方法：当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件2.mouseout() 方法：当鼠标指针离开被选元素时，会发生 mouseout 事件。3.offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。返回第一个匹配元素的偏移坐标。该方法返回的对象包含两个整型属性：top 和 left。详细代码如下：<!DOCTYPE html><html lang="en"> <h...
复制链接

扫一扫