gpt4 book ai didi

javascript - 图像悬停时的 jQuery 视频帧预览

转载 作者:行者123 更新时间:2023-12-03 03:29:27 29 4
gpt4 key购买 nike

我正在尝试在用户将鼠标悬停在图像(如 YouTube)上时创建视频预览。

图像取自 FFmpeg,每 100 帧获取一帧,并保存在与第一个加载的图像相同的目录中,例如:20-1.jpg。当用户将鼠标放在第一个图像上时,它应该循环浏览其他图像,例如:20-2.jpg20-3.jpg 20,4.jpg

HTML

Twig获取项目的ID {{result.id}}

<div class="card result-card" onmouseover="updateThumb({{ result.id }})">
<a href="{{ url('vedi_oggetto', {'category': catName,'item': result.id,'title': slug}) }}">
<img class="card-img-top img-fluid" id="imgPreview-{{ result.id }}" src="/uploads/photos/{{ result.id }}-1.jpg" alt="Card image cap">
</a>
</div>

JS

function updateThumb(id) {
var timer,
count = 1,
cycle = function(el){
var s = el.attr('src'),
root = s.substring( 0, s.lastIndexOf('/') + 1 );
count = (count+1)%5;
el.attr('src', root + '2-' + ((count===0) ? '5' : count) + '.jpg');
};
$('#imgPreview-' + id).hover(function(){
var $this = $(this);
cycle($this);
timer = setInterval(function(){ cycle($this); }, 800);
}, function(){
clearInterval(timer);
});
}

问题是,当我将鼠标悬停在第一张图像上时,它会按预期工作并循环。但是,当我将鼠标悬停在第二个图像或其他图像上时,它会显示所有图像的第一个图像周期,因此它仅适用于一个图像。

最佳答案

假设您有两张 ID 分别为 20 和 30 的图像,那么您可以这样做:

var cycle = function(el) {
var s = el.attr('src');
var root = s.substring(0, s.lastIndexOf('-') + 1);
var count = s.substring(s.lastIndexOf('-') + 1).replace('.jpg', '');
count = (count*1+1)%5;
console.log(count);
console.log('-------');
el.attr('src', root + ((count === 0) ? '5' : count) + '.jpg');
};
$('body').on('mouseenter', '[id^=imgPreview-]', function(e) {
var thisImage = $(this);
var timer;
cycle(thisImage);
timer = setInterval(function() {
cycle(thisImage);
}, 800);
thisImage.on('mouseleave', function() {
clearInterval(timer);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="imgPreview-20" src="/uploads/photos/20-1.jpg" />
<img id="imgPreview-30" src="/uploads/photos/30-1.jpg" />

同时在 JSFiddle .

除了我在评论中提到的所有其他问题之外,您始终使用 ID 2 来生成这一行中的图像源:

el.attr('src', root + '2-' + ((count===0) ? '5' : count) + '.jpg');

关于javascript - 图像悬停时的 jQuery 视频帧预览,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46162476/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com