javascript - How to capture animated GIF and show still image? -
is there way capture animated image , make still image(png/jpeg)?
i want capture below animated image in order show still image of it. so, can add play button toggle gif image , still image.
html:
<div class="image_wrapper"> <img class="animated_gif" src="http://i.imgur.com/zy4nd.gif" /> <img class="still_img" src="" /> </div> <a href="#" class="play_btn">play/pause</a>
css:
.image_wrapper{ border-top-left-radius: 4px; border-top-right-radius: 4px; background: #ddd; width: 150px; height: 150px; padding:10px; } .animated_gif{ width:100%; height:150px; display:none; } .play_btn{ background:#2fb82b; padding:5px; text-decoration:none; color:white; font-weight:bold; border-radius:4px; margin: 42px; position:relative; top:10px; } .play_btn:hover{ background:#4dd849; }
try demo
$('.play_btn').on('click', function() { $('img').toggle(); })
Comments
Post a Comment