整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
片画廊组件是网站中常见的UI组件，尤其是在电商平台的产品详情页上，它允许用户通过缩略图快速浏览和查看产品的多个图片。本文介绍如何仅使用原生的js、css和html实现下面动画呈现的图片画廊组件。
首先创建HTML结构，包括主图区域和下方导航区域，需要重点交代的是id为spec-list的div元素是缩略图列表的容器，容器的position属性是relative，设置了固定的宽度，overflow设置为hidden，这样其子元素超过宽度的部分将不可见，它就相当于窗户，提供了一个矩形的的可见视野。ul装载所有的缩略图，它的position属性设置为absolute，这样就可以基于其父元素设置偏移量，它的宽度大于父元素的宽度，这样就通过设置left属性实现左右滑动，在父窗口范围内的缩略图将是可见的，这样就实现了滑动效果。
<div class="product-intro">
<div class="preview-wrap">
<div class="preview" id="preview">
<!-- 主图显示区域 -->
<div class="main-img" style="width: 460px; height: 460px;">
<img id="spec-img" alt="" src="./images/ai-generated-8833166_1280.webp"
style="width: 100%; height: 100%; object-fit: cover;">
</div>
<!-- 下方导航列表 -->
<div class="spec-list" style="width: 452px;">
<!-- 左侧箭头 -->
<a id="spec-forward" href="javascript：;" class="arrow-prev disabled">
<i class="sprite-arrow-prev">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" style="scale:2;">
<path fill="currentColor" fill-rule="evenodd" d="m15 4l2 2l-6 6l6 6l-2 2l-8-8z"/>
</svg>
</i>
</a>
<!-- 右侧箭头 -->
<a id="spec-backward" href="javascript：;" class="arrow-next">
<i class="sprite-arrow-next">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" style="scale:2;">
<path fill="currentColor" fill-rule="evenodd" d="m9.005 4l8 8l-8 8L7 18l6.005-6L7 6z"/>
</svg>
</i>
</a>
<!-- 缩略图列表可见区域 -->
<div id="spec-list" class="spec-items"
style="position: relative; width: 380px; height: 58px; overflow: hidden;">
<!-- 缩略图列表 -->
<ul class="lh" style="position: absolute; width: 456px; height: 58px; top: 0px; left: 0px;">
<li class="img-hover"><img alt="" src="./images/ai-generated-8833166_1280.webp" width="54" height="54"></li>
<li class=""><img alt="" src="./images/owl-50267_1280.jpg" width="54" height="54"></li>
<li class=""><img alt="" src="./images/seal-8834240_1280.webp" width="54" height="54"></li>
<li class=""><img alt="" src="./images/stork-8830107_1280.webp" width="54" height="54"></li>
<li class=""><img alt="" src="./images/triggerfish-8832563_1280.webp" width="54" height="54"></li>
<li class=""><img alt="" src="./images/ai-generated-8834126_1280.webp" width="54" height="54"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
.product-intro {
position: relative;
z-index: 1;
margin-top: 10px;
padding-bottom: 10px
}
.product-intro .preview-wrap {
float: left;
padding-bottom: 15px;
position: relative;
zoom:1;
z-index: 7
}
.preview {
position: relative
}
.preview .main-img {
border: 1px solid #eee;
margin-bottom: 20px;
zoom: 1
}
.preview svg {
color: #CCCCCC;
}
.preview .spec-list {
margin-bottom: 18px;
position: relative;
zoom: 1
}
.preview .spec-list ul {
margin: 0;
transition: left 0.5s ease;
list-style-type: none;
padding-left: 0;
}
.preview .spec-list .arrow-next,.preview .spec-list .arrow-prev {
display: block;
width: 22px;
height: 32px;
float: left;
position: absolute;
cursor: pointer;
top: 50%;
margin-top: -16px
}
.preview .spec-list .arrow-next i,.preview .spec-list .arrow-prev i {
display: block
}
.preview .spec-list .arrow-prev {
left: 0
}
.preview .spec-list .arrow-prev:hover i svg {
color: #999999;
}
.preview .spec-list .arrow-prev.disabled i svg {
color: #DFDFDF;
}
.preview .spec-list .arrow-next {
right: 0
}
.preview .spec-list .arrow-next:hover i svg {
color: #999999;
}
.preview .spec-list .arrow-next.disabled i svg {
color: #DFDFDF;
}
.preview .spec-items {
width: 224px;
margin: 0 auto;
overflow: hidden
}
.preview .spec-items ul {
width: 2000px
}
.preview .spec-items ul li {
float: left;
margin: 0 9px;
max-width: 60px;
max-height: 70px
}
.preview .spec-items ul li img {
border: 2px solid #fff;
padding-bottom: 1px
}
.preview .spec-items ul li.img-hover img,.preview .spec-items ul li:hover img {
border: 2px solid #e53e41
}
.preview #spec-img {
max-height: 600px;
}
.preview .spec-list .spec-items {
width: 390px
}
js主要处理鼠标hover到缩略图更新主图区域图片的src属性值，以及缩略图的红色边框效果；以及实现左右侧箭头点击产生的缩略图列表左右滑动效果、箭头失效处理，注意js中是直接设置ul的left属性值，要实现滑动的动画效果，需要在css样式中设置transition属性为left 0.5s ease，否则就不会产生动画效果。
天，我们希望与您分享一个缩放旅程脚本。最初显示主图像时，我们希望能够通过单击标签来放大图像的某些部分，而使用另一个图像作为更近的视图。这下一步可以包含其他标签，再次允许显示更多的图像。我们通过放大当前图像和淡入淡出来实现“放大”效果。
今天，我们希望与您分享一个缩放旅程脚本。最初显示主图像时，我们希望能够通过单击标签来放大图像的某些部分，而使用另一个图像作为更近的视图。这下一步可以包含其他标签，再次允许显示更多的图像。我们通过放大当前图像和淡入淡出来实现“放大”效果。
HTML结构
对于HTML结构，我们将有一个主容器和一个div中的每个图像与类“zt-item”：
<div id="zt-container" class="zt-container"> <div class="zt-item" data-id="zt-item-1"> <img class="zt-current" src="images/image1.jpg" /> <div class="zt-tag" data-dir="1" data-link="zt-item-2" data-zoom="5" data-speed="700" data-delay="50" style="top:138px;left:151px;"></div> <div class="zt-tag" data-dir="1" data-link="zt-item-3" data-zoom="6" data-speed="700" data-delay="50" style="top:253px;left:520px;"></div> </div> <div class="zt-item" data-id="zt-item-2"> <img class="zt-current" src="images/image1_1.jpg" /> <div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="5" data-speed="500" data-delay="0"></div> </div> <div class="zt-item" data-id="zt-item-3"> <img class="zt-current" src="images/image2_2.jpg" /> <div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="6" data-speed="500" data-delay="0"></div> </div></div>
<img class="zt-current" src="images/imageX.jpg" />是每一步中的形象。该项目然后具有特定属性的标签。
数据属性如下：
data-dir是1或-1，取决于我们是要“放大”（1）还是“放大缩小”（-1）
数据链接将指示我们将标签连接到哪个项目（基于我们给每个项目的数据ID）
数据缩放是缩放的因素。设置得非常低，我们放大或缩小的图像只会略微放大。
数据加速以毫秒为单位的动画速度
数据延迟新图像出现的延迟时间
上面的示例结构具有带有两个标签的第一个初始图像（zt-item-1），这两个标签通向zt-item-2和zt-item-3。zt-item-2和zt-item-3只有后面的标签。正如你所看到的，后面的标签有另外一个类“zt-tag-back”和一个数据目录值-1。
标签的位置在style属性中定义，您也可以为其添加其他大小。
选项
以下是默认选项：
$('#zt-container').zoomtour({ // if true the tags are rotated depending on their position
rotation : true, // zoom out animation easing. Example: easeOutBounce , easeOutBack
zoominEasing : '',
// zoom out animation easing
zoomoutEasing : '' });我们希望你喜欢这个小脚本，并找到它有用！
在HTML5中使用图像的方法
我们在做网页的时候往往要运用图片来进行点缀，无论是logo或是产品图像，都会给人耳目一新的感觉。那么在HTML5中，使用Canvas就可以直接插入图像，甚至可以对插入的图像进行平铺和裁剪等操作，接下来就让我们来了解一下在Canvas中图像的使用方式吧！
1.图像的插入
在HTML中可以使用img标签插入一个图像，而在HTML5中，我们就可以使用Canvas的drawlmage函数直接在指定位置插入图像。插入图像的代码如图所示：
在HTML5中插入图像的代码方式
在谷歌浏览器中的预览效果如图：
在HTML5中插入图像的方式预览
2.图像的平铺
在绘制平铺图像时，我们需要用到Canvas的createPattern函数，该函数有两个参数，第一个参数是需要平铺的图像，第二好参数确定以哪种方式进行平铺，可用的选项包括repent（在水平和垂直方向重复），repeat-x（在水平方向重复），repeat-y（在垂直方向重复），no-repeat（不重复），绘制水平和垂直方向重复的代码如图所示：
在HTML5中平铺图像的代码方式
在谷歌浏览器中的预览效果如图：
在HTML5中平铺图像的方式预览
3.图像的裁剪
Canvas允许用户在绘制图像时对绘制的图形进行裁剪操作，这时候需要用到绘图形函数，该函数有多个重载方法，这些方法分别如下图所示：
绘制图像函数的多个重载方法
该表对上述三个函数进行参数说明
绘制图像函数的参数说明
使用Canvas裁剪图像的代码如下图所示：
在HTML5中进行裁剪图像的代码示例
在谷歌浏览器中的预览效果如图：
在HTML5中进行裁剪图像在浏览器中预览示例
4.反转图像颜色
大家都知道图像是由一个一个的像素点组成的，根据各像素点颜色分配的不同，呈现出不同的图像。Canvas提供了修改像素点颜色的方法，用于度图像进行各种操作。通过修改像素反转图像颜色的代码如下图所示：
在HTML5中利用Canvas反转图像颜色代码
在谷歌浏览器中的预览效果如图：
在HTML5中利用Canvas反转图像颜色在浏览器中预览效果
好了，关于图像的使用方法我们就介绍到这里了。谢谢大家的观看。祝大家：身体健康、生活愉快！
*请认真填写需求信息，我们会在24小时内与您取得联系。
