Javascript 更改随机图像的不透明度(切换)
我已经寻找了大约2个小时的答案,但没有成功:Javascript 更改随机图像的不透明度(切换),javascript,jquery,css,fadein,opacity,Javascript,Jquery,Css,Fadein,Opacity,我已经寻找了大约2个小时的答案,但没有成功: 如何制作一个动画,用缓慢的淡入淡出随机改变网格中图像的不透明度 只需分解组件,您就应该能够找出逻辑: 3×3网格中有9个化身 大约每3秒,就会有一个新的“活动”状态 所有不活动的内容都会淡出 因此,我们可以搜索如何生成,找出如何使用Javascript更改,以及如何使用活动和非活动元素之间的类 如果你能把所有这些放在一起,你就得到了你的组件 这不是最优雅的代码,因为我只花了大约5分钟就完成了,但您可能会得到这个想法并加以改进: jQuery $(
如何制作一个动画,用缓慢的淡入淡出随机改变网格中图像的不透明度 只需分解组件,您就应该能够找出逻辑:
- 3×3网格中有9个化身李>
- 大约每3秒,就会有一个新的“活动”状态
- 所有不活动的内容都会淡出
如果你能把所有这些放在一起,你就得到了你的组件 这不是最优雅的代码,因为我只花了大约5分钟就完成了,但您可能会得到这个想法并加以改进: jQuery
$(function(){
setInterval(function(){
var i = Math.floor(Math.random() * 10) + 1;
$("[data-highlight=1]").attr("data-highlight", "0").animate({
opacity: 0.2
}, 1000);
$("#photo-" + i).attr("data-highlight", "1").animate({
opacity: 1
}, 1000);
}, 3000);
});
CSS
HTML
DIV
DIV
DIV
DIV
DIV
DIV
DIV
DIV
DIV
DIV
这里是一个演示:您链接的网页中的代码正在执行以下操作(为了简单起见,我对其进行了一些修改):
我们很乐意帮忙。你尝试过什么?你有没有尝试过类似的东西:应用于CSS类的不透明度转换,它可以由图像上的javascript函数随机触发?这一点解释得很好,但并不完全有效:确实是图像fadeto,但有时一个图像不会fadeto 0.3
.photo {
width: 150px;
height: 150px;
background-color: #F00;
font-size: 2em;
color: #FFF;
float: left;
opacity: 0.2;
}
<div class="photo" id="photo-1" data-highlight="0">DIV</div>
<div class="photo" id="photo-2" data-highlight="0">DIV</div>
<div class="photo" id="photo-3" data-highlight="0">DIV</div>
<div class="photo" id="photo-4" data-highlight="0">DIV</div>
<div class="photo" id="photo-5" data-highlight="0">DIV</div>
<div class="photo" id="photo-6" data-highlight="0">DIV</div>
<div class="photo" id="photo-7" data-highlight="0">DIV</div>
<div class="photo" id="photo-8" data-highlight="0">DIV</div>
<div class="photo" id="photo-9" data-highlight="0">DIV</div>
<div class="photo" id="photo-10" data-highlight="0">DIV</div>
$(function(){
setInterval(setImageOpacity, 2000); // Every 2 seconds call function setImageOpacity()
});
function setImageOpacity() {
var images = $('#careerImageTable img'); // Gets all images from the grid
var currentIndex = -1;
$.each(images, function (index, item) { // Loops through each image
if ($(item).css('opacity') == 1) { // Checks the opacity of the current image
currentIndex = index; // If opacity == 1 then thats the current index
return false;
}
});
var nextIndex = currentIndex;
while (nextIndex == currentIndex) {
nextIndex = Math.floor(Math.random() * images.length); // Will loop until a different index is found
}
images.eq(currentIndex).fadeTo(1000, 0.3); // The opacity animations
images.eq(nextIndex).fadeTo(1000, 1);
}