点击左边缩略图放大（详情页）

已于 2024-08-14 16:17:53 修改
阅读量95 收藏
点赞数 3
文章标签： css 前端 javascript
于 2024-08-14 16:17:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_69603357/article/details/141194082
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页</title>
    <style>
        /* 基本布局 */
        .unique-container {
            display: flex;
            width: 88%;
            margin: 0 auto;
        }

        .unique-left-section {
            width: 120px;
            padding: 20px;
            padding-right: 0;
            box-sizing: border-box;
            overflow: hidden;
			font-size: 14px;
        }

        .unique-right-section {
            flex: 1;
            padding: 20px;
            padding-left: 10px;
            display: flex;
            align-items: flex-start;
            justify-content: center;
        }

        /* 轮播图 */
        .unique-carousel {
            display: flex;
            align-items: center;
        }

        .unique-thumbnails {
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: #ccc #f1f1f1;
        }
        .unique-thumbnails {
            overflow-y: scroll;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        
        .unique-thumbnails::-webkit-scrollbar {
            display: none;
        }
        .unique-thumbnails img {
            width: calc(100% - 4px);
            margin-bottom: 20px;
            cursor: pointer;
        }
        
        .unique-thumbnails img.highlighted {
            border: 2px solid #000;
        }

        .unique-images {
            flex: 1;
            position: relative;
            height: 100%;
        }

        .unique-images img {
            width: 100%;
            height: auto;
            max-height: 100%;
            display: none;
        }

        .unique-images img.visible {
            display: block;
        }

        /* SKU选择 */
        .unique-sku-options {
            display: flex;
            margin-top: 10px;
        }

        .unique-sku-option {
                padding: 6px 12px;
                border: 1px solid #e8e8e1;
                margin-right: 10px;
                cursor: pointer;
        }

        .unique-sku-option.selected {
            border:2px solid #dd8c3280;
        }

        /* 数量选择 */
        .unique-quantity {

            display: flex;
            align-items: center;
			border:1px solid #e8e8e1
        }

        .unique-quantity-button {
          padding: 6px;
		  cursor: pointer;
		  background: transparent;
		  border: none;
		  font-size: 20px;
        }

        .unique-quantity input {
               width: 100px;
               padding: 0;
               margin: 0;
               border: none;
               text-align: center;
			   outline: none;
        }
		

        /* 加入购物车按钮 */
        .unique-add-to-cart {
            background-color: #dd8c32;
            color: #fff;
            padding: 15px 30px;
            border: none;
            cursor: pointer;
			    background: #dd8c32;
			    border: 1px solid transparent;
			    border-radius: 3px;
			    cursor: pointer;
			    display: inline-block;
			    font-size: 14px;
			    font-weight: 700;
			    letter-spacing: .3em;
			    line-height: 1.42;
			    margin: 0;
			    min-width: 90px;
			    padding: 11px 20px;
			    text-align: center;
				margin-left: 20px;
			    
        }
		     .unique-add-to-cart:hover{
				 background-color: #000;
				 transition:all 0.5s;
				 color: #fff;
			 }

        /* 手风琴效果 */
        .unique-accordion-item {
            /* margin-top: 20px; */
        }

        .unique-accordion-header {
              position: relative;
                padding: 15px 0;
                cursor: pointer;
                border-top: 1px solid #ccc;
                display: flex;
                justify-content: space-between;
                align-items: center;
        }
		.accordion-arrow {
		       display: inline-block;
		       width: 6px;
		       height: 6px;
		       border: 1px solid #000;
		       border-right-color: transparent;
		       border-bottom-color: transparent;
		       transform: rotate(-135deg);
		       transition: border-top-color 0.3s;
		}
		.unique-accordion-header.active .accordion-arrow {
		   width: 6px;
		   height: 6px;
		   border: 1px solid #000;
		   border-right-color: transparent;
		   border-bottom-color: transparent;
		   transform: rotate(45deg);
		   transition: border-top-color 0.3s;
		}

        .unique-accordion-content {
            display: none;
          
            border-top: none;
        }

        .unique-accordion-header.active + .unique-accordion-content {
            display: block;
        }

        .unique-left-container {
            display: flex;
            flex: 1;
        }

        .unique-right-container {
            flex: 1;
            padding-left: 35px;
        }
	  .unique-right-container h1{
			word-wrap: break-word;
			margin-bottom: 10px;
			font-size: 28px;
		}
		.fullscreen {
		    position: fixed;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    background: rgba(255, 255, 255, 1);
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    z-index: 1000;
		    overflow: hidden;
			flex-direction: column;
		}
		
		.fullscreen img {
		    max-width: 90%;
		    max-height: 90%;
			position: relative;
		}
		
		.fullscreen-controls {
			position: absolute;
			bottom: 12%;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 12%;
		}
		
		.fullscreen-button {
		   background: #fff;
		       border: none;
		       color: #000;
		       cursor: pointer;
		       font-size: 18px;
		       width: 40px;
		       height: 40px;
		       display: flex;
		       align-items: center;
		       justify-content: center;
		       border-radius: 50%;
		}
		
		.fullscreen-button.left, .fullscreen-button.right {
		    position: absolute;
		    top: 50%;
		    transform: translateY(-50%);
		}
		
		.fullscreen-button.left {
		    left: 0px;
		}
		
		.fullscreen-button.right {
		    right: 0px;
		}
		
		.fullscreen-button.close {
		      position: absolute;
		      top: -26px;
		      /* right: 50%; */
		      background: #fff;
		      border-radius: 50%;
		      width: 50px;
		      height: 50px;
		      display: flex;
		      align-items: center;
		      justify-content: center;
		      font-size: 20px;
		}
		.unique-quantity-bg{
			display: flex;
			margin-bottom: 20px;
		}


    </style>
</head>

<body>
    <div class="unique-container">
        <div class="unique-left-container">
            <div class="unique-left-section">
                <!-- 缩略图 -->
                <div class="unique-thumbnails" id="unique-thumbnails-container">
                    <img src="./img/coloth.webp" alt="Thumbnail 1" class="highlighted"> <!-- 默认选中 -->
                    <img src="./img/coloth1.webp" alt="Thumbnail 2">
                    <img src="./img/coloth.webp" alt="Thumbnail 3">
                    <img src="./img/coloth1.webp" alt="Thumbnail 4">
                    <img src="./img/coloth1.webp" alt="Thumbnail 5">
                    <img src="./img/coloth.webp" alt="Thumbnail 6">
                    <img src="./img/coloth1.webp" alt="Thumbnail 7">
                    <img src="./img/coloth1.webp" alt="Thumbnail 8">
                    <img src="./img/coloth.webp" alt="Thumbnail 9">
                    <img src="./img/coloth1.webp" alt="Thumbnail 10">
                </div>
            </div>
            <div class="unique-right-section">
                <!-- 轮播图 -->
                <div class="unique-carousel">
                    <div class="unique-images" id="unique-image-container">
                        <img src="./img/coloth.webp" alt="Image 1" class="visible"> <!-- 默认显示 -->
                        <img src="./img/coloth1.webp" alt="Image 2">
                        <img src="./img/coloth.webp" alt="Image 3">
                        <img src="./img/coloth1.webp" alt="Image 4">
                        <img src="./img/coloth1.webp" alt="Image 5">
                        <img src="./img/coloth.webp" alt="Image 6">
                        <img src="./img/coloth1.webp" alt="Image 7">
                        <img src="./img/coloth1.webp" alt="Image 8">
                        <img src="./img/coloth.webp" alt="Image 9">
                        <img src="./img/coloth1.webp" alt="Image 10">
                    </div>
                </div>
            </div>
        </div>
		<div id="fullscreen-container" class="fullscreen" style="display: none;">
		    <img id="fullscreen-image" src="" alt="Full Screen Image">
		    <div class="fullscreen-controls">
		        <button class="fullscreen-button left">&lt;</button>
				 <button class="fullscreen-button close">&times;</button>
		        <button class="fullscreen-button right">&gt;</button>
		       
		    </div>
		</div>


        <div class="unique-right-container">
            <!-- 商品详情 -->
            <h1>绵面独特印花口袋阔腿裤</h1>
            <p class="unique-price">$36.88 USD</p>

            <div class="unique-sku">
                <p>颜色: 多色</p>
				<div class="unique-sku-options">
					
				</div>
				<p>尺寸: </p>
                <div class="unique-sku-options">
                    <div class="unique-sku-option selected">S</div>
                    <div class="unique-sku-option">M</div>
                    <div class="unique-sku-option">L</div>
                    <div class="unique-sku-option">XL</div>
                    <div class="unique-sku-option">XXL</div>
                    <div class="unique-sku-option">3XL</div>
                </div>
            </div>
			<p>数量: </p>
			<div class="unique-quantity-bg">
				 <div class="unique-quantity">
					<button class="unique-quantity-button">-</button>
					<input  value="1" min="1" class="unique-quantity-input">
					<button class="unique-quantity-button">+</button>
				</div>
				<button class="unique-add-to-cart">加入购物车</button>
			</div>
           

            <!-- 手风琴效果 -->
			  <div class="unique-accordion">
				  <div class="unique-accordion-item">
					  <div class="unique-accordion-header">
						  产品描述
						  <span class="accordion-arrow"></span>
					  </div>
					  <div class="unique-accordion-content">
						  <p>这里是产品描这里是产品描述内容这里是产品描述内容这里是产品描述
						  这里是产品描述内容这里是产品描述内容这里是产品描述内容
						  这里是产品描述内容这里是产品描述内容
						  这里是产品描述内容这里是产品描述内容
						  这里是产品描述内容这里是产品描述内容
						  这里是产品描述内容这里是产品描述内容
						  内容这里是产品描述内容这里是产品描述
						  内容这里是产品描述内容这里是产品描述
						  内容这里是产品描述内容述内容。这里是产品描述内容
						  这里是产品描述内容这里是产品描述内容
						  这里是产品描述内容这里是产品描述内容
						  这里是产品描述内容这里是产品描述内容</p>
						  这里是产品描述内容这里是产品描述内容
						  
					  </div>
				  </div>
				  <div class="unique-accordion-item">
					  <div class="unique-accordion-header">
						  详细信息
						  <span class="accordion-arrow"></span>
					  </div>
					  <div class="unique-accordion-content">
						  <p>这里是详细信息内容。</p>
					  </div>
				  </div>
				  <div class="unique-accordion-item">
					  <div class="unique-accordion-header">
						  送货与退货
						  <span class="accordion-arrow"></span>
					  </div>
					  <div class="unique-accordion-content">
						  <p>这里是送货与退货内容。</p>
					  </div>
				  </div>
			  </div>
        </div>
    </div>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
          // 轮播图切换
          const thumbnails = document.querySelectorAll('.unique-thumbnails img');
          const images = document.querySelectorAll('.unique-images img');
          const fullscreenContainer = document.getElementById('fullscreen-container');
          const fullscreenImage = document.getElementById('fullscreen-image');
          let thumbnailsdex = 0;
          
          // 默认展示第一张图片
          if (images.length > 0) {
              images[0].classList.add('visible');
          }
          if (thumbnails.length > 0) {
              thumbnails[0].classList.add('highlighted');
          }
          
          thumbnails.forEach((thumbnail, index) => {
              thumbnail.addEventListener('click', function () {
                  images.forEach(img => img.classList.remove('visible'));
                  thumbnails.forEach(thumb => thumb.classList.remove('highlighted'));
                  images[index].classList.add('visible');
                  thumbnail.classList.add('highlighted');
              });
          });
          
          // SKU选择
          const skuOptions = document.querySelectorAll('.unique-sku-option');
          skuOptions.forEach(option => {
              option.addEventListener('click', function () {
                  skuOptions.forEach(opt => opt.classList.remove('selected'));
                  this.classList.add('selected');
              });
          });
          
          // 加减按钮控制数量输入
          const quantityInput = document.querySelector('.unique-quantity-input');
          const minusButton = document.querySelector('.unique-quantity-button:first-child');
          const plusButton = document.querySelector('.unique-quantity-button:last-child');
      
          minusButton.addEventListener('click', function() {
              let currentValue = parseInt(quantityInput.value);
              if (currentValue > 1) {
                  quantityInput.value = currentValue - 1;
              }
          });
      
          plusButton.addEventListener('click', function() {
              let currentValue = parseInt(quantityInput.value);
              quantityInput.value = currentValue + 1;
          });
      
          // 防止用户直接输入小于1的值
          quantityInput.addEventListener('input', function() {
              if (quantityInput.value < 1) {
                  quantityInput.value = 1;
              }
          });
      
          // 手风琴效果
          const accordionHeaders = document.querySelectorAll('.unique-accordion-header');
          accordionHeaders.forEach(header => {
              header.addEventListener('click', function () {
                  const content = this.nextElementSibling;
                  const isActive = this.classList.contains('active');
                  // 切换当前项
                  if (isActive) {
                      this.classList.remove('active');
                      content.style.display = 'none';
                  } else {
                      this.classList.add('active');
                      content.style.display = 'block';
                  }
              });
          });
          
          // 调整缩略图容器高度以匹配大图容器
          function adjustThumbnailHeight() {
              const imageContainer = document.getElementById('unique-image-container');
              const thumbnailsContainer = document.getElementById('unique-thumbnails-container');
              thumbnailsContainer.style.height = imageContainer.clientHeight + 'px';
          }
          
          // 调整一次高度
          adjustThumbnailHeight();
          
          // 窗口调整时重新计算高度
          window.addEventListener('resize', adjustThumbnailHeight);
          
          // 点击大图全屏显示
          images.forEach((img, index) => {
              img.addEventListener('click', function () {
                  thumbnailsdex = index;
                  fullscreenImage.src = this.src;
                  fullscreenContainer.style.display = 'flex';
              });
          });
          
          // 关闭全屏显示
          document.querySelector('.fullscreen-button.close').addEventListener('click', function () {
              fullscreenContainer.style.display = 'none';
          });
          
          // 切换到下一张图片
          document.querySelector('.fullscreen-button.right').addEventListener('click', function () {
              thumbnailsdex = (thumbnailsdex + 1) % images.length;
              fullscreenImage.src = images[thumbnailsdex].src;
          });
          
          // 切换到上一张图片
          document.querySelector('.fullscreen-button.left').addEventListener('click', function () {
              thumbnailsdex = (thumbnailsdex - 1 + images.length) % images.length;
              fullscreenImage.src = images[thumbnailsdex].src;
          });
          
          // 关闭全屏显示（点击全屏容器以外区域）
          fullscreenContainer.addEventListener('click', function (event) {
              if (event.target === fullscreenContainer) {
                  fullscreenContainer.style.display = 'none';
              }
          });
      });


    </script>
</body>

</html>

serzoe950
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html点击图片后图片移动,移动端点击图片放大图片，可左右切换图片
weixin_35776153的博客
06-04 2049
实现方式：借助插件：jquery.SuperSlide.2.1.3.js在使用之前需要先引入jquery然后再引入第三方插件！！！！点击缩略图显示的大图需要借助插件的一个属性：：defaultIndeximage.png从你点击图片开始，左右滑动Html代码：//此处是大图预览的盒子 ，切换图片也在此处实现功能 css部分代码：image.png/*移动端商品详情页的小图放大功能实现*/.hd-d...
element表格图片放大_element-ui表格缩略图悬浮放大
weixin_26757925的博客
12-31 524
element-ui界面非常简洁和美观，提供的组件可以满足绝大多数的应用场景，当表格中显示了图片的缩略图时，想要鼠标浮动在缩略图上时放大图片的效果，该如何实现呢？element-ui虽然没有直接提供图片悬浮放大的组件，但是可以使用Popover弹出框组件，一样实现效果，如下：具体的代码(此处只是图片单元格的代码，其它代码省略)：prop="picture"header-align="center"...
html点击页面放大,JS实现点击图片跳转页面放大功能【原创】
weixin_29963537的博客
06-03 1234
如图：点击图片时跳转链接，要求放大图片和底部有缩略图，如图所示：思路：1)、在列表页，给每一个数据加上对应的标识位，点跳转时传过去2)、获取值、获取屏幕宽度var number = '{{ app.request.get('n') }}';var window_width = $(document).width();3)、获取外层slide-ul的left偏移值$('.slide-ul').css...
Vue轮播缩略图（element ui）+鼠标悬浮放大图片（PicZoom）商城详情页图片展示
宁
07-03 3858
效果: PicZoom.vue（图片放大组件） <template> <div class="magnifier-box" :class="vertical?'vertical':''" :ref="id" @mousemove="mousemove" @mouseover="mouseover" @mouseleave="mouseleave" > <img v-show="showImg" :src="img
电商缩略图及放大镜
05-26
4. **可点击性**：缩略图应具备可点击性，点击后能跳转至商品详情页或者放大显示。 其次，放大镜功能主要应用于商品详情页，它允许用户在不离开当前页面的情况下查看商品的细节。实现放大镜功能的关键技术包括： 1...
缩略图联动
06-19
2. 商品详情页：在电商网站上，用户可以先通过缩略图快速浏览商品的多角度图片，点击后显示高清大图。 3. 滑动广告：广告轮播中，缩略图可以预览即将显示的广告内容。 四、关键技术点 1. 图片加载优化：利用图片库...
点击缩略图大图片呈渐变显示
06-11
当用户点击缩略图时，对应的全尺寸图片会在右侧以渐变的方式放大展示。这里的“渐变”通常指的是大小变化和透明度变化的过程。这种效果可以通过CSS3的动画或者JavaScript库来实现。CSS3的`transition`属性可以定义...
ecshop商品详情页图片放大与切换
05-07
关键在于，要在HTML代码中正确设置图片的原始尺寸和缩略图尺寸，并应用相应的JavaScript事件监听器。 其次，图片切换功能则是为了让用户浏览多张商品图片，了解商品的各个角度或不同样式。ECSHOP通常使用幻灯片...
picturepriview:原生js图片预览插件，仿淘宝京东图片放大及缩略图预览
05-14
本项目"picturepreview:原生js图片预览插件，仿淘宝京东图片放大及缩略图预览"专注于提供一种纯JavaScript实现的图片预览解决方案，它模仿了电商巨头如淘宝和京东的图片查看体验，让用户在网页上可以方便地查看大图...
css实现水滴效果图
yinge0508的博客
08-12 1990
【代码】css实现水滴效果图。
响应式Web设计：纯HTML和CSS的实现技巧
最新发布
Caleb的博客
08-16 776
响应式设计的核心理念是使用灵活的布局和媒体查询来自动调整网页的布局和样式。传统的静态网页设计往往只能适应固定的屏幕尺寸，而响应式设计则能够根据用户设备的不同，自适应地调整内容展示。它允许我们为不同的屏幕尺寸和特性定义不同的CSS样式，从而实现页面的自适应布局。）在响应式设计中非常重要，因为它们可以根据不同的设备和用户设置调整元素的大小。这样，无论图片的实际尺寸如何，它都会根据其容器的宽度自动缩放，从而避免了图片溢出容器的情况。函数，使得网格项在屏幕尺寸变化时自动调整列数和列宽，从而适应不同的显示设备。
PHP 实战：动态更改 CSS 值
withkai44的博客
08-15 244
在上面的代码中，我们首先设定了一个变量 $userFontSize 来模拟获取用户设置的字体大小，然后通过 echo 函数将 CSS 样式输出到页面中。除了直接在服务器端输出或生成 CSS 文件外，还可以结合 JavaScript 来动态更改样式。这种方式更为灵活，可以根据用户的行为实时更改样式。如果需要更改的样式较多，我们也可以选择生成一个新的 CSS 文件。直接输出 CSS 样式。生成新的 CSS 文件。
css-浮动
m0_73882020的博客
08-16 391
不再保留原先的位置。
【CSS】数字英文css没有转换成...换行点、没有换行、拆分的问题（非常常见的需求）
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
08-16 842
默认情况下，连续的英文或数字文本不会在空格处换行，这可能导致布局问题。
CSS使用touch-action属性控制设备的触摸行为
读心悦
08-15 452
CSS 属性是一个用于设置触摸操作（如触摸滑动、双击缩放等）在特定元素上的默认行为如何被浏览器处理的属性。这个属性主要用于优化移动端和触摸设备的交互体验，减少不必要的触摸事件处理或冲突，特别是在处理滚动、缩放等复杂交互时。
CSS基础
ZZPIGKK的博客
08-12 475
2.一般将CSS文件单独写，HTML文件要引入该文件。3.1.1 外部CSS文件，Class选择器的写法v。3.Class选择器在HTML的标签中的使用。6.选择器优先级排序，越精准优先级越高。7.CSS内部嵌套到HTML中的样式。4.ID选择器，一般ID不重复的。5.ID选择器的写法。
css如何使一个盒子水平垂直居中
2201_75773271的博客
08-15 651
方法三：利用 display：flex;方法二：利用 margin:auto;方法一：利用定位(常用方法,推荐）方法四：利用 transform。
CSS image-set()函数与多倍图设置
读心悦
08-15 439
函数是 CSS 中的一个功能，它允许你为不同的屏幕密度（如 Retina 显示屏）指定不同的图像版本。这主要用于提高图像在高清屏幕上的显示质量，同时保持较低分辨率屏幕上的加载速度和性能。然而，需要注意的是，函数并不是所有浏览器都支持的标准 CSS 特性，但它在较新的浏览器（如 Chrome、Firefox 和 Safari）中得到了较好的支持。
element 缩略图放大
05-20
要实现Element缩略图放大的效果，可以使用Element UI中的Dialog组件。首先，在需要显示缩略图的地方添加一个图片元素，并在其上绑定点击事件，点击时触发一个方法，该方法打开一个Dialog组件，并将需要显示的图片...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值