跨文档消息传递跨文档消息传递（cross-document messaging）,有时候简称为XDM，指的是在来自不同域的页面间传递消息。例如，www.wrox.com域中的页面与位于一个内嵌框架中的p2p.wrox.com域中的页面通信。XDM的核心是postMessage()方法。在HTML5规范中，除了XDM部分之外的其他部分也会提到这个方法名，但都是为了同一个目的：向另一个地方传递数据。对于XDM而言，“另一个地方”指的是包含在当前页面中的<iframe>元素，或者由当前页面...
1、canvas基础知识 canvas元素是HTML5中新增的一个重要的元素，专门用来绘制图形，不过canvas本身不具备画图的能力，在页面中放置了canvas元素，就相当于在页面中放置了一块矩形的“画布”，我们可以利用js脚本在“画布”上绘制图形。 1.1canvas元素 在利用canvas绘制图形之前，我们首先需要在页面中放置一个canvas元素，如下代码：<canvas id="mycanvas" width="400" height="400">您的浏览器out了</canvas> 说明：（1）放置canva...
Java下载： http://www.oracle.com/technetwork/java/javase/downloads/index.html 环境变量： JAVA_HOME=C:\Program Files\Java\jdk1.8.0_25 PATH=%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin; CLASSPATH=.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar; 测试：javac安装nodejs node-v0.10.38-x64.msi 下载地址：https://nodejs.org/dist/v0.10.38/x64/安装ANT 解压apache-ant-1.9.5-bin.zip到任意位置（AN...
一、基础 在css中，大多数标签都是默认属性，需要对其进行初始化，比如＊｛padding:0;margin:0;｝在移动端布局时要采用响应式，响应式布局通常有两种方法，一是通过百分比控制，二十使用使用弹性盒子（flex）一、写法，分组和嵌套对于有相同属性的元素，可以使用分组的形式h1{color:#ff9900}h2{color:#ff9900}h3{color:#ff9900}-----------------h1,h2,h3{color:#ff9900}嵌套：p {color:#ff9900;}.demo {font-size:12px;}.demo p ...
注意：1、input后面的冒号不要写错！2、-moz后面是没有input字样，火狐设置字体颜色为#000，但是他不是全黑，好像有个度似的！（个人认为）input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:red; } input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color: red; } input::-moz-placeholder,textarea::-moz-placeholder{color: red; } 原文：http://www.cnblogs.com/knowlege/p/3919017.h...
Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。（要支持ie低版本请下载5.4.3版 ）点击进入官网 下载地址：http://www.jq22.com/jquery-info404也可以使用cdn<link href="//cdn.bootcss.com/video.js/7.0.0-alpha.1/alt/video-js-cdn.css" rel="stylesheet"><script src="//cdn.bootcss.com/video.js/7.0.0-alpha.1/video.min.js"...
上篇文章中提到移动端上传图片，我们知道现在流量还是挺贵的，手机的像素是越来越高，拍个照动不动就是好几M，伤不起。虽然客户端可以轻轻松松实现图片压缩再上传，但是我们的应用还可能在浏览器里面打开，怎么办呢，图片压缩。受以前PC上的开发思维影响，尼玛js哪有权限去操作文件，哪有资格压缩图片啊，搞不了，你们客户端去整吧。只能说自己还是有些井底之蛙了。在HTML5的影响下，前端能干的事情越来越多了，开发的功能逼格也越...
由于属性太多，在这里面建表重新写太麻烦所以复制粘贴了，原内容建立excel表上传服务器。 原文：http://www.cnblogs.com/dabaikai/p/8039147.html
Canvas应用：图片压缩算法实现前端图片压缩应用场景前端页面限制用户只可以上传5MB大小的图片前端在接受到用户上传的图片之后，服务器只允许上传1MB大小的图片，此时需要前端将图片先进行压缩，压缩之后再调用图片上传接口将图片上传第一步：创建input元素，监听input表单域的change事件创建一个input元素，并且设置HTML5新增的type为file监听input元素的change事件，并通过e.target.files拿到用户上传的文件列表数组获取用户上传的...
1、传统输入框<label for="favorite_team">Favorite Team:</label> <input type="text" name="team" id="favorite_team" />2、使用datalist给input增加一个list属性，属性值为datalist的id值。双击input或者输入一个匹配的首字母的时候可以提供选项让用户选择。<label for="favorite_team">Favorite Team:</label> <input type="text" name="team" id="favorite_team" list="team_list" /> <datalist id="team_list"><option>Detro...
1.<map>图像映射 点击图片不同区域<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" /> </map>2.<iframe>inline fram...
目前为止，角色除了基本的移动外还什么都不能做，于是我打算先实现角色的攻击动画。角色的普通攻击一共可以分为三个阶段：一段斩二段斩三段斩触发方式为角色站立时按下J(攻击)键，角色开始攻击，在此期间连续快速敲打J键，可继续触发后续攻击。最终效果如下：(AD移动，K跳跃，J攻击，U冲刺) /*{let loadBatch = {count: 0,total: assetList.length,cb: callback};for (let i = 0; i {onLoadedCallback(img, loadBatch);};img.src ...
前一节我们讲述了怎么在新建的作品中添加元素，元素加好以后我们还想让他们动起来，来实现比较炫的效果。这节我们将要讲述怎么给元素添加动画。Mugeda动画是通过时间轴和帧来实现的。通过在时间轴上创建图层和单元，您可以在几分钟内创建专业动画。 时间轴界面如下图。对于要在移动设备上投放的作品，帧速最好不要超过12，因为帧速太快有些移动设备会比较吃力，设置帧速在属性区。动画图层是用来组织添加对象 每个图层可以包含一...
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>JS文件上传</title><script type="text/javascript" src="../js/jQuery.js"></script><style type="text/css">* {margin: 0;padding: 0;}#img {display: block;width: 9.98rem;height: 6rem;border: .01rem solid black;}#file {display: block;margin: -6rem 0 0 0;opacity: 0;wid...
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>HTML5-页面切换动画</title> 6<link href="animations.css" rel="stylesheet"> 7<script src="modernizr.custom.js"></script> 8<script src="jquery-1.8.0.min.js"></script> 9<style> 10 #viewsWrapper { 11 top:0px; 12 left:0px; 13 width:300px; 14 height:200px; 15 position:relative; 16 overflo...