GG资源网

html5 canvas实现图片切换

html5 canvas实现图片切换

如果您是本站会员;我们将为您提供技术支持!!!

 

本篇文章给大家带来的内容是关于html5 canvas如何实现图片切换(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

这几天研究canvas制作动态背景的时候,发现这个东西稍微改改就变成图片切换的功能了,可以代替动态修改img标签的src属性,实现图片定时切换功能。先奉上代码:

代码解释:

1. 参数 containerId是盛放canvas的容器id, pics是图片src的数组,这两个是必须的, {speed = 1000,width = 100,height = 100,callback = function(pic) {} } 这是选填的一堆,看名字就知道是干啥的了,依次是切换速度,canvas的宽高(这里设置了显示的图片也是同样的大小,所以尽可能根据图片的像素大小来设置,这样不会模糊),回调函数是如果点击当前图片会做的事情,参数是当前图片的src地址;

2. 其他的没啥可细说的,代码比较简单,通过添加监听事件,来保证鼠标移入时,停止切换,移出时继续切换,然后点击激活回调函数;

3. 说明一下和img标签src切换版的区别:首先就是不会引起过多的重绘,img的src切换,浏览器会重绘,大家可以自己看一下F12的记录,而用canvas是不会引起重绘;其二,img标签可以设置切换的样式,淡入淡出啥的比较容易,canvas版就比较复杂了,得有canvas功底了。

由于网站搬家,部分链接失效,如无法下载,请联系站长!谢谢支持!
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途!
3. 分享目的仅供大家学习和交流,请不要用于商业用途!
4. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
5. 本站所有资源来源于站长上传和网络,如有侵权请邮件联系站长!
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
9. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
10.如果您购买了某个产品,而我们还没来得及更新,请联系站长或留言催更,谢谢理解 !
GG资源网 » html5 canvas实现图片切换

发表回复

CAPTCHAis initialing...