这是一个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...
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; //...
HTML5 Canvas动画效果演示 主要思想： 首先要准备一张有连续帧的图片，然后利用HTML5 Canvas的draw方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。 关键技术点： JavaScript 函数setTimeout()有两个参数，第一个是参数可以传递一个JavaScript方法， 另外一个参数代表间隔时间，单位为毫秒数。代码示例： setTimeout( update, 1000/30); Canvas的API-drawImage()方法，需要指定全部9个参数： ctx.drawImage(myImage,...
详细解释HTML5 Canvas中渐进填充的参数设置与使用，Canvas中透明度的设置与使用，结合渐进填充与透明度支持，实现图像的Mask效果。 一：渐进填充(Gradient Fill) Canvas支持两种渐进填充方式，一种为线性渐进填充(Line Gradient Fill)，另外一种称 为经向渐变填充(RadialGradient Fill)。其API分别为： createLinearGradient(x1, y1, x2, y2); 其中x1,y1为第一个点坐标，x2,y2为第二个点坐标。 createRadialGradient(x1, y1, r1, x...
徐家破镜昏如雾。半面人间露。等闲相约是看灯。谁料人间天上、似流星。朱门帘影深深雨。憔悴新人舞。天涯海角赏新晴。惟有桥边卖镜、是闲行。 ——宋·刘辰翁·《虞美人》 流星出现的时候，人们都喜欢对着它们许愿，因为传说对着流星许下愿望后，愿望就能实现。不过流星很少见，至少我没有见到过，因此从来没有对着它许愿。最近出于兴趣，制作一个拖尾效果，后来想到可以通过拖尾效果来实现一下流星雨的效果...
代码如下: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> /*#text { text-shadow:2px 2px 0px orange; } #text1 { text-shadow:2px 2px 5px orange; } #text2 { text-shadow:2px 2px 5px orange,-2px 2px 5px green; } /*]]>*/ 没有模糊效果 有模糊效果 阴影叠加