控制gif图片的单次播放

业务需求:实现用鼠标触发gif图片的单次播放,播放后停留在gif的最后一帧上面,目的是为了招商引资,打广告,赚运行的服务器费用。

一、问题

正常gif图片在浏览器中不加任何控制的话,会在页面加载完成后,自动播放,不受控制。

二、解放方案

1、将每个gif图片的第一帧图像保存起来,作为浏览器加载完成后的显示图片,事先让UI设计师设计每个gif图片时,故意保留了第一帧的图片,所以直接通过 <img> 标签就可以实现。
<img src="img/test.jpg" id="test">

2、通过 JavaScript 获取鼠标移动到GIF上时的当前 <img> 标签的对象,通过 getElementById() 方法即可获取到指定ID的第一个对象的引用。然后通过替换 <img> 的src的路径即可完成。
var test= document.getElementById('test');
var flag= true;
test.onmouseover = function () {
if(flag== true){
test.src = 'imgs/test.gif';
}
flag= false;
}

这里写图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值