マウスホバーでYoutube動画のサムネイルを連続表示させる
Result
jQuery
var timer = false;
function resetImg(name, id) {
$(name).attr('src', 'http://img.youtube.com/vi/' + id + '/1.jpg');
$(name).css('border', '1px solid #fff');
if (timer) {
clearTimeout(timer);
}
}
function nextImg(name, id, nr) {
var myId = $(name).attr('id');
$(name).attr('src', 'http://img.youtube.com/vi/' + id + '/' + nr + '.jpg');
$(name).css('border', '1px solid #333');
nr++;
if (nr > 3) {
nr = 1;
}
timer = setTimeout("nextImg('#" + myId + "', '" + id + "', " + nr + ");", 750);
}
$(document).ready(function() {
$("div.video a").each(function() {
var ytId = $(this).attr('href').replace('http://www.youtube.com/watch?v=', '').replace('http://youtube.com/watch?v=', '');
var img = $(this).append('<img src="http://img.youtube.com/vi/' + ytId + '/1.jpg?rand=' + Math.floor(Math.random() * 11) + '" rel="' + ytId + '" id="' + ytId + '-' + Math.floor(Math.random() * 11) + '" />');
});
$("div.video a img").hover(function() {
nextImg('#' + $(this).attr('id'), $(this).attr('rel'), 1);
}, function() {
resetImg('#' + $(this).attr('id'), $(this).attr('rel'));
});
});
css
.video a img {
border: 1px solid #fff;
width: 150px;
height: 100px;
}
html
<div class="video">
<a href="http://www.youtube.com/watch?v=zlfKdbWwruY"></a>
</div>
<div class="video">
<a href="http://www.youtube.com/watch?v=Z2VoEN1iooE"></a>
</div>
via
animated youtube thumbnails