图片动画特效（玻璃破碎|百叶窗|溶解|平移|立方

支持img和canvas标签

支持扩展自定义的动画特效

demo: http://ctchen.cn/static/lab/ct_effect/demo.html

引入框架js文件 ct_effect.js

再引入对应的动画特效js文件

img.initEffect({ animate: 'fadeout', // 动画类型 target: 'http://y.gtimg.cn/music/common/upload/t_cm3_photo_publish/1432038769616126350.jpg', // 替换的新图片 audio: 'http://y.gtimg.cn/music/common/upload/ct/broken.mp3' // 音效 }).then(function() { console.log('执行成功') }) 2. 手动触发调用

img.execEffect({ animate: 'fadeout', // 动画类型 target: 'http://y.gtimg.cn/music/common/upload/t_cm3_photo_publish/1432038769616126350.jpg', // 替换的新图片 audio: 'http://y.gtimg.cn/music/common/upload/ct/broken.mp3', // 音效 x: e.offsetX, // x坐标 y: e.offsetY // y坐标 }).then(function() { console.log('执行成功') }) 注册自定义的特效动画

window.addImgEffect("动画名", function(callback){ /* 动画处理函数 */ // 加载的当前图片 this.canvas // 要加载的下一张图片 this.img // 容器节点 this.parentElement // 点击坐标 this.x this.y // img相对页面偏移 this.offset.left this.offset.top // 滑动方向向量 this.direction.x this.direction.y });