此篇文章主要实现两个功能：1、点击屏幕下方签到悬浮按钮；2、弹出幸运大转盘，转盘抽奖签到鉴于初入前端之路，方法有限，仅供参考。在网上找了很多移动端拖拽的js实现方式，大部分都是这一种，html5的touch事件，但是没找到点击按钮可以向两边贴边的拖拽，所以汇总网上查阅到的相关资料自己稍微修改了一点。代码如下：$(function(){//签到按钮拖拽 //首先，设置cookie值，使到不同的页面刷新拖拽的按钮位置不会变 function setCoo...
本篇主要讲html5 canvas中剪切区域（clip region）、分层、合成(compositing)、变换(Transformation)（旋转、缩放）功能如何应用。先贴一个以下所有涉及到的实现运行的基本代码段： Base Code<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="modernizr-latest.js"></script> <script type="text/javascript"> window.addEventListener("load", eventWindowLoa...
本篇主要讲，html5 canvas中图形的填充（filling）功能应用，主要包括基本颜色定义（Basic Colors）、渐变（Gradient）、图案（Pattern）、阴影（Shadow）；先贴一个以下所有涉及到的实现运行的基本代码段： Base Code<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="modernizr-latest.js"></script> <script type="text/javascript"> window.addEventListener("load", eventWindowL...
先来介绍下 media，确切的说应该是 CSS media queries（CSS http://www.gxlcms.com/css/css-rwd-mediaqueries.html" target="_blank">媒体查询），媒体查询包含了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体属性来限制样式表范围的表达式。CSS3 加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。 那么该怎么定义 media 呢，看下面的代码，你肯定能猜出个大概。<!-- link元素中的CSS媒体查询 --> <li...
font</a>-family: comic sans ms,sans-ser<a href=">html5 canvas中支持对text文本进行渲染;直接的理解就是把text绘制在画布上，并像图形一样处理它（可以加shadow、gradient、pattern、color fill等等）；既然它的本质是文字，就会具有文字所特有的一些属性；本篇的侧重点也在于此；不过，在最后会增加一些图形填充效果在text上应用的实例；context.font:[font style] [font weight] [font size] [font face]字体属性的设置与css中...
http://www.gxlcms.com/wiki/1118.html" target="_blank">html5 Canvas 介绍canvas的基本属性与方法：width,height,getContext()等；通过width与height来获取和设置当前canvas的宽度、高度；通过getContext()方法来获取当前画布的绘图环境（context）；context=canvas.getContext("2d");context包含了我们需要的，在canvas上绘图的所有方法及属性；context的笛卡尔坐标系统中，canvas的左上角为原点；从原点往右为X轴的正向，往下为...
只有对基础二维图形的绘画（drawing）、着色(coloring)、变换（transforming）有较强基础，才能更加有效的利用Canvas；下面，我就简单了解一下，canvas是如何绘画基本shape的（矩形、直线、圆弧、贝赛尔曲线）等； 先贴一个以下所有涉及到的实现运行的基本代码段：Base code<!DOCTYPE html> <html><head><meta charset="utf-8" /><script type="text/javascript" src="modernizr-latest.js"></script><script type="text/javascrip...
for</a>m: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;"> html5 文件拖拽上传是个老话题了，网上有很多例子，我一开始的代码也是网上找来改的，只是踩了几个坑之后就想把过程记录下来。 功能实现下面主要介绍从...
断点http://www.gxlcms.com/php/php-tp-uploads.html" target="_blank">上传，java里面比较靠谱一点的，一般都会选用Flex。我承认，Flex只是摸了一下，不精通。HTML 5 有个Blob对象（File对象继承它），这个对象有个方法slice方法，可以对一个文件进行分片。，再加上HTML 5的File API和WebStorage。做了一个段断点续传的demo。 代码比较挫，把一个文件分成一个个小片之后，每一次上传都会将已经上传的字节数放到LocalStorag...
简介 毫无疑问，我们已经目睹了HTML5背后的那场伟大的Web开发革命。经过那么多年HTML4的统治，一场全新的运动即将完全改变现在的Web世界。正是他释放出来的现代化气息和丰富的用户体验，让它很快地成为了一个独特的插件运行在类似Flash和Silverlight的框架之上。如果你是一个非常年轻的开发者，也许你是刚刚在开始学习HTML5，所以可能你并没有注意到他有太大的变化。在任何时候，我希望这篇文章能够帮助到你，当然，也希望像我一样...
歌曲播放我们会发现他的兼容性不是很好，譬如IE上能播放的flash播放器，再firfox或者chrome上就不是很好的应用了，因为有插件的阻碍!HTML5的出现让这一切成为了可能，但是播放器虽然播放了，我们还要关注一下用户的体验度，所以，我们就写了一个HTML兼容的播放器！向下兼容IE6-9、chrome、firfox、opera等主流播放器，应该是全兼容！实现原理代码给大家奉上！001 <!doctype html> 002 <html> 003 <head> 004 <meta charset=utf-8> ...
之前在拓扑上的应用都是些http://www.gxlcms.com/wiki/188.html" target="_blank">静态的图元，今天我们将在拓扑上设计一个会动的图元——叶轮旋转。先看看最后我们实现的效果：我们先来看下这个叶轮模型长什么样 从模型上看，这个叶轮模型有三个叶片，每一个叶片都是不规则图形，显然无法用上我们HT for Web的基础图形来拼接，那么我们该怎么做呢？很简单，在HT for Web中提供了自定义图形的方案，我们可以通过自定义图形来绘制像...
下面介绍一个自己搞的小时钟，方便拖拽。那么如何插入到自己的界面中呢？只需要加上如下代码就好了：<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">灰度效果...
功能说明： 基于HTML5的超级玛丽游戏的demo，方向键左右控制移动，方向键上控制跳跃，该游戏基于本人开发的HTML5游戏框架cnGameJS。 请用最新版本浏览器查看。效果展示： 代码实现： 该游戏demo主要包含的元素有：资源加载，外部输入，碰撞检测，动画，游戏循环以及场景，我将一步步进行分析讲解。 1.资源加载： 我们首先要有一个游戏对象，代表一个关卡。该对象有如下三个方法：initialize，update和draw。它们...