下拉菜单是一个很常见的效果，在网站设计中被广泛使用。通过使用下拉菜单，设计者不仅可以在网站设计中营造出色的视觉吸引力，但也可以为网站提供了一个有效的导航方案。使用 HTML5 和 CSS3 可以更容易创造视觉上充满吸引力的下拉菜单。A Flash Blue Menu在线演示源码下载Fancy Rolling Navigatio在线演示源码下载Sweet tabbed navigation using CSS3在线演示源码下载jQuery style menu with CSS3在线演示源码下载Fun Animated Na...
最近看过几个基于HTML5开发的移动一样，已经越来越流畅了，相信随着职能手机的配置越来越高性能越来越好，HTML5技术的使用在移动端应用的会越来越普及，应用越来越广泛，因此作为移动开发者，掌握这门技术自然有着强烈的紧迫感。今天就写一个小小的登录页面的demo，巩固最近的学习，也给有兴趣的朋友学习HTML5技术做个参考。 在这里您可以下载到我最后实现的登录页面的demo源码，地址: http://pan.baidu.com/s/1kU1I50b 。准备工作...
给大家带来的是HTML5仿手机微信聊天界面，截图效果如下：源代码如下： XML/HTML Code复制内容到剪贴板> <html> <head> <meta charset="UTF-8"> <title>HTML5模拟微信聊天界面</title> <style> /**重置标签默认样式*/ * { margin: 0; padding: 0; list-style: none; font-family: 微软雅黑 } #container ...
水平对齐textAlignJavaScript Code复制内容到剪贴板context.textAlign="center|end|left|right|start"; 其中各值及意义如下表。 值描述start默认。文本在指定的位置开始。end文本在指定的位置结束。center文本的中心被放置在指定的位置。left文本左对齐，right文本右对齐。我们通过一个例子来直观的感受一下。JavaScript Code复制内容到剪贴板"zh"> "UTF-8"> textAlign body { background:...
使用Canvas绘制图像的时候，我们经常会想要只保留图像的一部分，这是我们可以使用canvas API再带的图像裁剪功能来实现这一想法。Canvas API的图像裁剪功能是指，在画布内使用路径，只绘制该路径内所包含区域的图像，不会只路径外的图像。这有点像Flash中的图层遮罩。 使用图形上下文的不带参数的clip()方法来实现Canvas的图像裁剪功能。该方法使用路径来对Canvas话不设置一个裁剪区域。因此，必须先创建好路径。创建完整后，调用cl...
drawImage()是一个很关键的方法，它可以引入图像、画布、视频，并对其进行缩放或裁剪。 一共有三种表现形式： 语法 1JavaScript Code复制内容到剪贴板context.drawImage(img,dx,dy); 语法 2JavaScript Code复制内容到剪贴板context.drawImage(img,dx,dy,dw,dw); 语法 3JavaScript Code复制内容到剪贴板context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh); 来看一下坐标草图： PS: 不要在样式中定义 的宽和高，否则，里面所画的...
为什么需要HTML5的桌面通知 传统的桌面通知可以写一个div放到页面右下角自动弹出来，并通过轮询等等其他方式去获取消息并推送给用户。这种方式有个弊端就是：当我在使用京东 进行购物的时候，我是不知道人人网有消息推送过来给我的，而必须要等我把当前页面切到人人网才知道有消息推送了。这种方式的消息推送它是基于页面存活的， 但是我们需要这么一种策略：无论你在看哪个页面，只要有消息都应该能推送给我看到，这就是webkitNot...
1、在html中设置链接 代码如下:href=”[scheme]://[host]/[path]?[query]” scheme可以自己在app内部设置成任意的，把android和ios的设置成一样的 2、若本地应用存在，直接打开app；若不存在，计时一段时间跳到appstore 需要判断ios还是android平台下的浏览器，需要判断微信浏览器 XML/HTML Code复制内容到剪贴板code class="hljs" javascript="">var openApp = function () { var btnOpenApp = document.getElementById(open-...
HTML5还增加了一些纯语义性的块级元素： aside figure dialog 我在文章和书中一直使用前两个元素。第三个元素我不经常用，它主要用于书面文本。aside aside元素代表说明、提示、边栏、引用、附加注释等，也就是叙述主线之外的内容。例如，在developerWorks文章中，常常会看到用表格形式编写的边栏，见代码3用HTML4编写的developerWorks边栏。<tdwidth="10"><imgalt=""src="https://img.gxlcms.com///www.ibm.com/i/...
上篇文章中提到移动端上传图片，我们知道现在流量还是挺贵的，手机的像素是越来越高，拍个照动不动就是好几M，伤不起。虽然客户端可以轻轻松松实现图片压缩再上传，但是我们的应用还可能在浏览器里面打开，怎么办呢，图片压缩。受以前PC上的开发思维影响，尼玛js哪有权限去操作文件，哪有资格压缩图片啊，搞不了，你们客户端去整吧。只能说自己还是有些井底之蛙了。在HTML5的影响下，前端能干的事情越来越多了，开发的功能逼格也越...
看到网上很多展示html5雪花飞动的效果，确实非常引人入胜，我相信大家也跟我一样看着心动的同时，也很好奇，想研究下代码如何实现；虽然很多地方也能下载这些源码，不过也不知道别人制作此类动画时的思路及难点分析。 我这几天刚好学习了一下，也趁着此刻有时间从需求分析、知识点、程序编写一步步给大家解剖下，要是在各位关公面前耍大刀了，可别见笑哟。 最终效果图如下：图1 一、需求分析 1、圆形雪花 本示例中雪花形状使用圆形...
由于缺少结构，即使是形式良好的 HTML 页面也比较难以处理。必须分析标题的级别，才能看出各个部分的划分方式。边栏、页脚、页眉、导航条、主内容区和各篇文章都由通用的 div 元素来表示。HTML 5 添加了一些新元素，专门用来标识这些常见的结构： · section：这可以是书中的一章或一节，实际上可以是在 HTML 4 中有自己的标题的任何东西 · header：页面上显示的页眉；与 head 元素不一样 · footer：页脚...
在做h5移动页面，相信大家一定碰到过页面已经打开，但是里面的图片还未加载出来的情况，这种问题虽然不影响页面的功能，但是不利于用户体验。抛开网速的原因，解决这个问题有多方面的思路：最基本的，要从http请求合并，缓存管理，图片压缩等方面做性能优化；另外就是可以对页面里用到的所有图片做预加载的处理，当用户打开页面的时候不立即显示第一屏，而是先显示资源加载效果，等到加载完毕，再来显示页面的主内容，这样就能解决...
由于同源策略的限制，Javascript存在跨域通信的问题，典型的跨域问题有iframe与父级的通信等。 常规的几种解决方法： (1) document.domain+iframe；(2) 动态创建script； (3) iframe+location.hash； (4) flash。 这里不细说这几种方法，记录的是HTML5的window.postMessage。postMessage兼容IE8+、Firefox、Opera、Safari、Chrome。 需要两个异域的服务器来做测试，当然也可以用本地和线上服务器作为两个异域的服务器。假如使用pho...
网页中的电话号码如何实现一键直呼效果_附示例 问题： 把网站通过手机打开时，希望通过点击电话号码，弹出呼出的菜单。 方法： 使用超链接的tel属性，如下：备注：把网站嵌入到微信中时，可能有一些特殊的安卓手机不能呼出菜单，原因在微信内嵌的QQ浏览器可能有某些设定进行了拦截，通过在跳转该页面的url后面加上#mp.weixin.qq.com来解决，例如： web/about.html改写为web/about.html#mp.weixin.qq.com 以上这篇网页中的电话号码如...