<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload = function ()
{var oc = document.getElementById(‘c1‘);var ogc = oc.getContext(‘2d‘);var yimg = new Image();yimg.onload = function (){draw(this);}yimg.src = ‘img/5-5.jpg‘;function draw(obj){oc.width = obj.width;oc.height = obj.height*2;ogc.drawImage(obj,0,0);var oimg = ogc.getImageData(0,0,ob...
这是一款非常有创意的HTML5SVG聊天框拖拽弹性摇摆动画特效。用户可以用鼠标点击或用手滑动聊天框上的指定区域，该区域会以非常有弹性的弹簧效果拉开聊天用户列表。点击一个用户头像后，又以相同的弹性特效切换到聊天界面，并且用户头像会移动到聊天界面的右上角。整个动画弹性十足，效果非常震撼。效果演示：http://www.htmleaf.com/Demo/201506031963.html下载地址：http://www.htmleaf.com/html5/SVG/201506031962.html原文：htt...
水果忍者在线试玩地址：http://www.dcscms.com/game/fruitninja/index.html源代码下载地址：第一部分第二部分第三部分你是我的小羊驼 在线试玩地址：http://www.dcscms.com/game/yangtuo/index.html源代码下载地址：下载地址来自猫星的你 在线试玩地址：http://www.dcscms.com/game/maoxing/index.html源代码下载地址:下载地址2048 在线试玩地址：http://www.dcscms.com/game/2048/index.html源代码下载地址：下载地址奇葩版Flappy...
一、从SOP到CORSSOP就是Same Origin Policy同源策略，指一个域的文档或脚本，不能获取或修改另一个域的文档的属性。也就是Ajax不能跨域访问，我们之前的Web资源访问的根本策略都是建立在SOP上的。它导致很多web开发者很痛苦，后来搞出很多跨域方案，比如JSONP和flash socket。如下图所示：后来出现了CORS-CrossOrigin Resources Sharing，也即跨源资源共享，它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。它是一个...
实例创建一个圆形：var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();浏览器支持Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 arc() 方法。注释：Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。定义和用法arc() 方法创建弧/曲线（用于创建圆或部分圆）。提示：如需通过 arc() 来创建圆，请把起始角设置为 0...
效果：在博客里有另一篇头像裁剪是用actionscript实现的头像裁剪上传，这里拥护html5,用canvas实现下。前两次的右键是为了说明不是用flash做的。如果想要更严谨的，有技术支持的这个东西的话，可以用kissy的http://gallery.kissyui.com/imgcrop/2.0/guide/index.html.原理很简单：裁剪框是用html做的，canvas的作用在于每次移动，变形后根据裁剪框的位置坐标以及大小，绘制图像的部分并缩放，还有绘制裁剪框区域外的灰色区域，优点...
section标签 表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等标签结合起来使用，表示文档结构。例：HTML5中 <section>……</section>HTML4中<div> ……</div>。article标签 表示页面中一块与上下文不相关的独立内容。比如一篇文章。aside标签 表示article标签内容之外的、与article标签内容相关的辅助信息。header标签 表示页面中一个内容区块或整个页面的标题。hgroup标签 表示对整个页面或...
1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie，不受数据大小限制，有更好的弹性以及架构，可以将数据写入到本机的ROM中，还可以在关闭浏览器后再次打开时恢复数据，以减少网络流量。 同时，这个功能算得上是另一个方向的后台“操作记录”，而不占用任何后台资源，减轻设备硬件压力，增加运行流畅性。 在线app支持边使用边下载离线缓存，或者不下载离线缓存；而离线app必须是下...
HTML代码：
<audio id="myaudio" loop="loop" preload="auto" autoplay="autoplay">
<source src="music/纯音乐%20-%20在那遥远的地方%20-%20纯音乐版.mp3" type="audio/ogg" />
<source src="music/纯音乐%20-%20在那遥远的地方%20-%20纯音乐版.mp3" type="audio/mp3" />
</audio>
<img onclick="swap_music()" src="/images/icon_music.png" style="height:...
周二，W3C机构正式对外公布了互联网网页代码新标准HTML5的草案。预计正式版的标准将会在两年以后形成。 HTML可以说是互联网信息组织的一个基石。据悉，这是自从1997年以来对于HTML标准最为重大的一次升级。 之前的标准是HTML4.0。 新版的HTML标准提供了绘制二维图片的接口，此外可以对音频和视频内容进行更多的控制。这一次发布的只是HTML5标准的草案，据悉，最终版的标准将会在2010年制定完成，只有在届时才能够获得更多浏...
引入history.pushState的来龙去脉大家都知道web2.0以来，大家都喜欢使用ajax来请求数据，提高用户体验，但是传统的ajax可以无刷新改变页面内容，但无法改变页面URL，无刷新的改变页面内容而url没有改变导致搜索引擎无法抓取改变的页面内容。为了提高可访问性，大家想了各种方法，比如说改变URL的hash，但是hash的方式不能很好的处理浏览器的前进、后退，为了能够区分不同的hash，浏览器引入了onhashchange事件，但并在所有浏览器都...
之前的一个微信项目已经要结项了，最近整理一下项目中使用较多的canvas画图方面的知识吧，打算写个3,4篇的样子。本篇主要介绍基础操作和弧线画法。 之后再写一下趋势图，直方图，文本图像处理的。 言归正传，canvas元素本身是一个容器元素，提供一块画布，用脚本来实现想要画什么。为了演示使用，我们新增一个空的aspx页。 首先，我们新增一个canvas元素： <canvas id="myConvas" style="display:block; margin:...
获取【下载地址】? ?QQ: 313596790? ?【免费支持更新】A 代码生成器(开发利器);? ? B 阿里巴巴数据库连接池druid;??数据库连接池??阿里巴巴的 druid。Druid在监控、可扩展性、稳定性和性能方面都有明显的优势C 安全权限框架shiro ;??D ehcache 自定义二级缓存;E 微信接口开发（后续会加入Activiti5 工作流 ）免费升级----------------------------------------------------------------------------------------------------------...
HTML5
新增的placeholder属性已经得到现代浏览器的支持，旨在提供简单的API可以为文本输入框设置 描述输入字段预期值的提示信息（hint）。
这是W3C在标准化的过程中对用户体验的更多考虑。但是这一属性在IE却没有得到很好的支持，至少到IE9没有被支持，那么，我们在使用placeholder的时候可以为IE写一个扩展的JS脚本，让IE也支持placeholder。 我们只需在页面loaded后运行一个函数，就能让IE支持placeholder。 1function set...
第21章 Media Queries相关样式该模块中允许添加媒体查询（media query）表达式，用以指定媒体类型，根据媒体类型来选择使用的样式（显示器、便携设备、电视机）使用方法@media 设备类型 and (设备特性) {样式代码}大部分设备特性的指定值接受min/max的前缀，表示大于等于或小于等于的逻辑使用and关键字来指定某种设备类型的某些特性满足某个条件时使用的样式，下列表示设备窗口小于640px时所使用的样式@media screen and (max-widt...
大家在做适合手机浏览器浏览的小页面时，一般的宽度定为多少比较合适