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 5,249 views

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

阅读全文

16-6-24

多页面网站如何优雅地绑定事件

js/jquery 9,003 views

最近偶尔接过来一些小型网站修改，会看到这种画面 //user.js (function(){ //page1 $('.dom1').click(function(){ //some js code }.mouseover(function(){ //some js code }) &nbs...

多页面网站如何优雅地绑定事件

16-6-24 9,003 views

最近偶尔接过来一些小型网站修改，会看到这种画面 //user.js (function(){ //page1 $('.dom1').click(function(){&nbs...

阅读全文

16-6-12

触屏设备游戏的几种输入控制方式

移动端网页开发 4,819 views

在移动端游戏开发中(app或是网页)，对于输入控制有好几种方式实现： 1.点击事件(onclick,tap) 最常见的方式，且分成两种使用形式：像笨鸟先飞一类不需要判断点击位置的，以及像消消乐一类需要判断点击位置的。 document.getElementById(ele).onclick = function(event){ x=event.clientX; y=event.clientY; //some js code } 2.拖动控制(touchmove) 庄园类或装扮类游戏使用较多，有个缺点是拖动时手指会遮住原物体及目标区域。 document.addEventListener("touchmove", function(event){ x = ev...

触屏设备游戏的几种输入控制方式

16-6-12 4,819 views

在移动端游戏开发中(app或是网页)，对于输入控制有好几种方式实现： 1.点击事件(onclick,tap) 最常见的方式，且分成两种使用形式：像笨鸟先飞一类不需要判断点击位置的，以及像消消乐一类需要判断点击位置...

阅读全文

16-6-11

canvas实现类躲避子弹游戏

HTML5小游戏 4,782 views

类似于是XX就坚持5秒的页游，控制星星躲开球体碰撞。PC端可用键盘上下左右控制，手机端可用重力感应控制。已知的问题是碰撞有点不准确，有功夫的话改用像素检测会好很多。另外在稍低端的手机上会有点卡顿，性能优化是个难题。 demo：http://wx.karlew.com/star/ <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>你能撑过10秒吗</title> <style> html,body{ overflow: h...

canvas实现类躲避子弹游戏

16-6-11 4,782 views

类似于是XX就坚持5秒的页游，控制星星躲开球体碰撞。PC端可用键盘上下左右控制，手机端可用重力感应控制。已知的问题是碰撞有点不准确，有功夫的话改用像素检测会好很多。另外在稍低端的手机上会有点卡顿，性能优...

阅读全文

16-6-04

原生js实现ajax方法

js/jquery 5,395 views

上一篇文章写到原生js取代jquery的一些常用函数：原生js仿jquery一些常用方法，那么，ajax如何实现呢？如下是一个比较完整的ajax() function ajax(){ var ajaxData = { type:arguments[0].type || "GET", url:arguments[0].url || "", async:arguments[0].a...

原生js实现ajax方法

16-6-04 5,395 views

上一篇文章写到原生js取代jquery的一些常用函数：原生js仿jquery一些常用方法，那么，ajax如何实现呢？如下是一个比较完整的ajax() function ajax(){ var ajax...

阅读全文

16-6-03

原生js仿jquery一些常用方法

js/jquery 5,429 views

最近迷上了原生js，能不用jquery等框架的情况都会手写一些js方法，记得刚接触前端的时候为了选择器而使用jquery。。。现在利用扩展原型的方法实现一些jquery函数：显示/隐藏 //hide() Object.prototype.hide = function(){ this.style.display="none"; return this; } //show() Object.prototype.show = function(){ this.style.display...

原生js仿jquery一些常用方法

16-6-03 5,429 views

最近迷上了原生js，能不用jquery等框架的情况都会手写一些js方法，记得刚接触前端的时候为了选择器而使用jquery。。。现在利用扩展原型的方法实现一些jquery函数：显示/隐藏 //hide() Object.pro...

阅读全文

16-5-23

响应式网页的CSS写法

CSS/CSS3样式 7,435 views

目前很多主流的前端框架都有响应式的控件样式，但有时为了响应式而引入框架没太大必要响应式样式对前端新人来说可能不太熟悉，下面写了一个比较简单的响应式例子： CSS: body{ padding: 0; margin: 0; } .title{ display: none; } .container{ background-color: #E9E9EC; text-align: center; margin: 0 auto; font-size: 20px; } /* PC或中大型笔记本设备 desktop */ @media all and (min-width: 1201px) { .title-desktop{ display: block !important; } .container { ...

响应式网页的CSS写法

16-5-23 7,435 views

目前很多主流的前端框架都有响应式的控件样式，但有时为了响应式而引入框架没太大必要响应式样式对前端新人来说可能不太熟悉，下面写了一个比较简单的响应式例子： CSS: body{ padding: 0; margin: 0...

阅读全文

16-5-19

常用HTML5 video属性和事件

HTML5特效,js/jquery 10,737 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 10,737 views

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

阅读全文