原生JS做淘宝商品放大镜

最新推荐文章于 2023-03-31 14:32:21 发布

BA..

最新推荐文章于 2023-03-31 14:32:21 发布

阅读量482

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_45702261/article/details/121993048

版权

原生JS做淘宝商品放大镜效果图预览HTML部分结构分析首先要清楚整个界面的分布情况，这里用id或是class，我一开始用的都是id，但后面做js的时候有一些需要document. querySelectorAll("className")返回一个关于class="className"数组,，我才改过来的div id="itemarea"：整个区域最大的div，包含着其他的div元素div id="pic"：存放被选中的大图片的区域div id="cover"：跟随鼠标浮动的用于选择将要被

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

原生JS做淘宝商品放大镜

效果图预览

在这里插入图片描述
~~动图压缩有点丑，见谅见谅~~

HTML部分

结构分析

首先要清楚整个界面的分布情况，这里用id或是class，我一开始用的都是id，但后面做js的时候有一些需要document. querySelectorAll("className")返回一个关于class="className"数组,，我才改过来的

div id="itemarea"：整个区域最大的div，包含着其他的div元素
- div id="pic"：存放被选中的大图片的区域
  - div id="cover"：跟随鼠标浮动的用于选择将要被放大区域的半透明方框
- ul class="list"：存放小图的区域
  - li：每个li中存放一个小图
- div class="detail"：存放被放大区域的等比例大图

代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车轮播图+放大效果</title>
    <link rel="stylesheet" href="index.css">

</head>
<body>

<div id="itemarea">
    <div id="pic">
        <img src="img/1大.png" alt="1大">
        <div id="cover"></div>
    </div>
    <ul class="list">
        <li><img class="current" src="img/1大.png" alt="1小"></li>
        <li>

最低0.47元/天解锁文章

BA..

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
原生JS做淘宝商品放大镜

原生JS做淘宝商品放大镜效果图预览HTML部分结构分析首先要清楚整个界面的分布情况，这里用id或是class，我一开始用的都是id，但后面做js的时候有一些需要document. querySelectorAll("className")返回一个关于class="className"数组,，我才改过来的div id="itemarea"：整个区域最大的div，包含着其他的div元素div id="pic"：存放被选中的大图片的区域div id="cover"：跟随鼠标浮动的用于选择将要被
复制链接

扫一扫