Skip to content

Instantly share code, notes, and snippets.

@lokielse

lokielse/test.html

Created April 21, 2013 05:09
Show Gist options
  • Save lokielse/5428565 to your computer and use it in GitHub Desktop.
Save lokielse/5428565 to your computer and use it in GitHub Desktop.
Download ZIP
点击jpg变gif, click jpg to gif
Raw
test.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<img class="ws_img_click_big" src="http://ww3.sinaimg.cn/thumbnail/95b69a0ejw1e3tklwgwbyg.gif"
data-bigurl="http://ww3.sinaimg.cn/bmiddle/95b69a0ejw1e3tklwgwbyg.gif" width=150/>
<script type="text/javascript">
jQuery(function($) {
$('.ws_img_click_big').click(function() {
var gifurl = $(this).data('bigurl');
var modal = $('<div style="position:fixed;width:100%;height:100%;background:rgba(0,0,0,0.8);top:0;left:0;margin:0;padding:0;"><div style="position:absolute;width:100%;height:100%;top:0;left:0;" class="modal_bg"></div><div class="modal_content"></div></div>');
var img = $('<img src="' + gifurl + '" style="display:block;margin:150px auto"/>');
$('.modal_bg', modal).click(function() {
modal.remove();
});
$('.modal_content', modal).html(img);
$('body').append(modal);
})
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment