过渡效果点击
Transition Effect onClick
本文关键字:过渡效果 更新时间:2023-09-26
我试图添加一个过渡效果到这个代码。它的作用是,当你碰到样品颜色时,产品就会从原来的黑色变成另一种颜色。然而,转型并不容易,所以这是一个非常艰难的转型。我要在哪里添加过渡?
<script>
function changeImage(imgName) {
image = document.getElementById('imgDisp');
image.src = imgName;
}
</script>
<style type="text/css">
span {
display:inline-block;
}
span:hover {
cursor: pointer;
color: #999999;
text-align:left;
}
</style>
<span onclick="changeImage('{{'pink-small.png' | asset_url}}')">
<img src="{{'swatch-1.png' | asset_url}}">
Pink
</span>
<span onclick="changeImage('{{'black-small.png' | asset_url}}')">
<img src="{{'swatch-2.png' | asset_url}}">
Black
</span>
<span onclick="changeImage('{{'brown-small.png' | asset_url}}')">
<img src="{{'swatch-3.png' | asset_url}}">
Brown
</span>
<img id="imgDisp" src="{{'black-small.png' | asset_url}}">
实现预期效果的最简单方法是将两个图像div
相互叠加。将较低的div
设置为目标图像,并淡出顶部的div
。一旦顶部的div
褪色,切换到目标图像,并立即恢复其不透明度。因为你的帖子被标记为jquery
,我将在我的例子中使用它的过渡函数(Credit to TinyGiant for swatch代码)。
function changeImage(url) {
$img = $('#imgDisp');
$imgfi = $('#imgDispFadeIn');
$imgfi.attr('src', url);
$img.fadeOut(1000, function() {
$img.attr('src', url)
$img.fadeIn(0);
});
}
span {
display: inline-block;
}
#imgContainer {
position: relative;
width: 100px;
height: 100px;
}
#imgDisp,
#imgDispFadeIn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#imgDisp {
z-index: 10;
}
.swatch {
width: 25px;
height: 25px;
}
.swatch.pink {
background: pink;
}
.swatch.black {
background: black;
}
.swatch.brown {
background: brown;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
</script>
<span onclick="changeImage('//lorempixel.com/200/200/nature/1')">
<div class="swatch pink"></div>
</span>
<span onclick="changeImage('//lorempixel.com/200/200/nature/2')">
<div class="swatch black"></div>
</span>
<span onclick="changeImage('//lorempixel.com/200/200/nature/3')">
<div class="swatch brown"></div>
</span>
<div id="imgContainer">
<img id="imgDisp" src='//lorempixel.com/200/200/nature/1' />
<img id="imgDispFadeIn" src="" />
</div>
相关文章:
- 滚动延迟页面过渡效果
- 如何根据上一个或下一个箭头为nivo滑块提供特定的过渡效果
- 如何在javascript中添加过渡效果
- 在它们停止工作后恢复过渡效果
- 如何在没有过渡效果的情况下使用fancybox调整大小
- 加载新页面时的过渡效果,AJAX
- 覆盖ColorBox打开/关闭过渡效果
- 带有onclick的CSS3过渡效果
- 当单击菜单时,应用过渡效果来减慢子菜单的打开速度
- 让 jquery 和 css 过渡效果协同工作
- 具有放大/缩小过渡效果的全屏滑块
- JQuery 移动版:仅在后退/前进按钮上禁用页面过渡效果
- 暂时禁用CSS过渡效果的最干净方法是什么
- 如何在自动完成中制作过渡效果(幻灯片)
- 隐藏 3 列并将其中一列扩展为 100% 行时的 jQuery 过渡效果
- CSS 切片/插槽过渡效果,用于/与 DIV 一起使用
- Vue.js具有CSS动画和过渡效果的待办事项任务
- CSS3滑块过渡效果
- 缩放过渡效果
- 如何在淘汰amd组件之间应用过渡效果