如何长图转化为gif

一个150x18000px的长图如下

原理:将它一帧一帧向上调,上调的速度过快,可以使观者误以为是一个动图(就像以前一帧一帧的动画片。)

所遇到的问题如下:

 无限循环:在过程中,发现如果不加flag识别有无正在循环,在一次循环未完成鼠标又一次悬浮之上的情况下,将会产生无限循环的效果。因此可以加一个flag,若是循环未完成,则跳过。

移开鼠标后动画在执行完再停止:使用stop()

var movePic = $(".movePic")
				var hit = 0;
				var flag = 0;
				var mflag = 0;
				movePic.hover(function() {
					if (flag == 0){
						flag = 1
						mtimer = setInterval(function() {
							hit++;
							$(".movePic").animate({
								backgroundPositionY:"-=150px",
							},10)
							console.log(hit)
							if (hit == 121){
								clearInterval(mtimer);
								hit=0;
								flag = 0;
							}
					},10)}
				}
				,function() {
					console.log(hit)
					$(".movePic").stop()
				})

(此处有一处bug:鼠标一直悬浮在图片上面将会比鼠标悬浮在上面后在动画未执行完前移开多一帧。)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值