下面介绍一个自己搞的小时钟，方便拖拽。那么如何插入到自己的界面中呢？只需要加上如下代码就好了：<script type="text/javascript" src="clock.js"> </script> clcok.js的完整代码如下：var extra=document.createElement(p);extra.style.position=absolute;var extra_canvas=document.createElement(canvas);extra_canvas.id="extra_canvas";extra.appendChild(extra_canvas);document.body.appendChild(extra);var flag;var cu...
http://www.gxlcms.com/wiki/1118.html" target="_blank">HTML5实现一个图片滤镜效果的示例代码分享html页面：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><meta name="viewport" content="width = device-width,initial-scale=1.0"> </head> <body> <img src="img/5.jpg" class="photo"> </br> </br> <button class="reset">复位</button> </br> </br> <button class="grayscale">灰度效果...
背景介绍 因为之前用c#的winform中的gdi+，java图形包做过五子棋，所以做这个逻辑思路也就驾轻就熟，然而最近想温故html5的canvas绘图功能（公司一般不用这些），所以做了个五子棋，当然没参考之前的客户端代码，只用使用之前计算输赢判断算法和电脑AI（网络借取）的算法，当然现在html5做的五子棋百度一下非常多，但是自己实现一边总归是好事情，好了废话不多说了进入正题。^_^界面功能介绍与后续可增加功能 目前界面功能： ...
当我编码Elemin Theme（我最近设计的一个响应式的站点）的时候，我遇到的一个跳帧就是，如何能让嵌入式的视频在尺寸变化上变得更加灵活。使用max-width:100% 和height:auto可以让html5的video标签很好的工作，但是这个解决方案不适用于iframe 或者 object标签的内嵌代码。通过几小时的寻找资料和实验，我最终找到了解决办法。当你在进行响应式设计的时候，这一css技巧能派上用场。你可以访问最终demo地址，缩放你的浏览器查看效果。...
现在屏幕分辨率的范围很大，从 320px (iPhone) 到 2560px (大型显示器)，甚至更大。用户也不只是使用台式电脑访问web站点了，他使用手机、笔记本电脑、平板电脑。所以传统的设置网站宽度为固定值，已经不能满足需要了。web设计需要适应这种新要求，页面布局需要能够根据访问设备的不同分辨率自动进行调整。本教程将会向你介绍，如何使用html5和CSS3 Media Queries完成跨浏览器的响应式设计。 第一次运行 在开始之前，我们可以...
在上一讲中，我们的解决方案使用到了jquery去创建一个span标签。在这一讲中我们将用一种更好的解决方式，使用:before 和 :after 伪类。:before经常会用到，他可以用来添加额外的元素。 HTML 下面是一个ul列表代表的图片画廊。<ul class="gallery clip"><li><img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-1.jpg" alt="image"></li><li><img src="http://webdesignerwall.com/wp-content/uploads/...
本节课我们将介绍，如何使用css在不修改图片源的前提下装饰你的图片画廊。这里用到的技巧也很简单，就是在图片之前创建一个<span>，并在span上使用background-image生成一个遮罩的效果。这种方式既简单又灵活，demo中介绍了20多种样式，大家可以参看。 这种css技巧带来的好处节约时间 — 你不需要在photoshop中创建图片模板，然后为每张图片生成独立文件。保留原始图片源 — 我们不用担心日后需要更换图片主题的时候，没有原图片...
分步骤的登录注册表单现在也比较多，主要是能提高用户体验，用户可以有选择性的填写相应的表单信息，不至于让用户看到一堆表单望而却步。今天和大家分享的就是一款基于HTML5和CSS3的分步骤注册登录表单，外观不用说，非常漂亮。你看一下DEMO就知道了。接下来我们要来一起看看实现的过程是怎样的。代码有点复杂，主要由HTML代码、CSS3代码以及Javascript代码组成。HTML代码：<form id="msform"><!-- progressbar --><ul id="progres...
功能说明： 在一分钟内，使用鼠标按着左键，在画布上圈泡泡，其中泡泡的分值分别为10（白）、20（浅蓝）、30（黄）、-10（红）、-20（绿）、-30（深蓝）分，可以一次圈多个泡泡，倒计时结束即计算总分值，该游戏基于cnGameJS。效果预览： 实现分析： 首先每个小球定义一个ball类，由于小球需要使用图片，并且有一定的尺寸和运动，所以使该类继承cnGameJS的sprite类。ball类除了拥有x,y坐标外，还拥有一个z坐标，该坐标用于使小...
功能说明： 游戏中在躲避敌人攻击的同时，需要收集三种不同的钥匙，开启对应的门，最后到达目的地。 该游戏同样基于自己开发的HTML5游戏框架cnGameJS。 推荐用chrome浏览器查看。效果预览： 方向键控制移动，空格键射击，shift键打开门。 实现分析： 在上一篇文章《HTML5实现3D迷宫》中，通过放射线法模拟出3D场景的效果，而本文则在3D效果的基础上，添加更多的游戏元素，构建成一个较完整的第一人称射击游戏。...
功能描述： 结合A*算法和http://www.gxlcms.com/wiki/1118.html" target="_blank">HTML5完成的一个寻路demo。 鼠标点击地图任意位置，飞鸟会寻找最短路程到达该位置。效果预览： 代码分析： 具体说说里面提到过的“穿越拐角规则”的实现： 所谓的“穿越拐角规则”，就是如下图中所出现的情况：假设绿色是障碍物，当右边的红色格子想到达上面的黄色方格，并不允许直接由红色方格跳到黄色方格，而需要经过蓝色方格...
功能描述： 该游戏实质上是坦克大战+推箱子。玩家控制坦克，在与敌人战斗的同时把物资顺利运送到目的地则可顺利过关，共三个关卡。游戏说明：上下左右方向键控制移动，空格键发射炮弹，推动所有物资箱子（）到目的地（），则可过关。 代码分析： 由于该游戏分了几个关卡，所以这里首先来看看关卡管理器是如果管理各个关卡的：/* 关卡管理器 */ var LevelManager=(function(){var optionsObj={};//所有关卡参数对象retu...
未来使用H5的场景会越来越多，这是令web开发者欢欣鼓舞的事情。然而有一个现实我们不得不看清，那就是IE系列浏览器还占有一大部分市场份额，以IE8、9为主，windows8.1的用户已经用上了IE10/11，而考虑我国的国情，IE6、7依然存留不少。在我们放手用HTML5开发的时候，新特性支持度检测就是必不可少的了。一种方式是用navigator.userAgent或navigator.appName来检测浏览器类型和版本，不过这种方式不是很可靠，浏览器对于一些新特性也...
用canvas绘制了一个钟表，废话不多说了，直接上代码吧。效果图如下：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas钟表</title> <meta name="Keywords" content=""> <meta name="author" content="@my_programmer"> <style type="text/css"> body{margin:0;} </style> </head> <body onload="run()"> <canvas id="canvas" width=400 height=400 style="border: 1px #ccc solid;">如果你看到这段文字，说明你...
大风起兮云飞扬，安得猛士兮走四方!html5+css3，不学不行。 做web开发已经有好几年了，见证了太多语言的崛起和陨落。 其实作为一个程序员最苦逼的事情莫过于每天要不停的追赶各大公司新出的框架和语言(这首当其冲的就是.net程序员，当然很不幸，我就是.net成员，这刚把mvc 4.0整明白现在5.0又出来了。) 当然，抱怨解决不了任何问题，抱怨也无法让你的钱包鼓起来。so, 程序猿们，继续学习吧。 html5+css3时代， 简称3+5时代(3+5...