HTML5中的像素处理，需要用到getImageData和putImageData两个函数，先用getImageData复制canvas画布中的像素数据，然后对获取的像素数据进行处理，最后再通过putImageData将处理完的数据粘贴到canvas画布。我们不妨把中间处理像素的过程称作像素的批处理，由于像素的复制和粘贴是两个比较费时的过程，为了更高效的对像素进行处理，我们应该在一次批处理过程中尽可能处理更多的像素数据，来减少像素的复制和粘贴这两个操作。 ...
简单做出HTML5翻页效果文字特效之前在网上看到一款比较有新意的HTML5文字特效，文字效果是当鼠标滑过是出现翻开折叠的效果，类似书本翻页。于是我兴致勃勃的点开源码看了一下，发现其实实现也挺简单的，主要利用了CSS3的transform属性，分别对X轴、Y轴、Z轴进行翻转，先看一下效果截图。 看效果图这些文字是不是很有立体的感觉，而这个立体的感觉并不是有投影和阴影来实现的，而是通过翻转。 接下来我们来看一下源码。...
这是一个HTML5折叠菜单，但更像是一个折叠面板，仿苹果手机的passbook应用中的代码例子，请在火狐或chrome下浏览。不知道有没有听说过手机琴菜单，觉得这一个从形式上来说，是挺像的。passbook仿苹果手机的面板合拢折叠效果-html5特效.pocket{ width:300px; height:460px; padding: 10px; overflow: hidden; float: left; border: 1px solid #EDEDED; margin: 4px; border-radius: 8px; box-shadow:0 -5px 30px rgba(0,0,0,0.2) in...
$('swf_K58').innerHTML=AC_FL_RunContent('width', '520', 'height', '390', 'allowNetworking', 'internal', 'allowScriptAccess', 'never', 'src', encodeURI('http://www.tudou.com/v/Hbrr7VJACT8/&resourceId=0_04_05_99/v.swf'), 'quality', 'high', 'bgcolor', '#ffffff', 'wmode', 'transparent', 'allowfullscreen', 'true');课程背景：使用HTML和CSS布局页面，其中有个很重要的特点就是内容与表象相分离，内容指HTML页面...
每年，苹果都会召开一次重大的会议。WWDC(苹果开发者大会)是iOS开发者和OSX开发者学习苹果先进高科技和移动设备与桌面软件新概念的好机会。 每一年的这个时候，他们都会制造出很多新创意，今年，我被一个用简单圆圈和形状制作出来的图标所惊艳，于是我决定用HTML和CSS来实现它。 WWDC 15邀请卡 苹果的图标通常都会使用颜色和形状的叠加，比如iOS 7 Photos图标。今年WWDC邀请函用了下面这货。 它由一些列层叠和半...
HTML5的诞生给web前端界带来了不小轰动，像什么动画旋转、图片滑块、图片轮播等等这些3D特效，也引发了不少朋友想要学习HTML5的好奇心。最近我一直在做canvas动画效果，发现canvas这个东西做动画不是不可以。相对于flash，它太底层。如果有给力的编辑器或者给力的框架的话，它就能发挥出更大的威力。 于是决定自己写一个简单一点的动画框架，以便能更方便地构建出一些动画效果。 我将分几个章节来讲述我这个小动画框架的实现...
网页中的电话号码如何实现一键直呼效果_附示例 问题： 把网站通过手机打开时，希望通过点击电话号码，弹出呼出的菜单。 方法： 使用超链接的tel属性，如下：备注：把网站嵌入到微信中时，可能有一些特殊的安卓手机不能呼出菜单，原因在微信内嵌的QQ浏览器可能有某些设定进行了拦截，通过在跳转该页面的url后面加上#mp.weixin.qq.com来解决，例如： web/about.html改写为web/about.html#mp.weixin.qq.com 以上这篇网页中的电话号码如...
HTML5的最强大之处莫过于对媒体文件的处理，如利用一个简单的vedio标签就可以实现视频播放。类似地,在HTML5中也有对应的处理音频文件的标签，那就是audio标签 HTML5出来这么久了，但是关于它里面的audio标签也就用过那么一次，当然还仅仅只是把这个标签插入到了页面中。这次呢就刚好趁着帮朋友做几个页面，拿这个audio标签来练练手。 首先你需要向页面中插入一个audio标签，注意这里最好不要设置loop='loop',这个属性使用来设置循环...
不知道怎么描述标题，先看截图吧，大致的效果就是一个框输入一位密码。最开始实现的思路是一个小方框就是一个type为password的input，每输入一位自动跳到下一位，删除一位就自动跳到前一位，android上是OK的，很平滑也没有bug，但是ios上会出现键盘频繁调起和关闭，非常影响用户体验。原因估计是每个input会不断的focus和blur，每次focus会调起键盘，blur又会关闭键盘，so....此方案肯定不行了。 PM非要实现这种效果，木有办法~拗不...
html5 touch事件实现页面上下滑动效果【附代码】XML/HTML Code复制内容到剪贴板> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/> title>2014-4-29title> style> * {margin: 0; padding: 0;} #outer{ width:90%; height: 490px; background: #000; margin: auto; overflow: hidden;} #inner{width:80%; height: 20...
好吧，上次说要赶紧的补上几篇文章，结果淡定的失约了。又是近一个月才发一篇，真是让人郁闷。发现最近总是抽不出时间了，基本都是一个项目接一个项目的安排，自己不是在空闲的时候找不到合适的话题，就是在有纠结话题的时候抽不出时间了。所以我决定一段时间内先把自己纠结过的问题先归纳下知识点，等空闲的时候在一个一个深入研究，然后再整理成文章后分享出来。 开始进入正题，提到slider，过去一直都是用css+js来配合实现相关的...
在Web开发中，我们要实现拖放效果，需要借助Javascript。今天让我们使用Html5实现它： 先看html核心代码: 代码如下: 把黄色小方块拖入到红色大方框中 draggable属性是html5新增加的，它有三个值true,false,auto. true是可以拖，false是不可以，auto由用户浏览器是否支持而定。更多请可以参考官方文档. 加上一点儿样式: 代码如下: #drop { width: 300px; height: 200px; background-color: #ff0000; padding: 5px; border: 2...
在做旋转操作之前一定要理解一句话：旋转的是画布的坐标系而不是图形本身，好了，理解了这一句话后，接下来的就很简单了。 首先认识一下画圆的坐标： 代码如下: var cxt=document.getElementById('demo').getContext("2d"); cxt.beginPath(); cxt.arc(100,100,50,Math.PI*0.75,Math.PI*1.75,false);/*绘制一段半圆弧线，圆心坐标是100,100；开始弧度是0.75，结束弧度是1.75，最后一个参数False = 顺时针，true = 逆时针，当然，这...
很多人在测试worker api的时候，总是会出现异常，根本测试不到效果。 在使用worker的时候有个必须注意的地方，就是单纯的文本文件是实现不了worker的，你写的实际代码 必须部署到服务器（tomcat.jBoss等）才能运行worker api。 下面写个简单例子 js代码test.js（worker） 代码如下: function messageHandler(e) { postMessage("worker says: " + e.data + " too"); } addEventListener("message", messageHandler, true); postMess...
worker的js代码img.js 代码如下: onmessage = function(e) { postMessage(filter(e.data)) }; function filter(imgd) { var pix = imgd.pixels.data; var xcord = imgd.x / 1000; var ycord = imgd.y / 1000; for ( var i = 0, n = pix.length; i < n; i += 4) { var grayscale = pix[i] * xcord + pix[i + 1] * .59 + pix[i + 2] * .11; pix[i] = grayscale; // red pix[i + 1] = grayscale; // green pix[i + 2] = grayscale; //...