资源描述:一款基于jquery实现gif图片暂停播放特效,默认显示一张静态图片,播放Gif动画图时将静态图替换gif动态图片,暂停Gif图时将gif图替换静态图,这样就完成了模拟Gif动画图暂停和播放功能,注意Gif图实际是无法暂停的。
使用方法
!function(a){"use strict";a.fn.gif=function(){var b=a(this).attr("src"),c=a(this).data("gif"),d="img",e=!1;if(void 0!=c){a(this).wrap("<div class='gif-loader'></div>");var f=a(this).parent(),g=a("<a/>",{html:'<span class="fa fa-play fa-5x"></span>'}).appendTo(f);a(f).data("row_parent",this),a(f).on("click",function(b){void 0!=b&&b.preventDefault(),a(this).data("row_parent").swap()}),this.swap=function(){"img"==d?e?this.setState("gif"):this.loadGIF():"gif"==d&&this.setState("img")},this.setState=function(f){d=f,"img"==d?(a(this).attr("src",b),a(g).html('<span class="fa fa-play fa-5x"></span>')):"gif"==d?(e=!0,a(this).attr("src",c),a(g).html('<span class="fa fa-pause fa-5x"></span>')):"loading"==d&&(e=!1,a(g).html('<span class="fa fa-circle-o-notch fa-spin fa-2x"></span>'))},this.loadGIF=function(){this.setState("loading");var b=new Image;b.src=c,a(b).data("row_parent",this),b.onload=function(){a(this).data("row_parent").setState("gif")}}}}}(jQuery);
站长提示:
1. 苦力吧素材官方QQ群:
950875342
2. 平台上所有素材资源,需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题,每次奖励
2K币。
4. PHP源码类素材,如需协助安装调试,或你有二次开发需求,可联系苦力吧客服。
5. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服