Html5
文章平均质量分 77
CF西西
热爱Html5,热爱NodeJS,热爱Silverlight,热爱WCF, 热爱Android,热爱.NET,热爱iOS,热爱C# ,热爱我自己。
展开
-
mobile web app 介绍
http://wenku.baidu.com/view/c229920f79563c1ec5da7192.htmlmobile web app 介绍转载 2012-03-20 17:05:16 · 444 阅读 · 0 评论 -
【使用Html5 CfxixiJS制作APP】如何用iscroll制作水平滚动的List布局
效果如下:使用iscroll实现这样的布局可不容易。。。需要前端拥有良好的css功底然后利用js(这里lz用了zeptoJS或者大家可以用jquery)假设我们有这么一段html 1 2 3原创 2012-12-25 01:45:47 · 4870 阅读 · 0 评论 -
用HTML5实现手机摇一摇的功能
原文:http://blog.csdn.net/hfahe/article/details/7516317 在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持。这个特性包括两种事件:1、 deviceOrientation:封装了方向传感器数据的事件,可以获取手机转载 2013-01-21 19:35:15 · 1809 阅读 · 0 评论 -
本地存储替代cookie:qext.LocalStorage
转自:http://www.baidufe.com/item/af0bb5872f2a1ef337ce.html文章写了都一年多了,一直没个合适的地方放,现在终于可以搬上来了。背景先看看各种本地存储的变革:Cookies:浏览器均支持,容量为4KBUserData:仅IE支持,容量为64KBFlash:100K转载 2013-03-14 14:16:23 · 2672 阅读 · 0 评论 -
HTML5 Canvas中实现文字链接
转自:http://blog.csdn.net/yorhomwang/article/details/9625319HTML5中没有关于链接的API,所以我们只有自己来实现了。首先,我们来想一下,链接有什么特点。第一个想到的估计就是它能跳转,这是链接最显著的特点,当然这也是废话,要不怎么能叫链接?第二个想到的可能就是文字下方的下划线;第三可能就是当鼠标盘旋在它上空时,鼠标要变成转载 2013-08-19 17:34:05 · 1239 阅读 · 0 评论 -
如何做H5页面阴影悬浮效果
Html结构: xxx 取消 第一步.设置阴影背景.list { position: absolute; top: 0; left: 0; z-index: 9; background: rgba(0,0,0,0.4); width: 100%;原创 2016-02-25 16:20:23 · 9360 阅读 · 0 评论 -
如何制作浮窗动画(从下向上滑动)
.agreement-shadow .slide-up.in { -webkit-transform: translateY(0); -webkit-animation-name: slideinfrombottom; -webkit-animation-duration: 250ms; transform: translateY(0); animation原创 2016-09-14 14:16:20 · 866 阅读 · 0 评论 -
解决IOS滑动触发Body的滑动
参考:http://stackoverflow.com/questions/8488447/iphone-web-app-stop-body-scrolling解决方法其实很简单,用户上拉时设置滑轮到顶部的位置人为的设置1px滑到底部加载更多的时候也是如此,这样就能不触发body的滑动事件转载 2017-01-13 17:51:10 · 3036 阅读 · 0 评论 -
CSS3中使用transform开发动画效果
假设我们想实现一个向上滑动的效果.slideup.in { -webkit-transform: translateY(0); -webkit-animation-name: slideinfrombottom; -webkit-animation-duration: 250ms; transform: translateY(0); animation-原创 2017-02-23 14:12:19 · 593 阅读 · 0 评论 -
【前端必会】7步教你如何在ps上将PSD图片的小图切下来
转自:http://bbs.cfxixi.com/showtopic-35.aspx首先需要选中你的图层,在右下角图层选择栏中中右击“转换为智能对象”。2.右击对这个图层选择“栅格化”3.按下ctrl+A(全选该图层)4.按下ctrl+C(复制该图层)5.按下ctrl+N(新建一个panel页面)6.按下ctrl+V将你刚才复制的图片保存到新建的pa原创 2017-03-07 17:41:21 · 3070 阅读 · 0 评论 -
使用CSS3滤镜开发模糊背景(毛玻璃)效果
功能说明:在平时的开发中我们时常需要弹出某些对话框,同时希望用户能够忽略背景把注意力集中到弹框上,这时候从用户体验的角度出发,我们可以选择将弹框背景模糊化,用以增强用户的实际体验效果。实现步骤:1、背景div使用两个class:bg和bg-blur。2、bg设置原始背景样式,需写明初始的滤镜blur值 filter:blur(0px)。原创 2017-03-06 17:58:25 · 12028 阅读 · 0 评论 -
react子组件如何向父组件传值
转自:http://blog.csdn.net/qizhiqq/article/details/52384554黑色框为父,绿色框为子,红色框为孙子。父向子孙传值用props;子孙向父传值,要在父设置接收函数和state,同时用props将函数名传入子孙。(总的来说就是给子组件传入父组件的方法,在子组件中调用)var Grandson = React.createC转载 2017-04-11 00:43:43 · 2196 阅读 · 0 评论 -
webSQL 经常使用的几个必要函数
仅供参考:var html5rocks = {};html5rocks.webdb = {};html5rocks.webdb.db = null; //将sqldb存到一个全局变量中openDB();//创建databasefunction openDB(){ var dbSize = 5 * 1024 * 1024; // 5MB htm原创 2012-11-15 12:49:35 · 3688 阅读 · 0 评论 -
phonegap(安卓)如何实现微博认证登录
项目可去我的qq群共享下载:250395324今天看到了一篇讲这么拿腾讯微博accesstoken的文章,发现其实新浪weibo登录的问题已经破解了,得到token之后直接调用api文档中的方法就能调用新浪微博各个api中的方法了。至于怎么做,首先请看一篇文章:http://blog.csdn.net/xiaoguang44/article/details/7784138大原创 2012-07-25 18:31:00 · 4312 阅读 · 0 评论 -
如何解决websql中的异步问题
1.首先websql openDatabase()方法打开数据库的其结果必然以异步方式返回结果,openDatabaseSync()方法可以同步方式打开数据库,但是貌似safari游览器中找不到这样的一个方法。原文:http://stackoverflow.com/questions/4052479/html5-database-api-synchronous-requestTo原创 2012-06-04 01:11:50 · 5542 阅读 · 0 评论 -
使用jquery flip插件的一个简单例子
效果图:(旋转效果)1.首先去网站http://lab.smashup.it/flip/下载插件2.引入到网页3.引入jquery的文件4.在页面载入的时候调用函数 $(document).ready(function(){ $("#mainWrapper").flip({原创 2012-07-04 16:50:00 · 5179 阅读 · 0 评论 -
介绍一个flip(翻书插件)
原文:http://lab.smashup.it/flip/效果如下:例子:github: botelho-flipboard-layout-bcd8f5bHOW TO USE?Like every jquery plugin, just chain it:$("#flipbox").flip({ direction:'tb'})转载 2012-07-04 16:04:35 · 1932 阅读 · 0 评论 -
国外仿照flipboard的一个jquery操作示例
原文:http://tympanus.net/codrops/2012/05/07/experimental-page-layout-inspired-by-flipboard/EXPERIMENTAL PAGE LAYOUT INSPIRED BY FLIPBOARDAn experimental page layout that let's you navigate p转载 2012-07-05 11:06:56 · 2775 阅读 · 2 评论 -
開發 iPhone Web App 的小技巧
原文:http://pro.ctlok.com/2010/06/iphone-web-app.html很久以前開發過給 iPhone 用的網頁,今天無意中看到那些程式碼,順便記錄下來。iPhone 看普通網頁時會將屏幕像素闊度變成 980 像素,如果想將屏幕像素闊度變回原本大小,可以在 head 加入以下設定: name="viewport" content="width=de转载 2012-07-06 11:46:22 · 793 阅读 · 0 评论 -
webkit webApp 开发技术要点总结
原文:http://www.cnblogs.com/pifoo/archive/2011/05/28/webkit-webapp.html如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切。接触 webkit webApp的开发已经有一段时间了,现把一些技巧分享给大家 :1. viewport:也就是可视转载 2012-07-06 11:44:59 · 1063 阅读 · 0 评论 -
11个处理触摸事件和多点触摸的JS库
转自:http://sd.csdn.net/a/20120613/2806600.html?bsh_bid=100091987触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作。要开发支持触摸屏设备的Web应用,我们需要借助浏览器的触摸事件来实现。下图是各种触摸事件说明:本文我们介绍11个用来处理触摸事件以及支持多点触摸的J转载 2012-07-02 14:32:57 · 3838 阅读 · 0 评论 -
Html5写语音输入框
原文:http://blog.sina.com.cn/s/blog_69e767f001012m1g.html 感谢阿赛分享 效果:让你的输入框使用Google云语音输入技术 只需一行代码,你的网站上面输入框(input),直接可以在谷歌浏览器(chrome)上面使用Google的云语音输入技术。 在你的输入框input的HTML属性里面,加入“x-we转载 2012-08-09 15:06:58 · 4822 阅读 · 1 评论 -
WebApp 开发中常用的代码片段
原文:http://xuui.net/librarys/webapps/webapp-development-of-commonly-used-code-snippets.html转载 2012-08-15 20:03:57 · 586 阅读 · 0 评论 -
支持移动平台的Html5播放器
原文:http://wjlgryx.iteye.com/blog/1037405HTML5的新特性里面,有一项很重要:直接支持特定格式的视频播放,而不需要依赖第三方的插件(比如Flash),这在某些Flash还没有涉及的场合(比如移动设备中的iPhone),这个特性将非常有用。(唯一的问题是,不同的浏览器厂商将会坚持自己的HTML5视频标准,在你转换HTML5视频格式的时候,要考虑好所转载 2012-08-22 14:39:25 · 895 阅读 · 0 评论 -
(html4和html5区别)如何在一个input上添加焦点
html4:Username:document.getElementById ('search').focus()html5: Search:原创 2012-09-29 17:10:42 · 4142 阅读 · 0 评论 -
CSS Flexbox 可视化手册
转自:https://medium.com/swlh/css-flexbox-fundamentals-visual-guide-1c467f480dac目录介绍弹性项目弹性容器弹性方向Flex Wrap弹性流项目之间的缝隙排序对齐justify-contentalign-itemsalign-contentalign-self调整 Flexbox 的大小f...翻译 2019-02-14 17:53:47 · 250 阅读 · 0 评论