16-9-04

canvas模拟核外电子运动

编写过程最头痛就是椭圆公式的处理，数学忘得差不多，补起来累。。。思路就不话篇幅写了，源代码挺短，关键部分都有注释，有兴趣看看便是。直接上效果：带全轨迹演示：http://wx.karlew.com/canvas/atom/fullTrack.html 带部分轨迹演示：http://wx.karlew.com/canvas/atom/ 带部分轨迹，轨迹有粗细变化（在手机上看会挺卡）演示：http://wx.karlew.com/canvas/atom/specialTrack.html 源码：https://github.com/karlew/canvas/tree/master/atom

canvas模拟核外电子运动

16-9-04 4,793 views

编写过程最头痛就是椭圆公式的处理，数学忘得差不多，补起来累。。。思路就不话篇幅写了，源代码挺短，关键部分都有注释，有兴趣看看便是。直接上效果：带全轨迹演示：http://wx.karlew.com/canvas/a...

阅读全文

16-5-19

常用HTML5 video属性和事件

HTML5特效,js/jquery 9,375 views

在网页开发中，有时需要监测插入视频是否播放结束，从而触发相应事件，可使用ended，通过以下代码实现： var myVid = document.getElementById("video"); myVid.addEventListener("ended", function(){ //播放完成后触发事件 }, false) 监测视频是否加载完成，可使用loadedmetadata，如： myVid.addEventListener("loadedmetadata", function() { //加载完成后执行代码 } ); 监测视频播放进度变化，可使用ontimeupdate，如： myVid.addEventListener("timeupdate", function() { //进度...

常用HTML5 video属性和事件

16-5-19 9,375 views

在网页开发中，有时需要监测插入视频是否播放结束，从而触发相应事件，可使用ended，通过以下代码实现： var myVid = document.getElementById("video"); myVid.addEventListener("ended", function(){ //...

阅读全文

16-1-29

canvas模拟礼花爆炸效果

HTML5特效 7,952 views

鼠标点击后，彩色的放烟花效果。通过创建对象的方法实现，对象比较多，所以手机上看会挺卡。 demo：http://wx.karlew.com/canvas/boom/ <html> <head> <title>鼠标点击礼花爆炸效果</title> </head> <body style="background-color:#000;overflow:hidden"> <canvas id='canvas'>您的浏览器不支持canvas</canvas> </body> </html> <scrip...

canvas模拟礼花爆炸效果

16-1-29 7,952 views

鼠标点击后，彩色的放烟花效果。通过创建对象的方法实现，对象比较多，所以手机上看会挺卡。 demo：http://wx.karlew.com/canvas/boom/ <html> <head> <title>鼠标...

阅读全文

15-12-23

canvas雪花飘落效果

HTML5特效 6,195 views

圣诞将至，在网站的首页加入雪花飘落效果是不错的，下面发一个canvas实现的雪花飘落代码：演示地址：http://wx.karlew.com/canvas/snow/ html： <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0">&n...

canvas雪花飘落效果

15-12-23 6,195 views

圣诞将至，在网站的首页加入雪花飘落效果是不错的，下面发一个canvas实现的雪花飘落代码：演示地址：http://wx.karlew.com/canvas/snow/ html： <html> <head> &n...

阅读全文