gpt4 book ai didi

javascript - 悬停视频交换

转载 作者:行者123 更新时间:2023-11-28 08:35:48 28 4
gpt4 key购买 nike

我一直在尝试为我正在开发的网站进行视频交换。我想为我悬停的图像更改更大的图像。我可以进行图像交换,但是当我尝试添加视频时,它崩溃了。有人知道我能做什么吗?

<div id="imgDetail">
<video width="546" height="362" controls>
<source src="assets/img/ebuzzing3" type="video/mp4" class="img-responsive" id="bigImg">
Your browser does not support the video tag.
</video>
<ul>
<li><video width="320" height="240" controls>
<source src="assets/img/ebuzzing3" type="video/mp4" class="img-responsive" id="bigImg">
Your browser does not support the video tag.
</video></li>
<li><img src="assets/img/ebuzzing1.png" class="thumb" /></li>
<li><img src="assets/img/ebuzzing2.png" class="thumb" /></li>
<li><img src="assets/img/ebuzzing3.png" class="thumb" /></li>
<li><img src="assets/img/ebuzzing4.png" class="thumb" /></li>
<li><img src="assets/img/ebuzzing5.png" class="thumb" /></li>
<li><img src="assets/img/ebuzzing6.png" class="thumb" /></li>
</ul>
</div>



$('#imgDetail li img').hover(function(){
$('#bigImg').attr('src',$(this).attr('src'));
});

最佳答案

如果我理解正确,这可能会有所帮助:

HTML

<div id="imgDetail">
<video width="546" height="362" controls id="video">
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" class="img-responsive" id="bigImg">Your browser does not support the video tag.</video>
<ul>
<li ><img data-source='http://www.w3schools.com/html/movie.mp4' src="http://placehold.it/100x100" > </li>
<li ><img data-source='http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4' src="http://placehold.it/100x100" ></li>
<li ><video data-source='http://www.w3schools.com/html/movie.mp4' width="100" height="100" controls>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" class="img-responsive" id="bigImg">Your browser does not support the video tag.</video></li>
</ul>
</div>

JQuery:

$('#imgDetail img,video').on("mouseover", function () {



$('#video').attr('src', $(this).data('source'));

});

http://jsfiddle.net/6fU76/1/

我不确定您想要小视频作为大视频的缩略图,还是普通图像缩略图......所以,这两个选项都存在。由于灵 active ,我使用了自定义数据属性...

编辑:更新 fiddle :<强> http://jsfiddle.net/6fU76/7/

关于javascript - 悬停视频交换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21224789/

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