使用gifplayer操作gif的方法

时间：2024-03-01 16:22:32

使用的工具——gifplayer

基本用法：

1.安装
git clone https://github.com/rubentd/gifplayer.git
2.添加一张gif预览的图片

    <img class="gifplayer" src="images/loud.png"/>

3.在预览图片的目录下增加一个文件名相同的gif文件

4.引入jquery.js ,从下载的包中找到目录gifplayer/dist/目录下引入jquery.gifplayer.js文件

使用下面JS脚本来对gifplayer进行控制


$(function(){
//第一步，先初始化gifplayer
var gifplayer = $(\'.gifplayer\').gifplayer({
	label:"",//把label置空，不然会出现gif字样
});
//使用下面代码播放gif
gifplayer.gifplayer("play");
//使用下面代码停止gif
gifplayer.gifplayer("stop");
})

你可以点击查看demo

完成的html代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>gif test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style type="text/css">
        
        body{
            margin:0;
            padding:0;
        }
    </style>
    <!-- <link rel="stylesheet" href="css/gifplayer.css"> -->
</head>

<body>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.gifplayer.js"></script>
    
    <img class="gifplayer"  src="images/loud.png"/>
    <button class="control">播放</button>
    <script>
        $(function(){
            var gifplayer = $(\'.gifplayer\').gifplayer({
                label:"",
            });
            var played = false;
            $(\'.control\').on(\'click\',function(){
                if(!played){
                    gifplayer.gifplayer("play");
                    played = true;
                }else{
                    gifplayer.gifplayer("stop");
                    played = false;
                }
            });
            
        })
    </script>

</body>

</html>

相关文章