2012年7月3日

基于html5 input API和css3 颜色渐变的颜色渐变调节器

摘要： 老师课下布置的作业，做的扩展性不错，代码分享如下：<!doctype html><html><head> <title>颜色渐变调节器</title> <meta charset='utf-8' /> <style type="text/css"> #canvas{height:100px;width:980px;border:2px black solid;border-radius:10px;} form{padding:20px;} form div{padding:1 阅读全文

posted @ 2012-07-03 14:28 shawn.xie 阅读(3981) 评论(0) 推荐(0)

面向对象编程方法实现一群圆环的随机运动

摘要： 首先说明qq截图效果太丑了，实际效果要比这个漂亮。本例是实现了100个随机颜色随机大小的圆环以随机速度向随机方向移动并碰壁反弹。然后推荐以下两个博客，一篇是canvas动画面向对象实现方法的基本思路，一篇是松峰老师翻译的基于canvas开发简单游戏框架的教程http://neekey.net/blog/2011/05/11/canvas-%E7%AE%80%E5%8D%95%E5%8A%A8%E7%94%BB%E5%AE%9E%E7%8E%B0%E6%80%9D%E8%B7%AF/http://www.cn-cuckoo.com/2011/08/10/game-development-with 阅读全文

posted @ 2012-07-03 14:14 shawn.xie 阅读(1052) 评论(0) 推荐(0)

柔软的canvas时钟

摘要： 本例是一个基于canvas的时钟，鼠标滑过的时候会有类似果冻的抖动效果！代码如下：<!doctype html><html><head><meta charset="utf-8"/><title>柔软的canvas时钟</title><style> #myCanvas{margin:50px auto;display:block;}</style></head><body><canvas id="myCanvas" width=& 阅读全文

posted @ 2012-07-03 14:12 shawn.xie 阅读(1219) 评论(0) 推荐(0)

从一段问题程序窥探js定时器原理

摘要： 大家先不要看后面的内容，先看下面这段简短的代码，想象i应该弹出的是多少呢？var t=null;var i=0;function a(){ i++; if(i==20){ return; } t=setTimeout(a,17);}a();alert(i);这就是今天我写效果的时候遇到一个问题，当我设定一个定时器做循环的时候，下面的程序不等我的循环结束就开始运行了。上段程序的答案是"1"。那么为什么程序没等循环完毕就着急地开始运行alert（i）了呢，原因就出在setTimeout的原理上。其实setTimeout和setInterval这两个定时器一旦触发，就是和js程序 阅读全文

posted @ 2012-07-03 14:09 shawn.xie 阅读(1412) 评论(0) 推荐(0)

用hover配合position（纯css）实现网页动态效果

摘要： 如上网页效果用js很容易实现，但用纯css实现此动态功能，意在加深对hover和position定位的理解。与大家分享，欢迎指正。可以看到，这种效果底层是a标签，hover状态中凭空弹出一个解释框，我们称为元素2。那么要想让元素2实现弹出效果而且不影响底层a标签的排布，显然应该用相对定位。因此确立了hover配合position的基本方法。我们以a标签为相对定位的基准，代码如下：cssa{ display:block; height:30px; width:30px; background-color:green; float:left; margin-le... 阅读全文

posted @ 2012-07-03 14:05 shawn.xie 阅读(4929) 评论(2) 推荐(1)

导航

百度流量统计：