随笔分类 -  html5

摘要:jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用。jQuery模拟原生态App上拉刷新下拉加载效果 Loading... Slide 1 Slide 2 ... 阅读全文
posted @ 2015-01-09 14:42 axl234 阅读(909) 评论(0) 推荐(0)
摘要:html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给浏览器装载Flash插件的话 那么音乐视频即是空谈,html5 audio的出现改变了这一格局,因为你可... 阅读全文
posted @ 2014-12-22 14:23 axl234 阅读(503) 评论(0) 推荐(0)
摘要:我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮卡效果。HTML我们只需要在页面中加入canvas标签元素,其他的就看javascript的了。注意... 阅读全文
posted @ 2014-12-16 14:55 axl234 阅读(375) 评论(0) 推荐(0)
摘要:HTML5的video和audio标签是用来在网页中加入视频和音频的标签,在支持html5的浏览器中不需要预先加载Adobe Flash浏览器插件就能轻松快速的播放视频和音频文件。而html5media.js可以在不支持html5的浏览器上使video和audio标签生效。使用html5media.... 阅读全文
posted @ 2014-12-16 11:38 axl234 阅读(378) 评论(0) 推荐(0)
摘要:HTML5 Maker 是一个在线动画制作工具,帮助你使用HTML,CSS 和 JavaScript创建动态,互动的内容。它非常容易使用,同时可以帮你实现非常好的效果。它可以制作跨浏览器的动画内容,如JavaScript和HTML5动画,幻灯片,简报等等。 动画可以很容易地集成到现有的网站,添加一... 阅读全文
posted @ 2014-09-23 15:14 axl234 阅读(391) 评论(0) 推荐(0)
摘要:HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版。这次我们要来看的就是一款基于HTML5 Canvas的网页画板,在这里仅对一些关键性的代码进行记录,大家也可以下载全部源代码研究。... 阅读全文
posted @ 2014-08-15 14:52 axl234 阅读(912) 评论(0) 推荐(0)
摘要:1、效果及功能说明hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏2、实现原理首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历停止所有的效果,从新触发效果就是标题的从左边淡出和背景颜色的变化,当鼠标离开图片后触发一个遍历,停止所有动... 阅读全文
posted @ 2014-08-06 14:27 axl234 阅读(861) 评论(0) 推荐(0)
摘要:我想大家都用过一些APP应用,它们的菜单展示是以侧边栏滑动方式展现,感觉很新鲜,而现在网页设计也是如此,不少网站也效仿这样的方式来设计。使用侧边栏的好处就是可以节约空间,对于一些内容多或者喜欢简约的网站来说可以尝试使用侧边工具栏的方式来展示。OpenPanel以全屏的方式展示面板,Metro风格,看... 阅读全文
posted @ 2014-07-30 15:39 axl234 阅读(1490) 评论(0) 推荐(0)
摘要:随着互联网的流行,移动网站开始急速增加,在2014年手机网站将会出现很多,所以手机网站是必须要学会制作的。手机网站不像桌面平台一样制作,否则会影响显示效果,目前大部分手机网站使用响应式设计技术,而且也很流行。但是新手想实现响应式技术是不容易的,所以我们可以用一些响应式框架或适用于移动设备的jQuer... 阅读全文
posted @ 2014-07-30 15:31 axl234 阅读(379) 评论(0) 推荐(0)
摘要:HTML5页面模板现在国外很多制作新网站直接使用了HTML5代码,当然我们也得跟上,下面是一个常用的HTML5默认模板,就像你用Dreamweaver新建一个HTML文件时的代码,只不过现在这个是HTML5的。这个代码为了兼容IE浏览器,所以加入Google托管的HTML5shiv文件。其次是我们经... 阅读全文
posted @ 2014-07-30 15:26 axl234 阅读(221) 评论(0) 推荐(0)
摘要:Cache Manifest是HTML 5的一种缓存机制,文章作者直接用博客当测试环境,虽然[color=#444444 !important]应用起来非常简单,但效果却出奇的好。缓存后的速度,简直是惊人的快。像Yslow显示,打开一个缓存过的页面,只要0.729秒,比不缓存的差不多快了10倍。 ... 阅读全文
posted @ 2014-07-30 14:42 axl234 阅读(554) 评论(0) 推荐(0)
摘要:在开发移动端 web 或者webapp时,使用百度地图 API 的过程中,经常需要通过手机定位获取当前位置并在地图上居中显示出来,这就需要用到html5的地理定位功能。navigator.geolocation.getCurrentPosition(callback);在获取坐标成功之后会执行回调函... 阅读全文
posted @ 2014-06-24 15:24 axl234 阅读(1289) 评论(0) 推荐(0)
摘要:一直以来,Web 应用程序被局限在一个单线程世界中。这的确限制了开发人员在他们的代码中的作为,因为任何太复杂的东西都存在冻结应用程序 UI 的风险。通过将多线程引入 Web 应用程…在本文中,您将使用最新的 Web 技术开发 Web 应用程序。这里的 大部分代码只是 HTML、JavaScript ... 阅读全文
posted @ 2014-06-18 15:10 axl234 阅读(370) 评论(0) 推荐(0)
摘要:HTML 5 是一项让人振奋的技术,这有着充分的理由。这将会是一次技术突破,因为它可以将桌面应用程序功能带入浏览器中。除了传统浏览器外,对于移动浏览器,其潜力甚至更大。不仅如此,最流行的移动浏览器甚至已经采用并实现了 HTML 5 规范中很多重要部分。在这个由五个部分组成的系列里,您将仔细了解 HT... 阅读全文
posted @ 2014-06-18 14:47 axl234 阅读(361) 评论(0) 推荐(0)
摘要:利用HTML5/CSS3,仅用5步就可以制作便签贴效果的HTML页面,效果图如下:(注:图里的文字纯属杜撰,搞笑目的,如有雷同,纯属巧合,谢谢!)注:该效果可以在Safari, Chrome,Firefox和Opera在看到效果,IE上由于对HTML5的支持不完全,所以看不出效果。第一步:创建基本H... 阅读全文
posted @ 2014-06-18 14:36 axl234 阅读(459) 评论(0) 推荐(0)
摘要:classList属性究竟是干什么的,我们先撇下classList不管。我们考虑这么一个问题,那就是我们如何将拥有多个类名的元素中的其中一个类名删除呢?梦龙较劲脑汁儿终于想到一个实现的方法。将拥有类名li、meng和long,三个类名中的类名meng删除。代码如下 HTML代码view sourc... 阅读全文
posted @ 2014-06-18 14:29 axl234 阅读(290) 评论(0) 推荐(0)
摘要:1.点透Q:元素A上定位另外一个元素B,点击元素B,如果元素A有事件或链接,会触发元素A上的事件或链接,即点透A:在元素B的touchend中增加ev.preventDefault();阻止默认事件即可,请注意:此时元素内容如果过长,其原生滑动也同时阻止elmB.addEventListener('... 阅读全文
posted @ 2014-06-09 15:16 axl234 阅读(358) 评论(0) 推荐(0)
摘要:两种方式实现URLFileReaderhtml5 图片上传预览URL.revokeObjectURL方法Opera不支持,FileReader除IE9及以下不支持,其它浏览器都支持。 阅读全文
posted @ 2014-06-04 11:13 axl234 阅读(226) 评论(0) 推荐(0)