我有2张图片,(“1 png”和“1 gif animated”)
我希望每当鼠标在png图像上时,gif就会播放.
我的问题是,当我将鼠标位置设置在png图像上时,gif会播放一次并停止.当我将鼠标移开然后将其移回图像时,它不再播放.
我的CSS代码:
#icon{ float: left; wIDth:50px; height:50px; background: url("images/smal_icon.png") no-repeat scroll 0% 0% transparent;}#icon:hover{float: left;wIDth:50px;height:50px;background: url("images/smal_icon.gif") no-repeat scroll 0% 0% transparent;}
#icon是div
解决方法 默认情况下,您无法控制GIF的循环或动画.浏览器将按原样播放GIF.所以默认情况下,不可能说GIF应该播放多久或多长时间.
有三种解决方案:
1.用数据:image替换img的src,以便内联GIF.每当src改变时,GIF将再次播放.使用内联GIF而不是真实的URL,GIF没有重新下载,因此可以节省时间.有关示例,请参见http://www.websiteoptimization.com/speed/tweak/inline-images/
2.如评论和其他答案中所述,你可以用相同的GIF替换img标签的src但是带有URL的附加内容(比如?someRandomNumber = 1345),这样它就会重新下载GIF并重新播放.缺点是GIF将被重新下载.
3.你使用类似http://slbkbs.org/jsgif/的东西通过AJAX下载GIF,然后使用canvas元素绘制它,并完全控制它…
以上是内存溢出为你收集整理的html css Gif动画全部内容,希望文章能够帮你解决html css Gif动画所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)