Download
1 / 47
470 likes | 908 Views
HTML5. 用. 应. 分. 享. HTML5 在 YuanOS & 猎豹 浏览器中的 应用. 猎豹浏览器 万振. HTML5 是什么？. HTML5 有哪些特性？. 当然，今天我不 打算回答这两个问题. 由于普通话不够标准， 加上 HTML5 的 发音真的很拗口 所以，我 用 H5 来表示 HTML5. H5 ≈ HTML5. H5 在 YuanOS 中的应用. YuanOS 是一款 WebOS. 没有 人谈论 H5 的时候 ，我们就开始了探索之旅 起初 ， AJAX 带来的变革让我们欣喜若狂
E N D
HTML5 用 应 分 享 HTML5在YuanOS & 猎豹浏览器中的应用 猎豹浏览器 万振
由于普通话不够标准，加上HTML5的发音真的很拗口由于普通话不够标准，加上HTML5的发音真的很拗口 所以，我用H5来表示HTML5 H5≈HTML5
YuanOS是一款WebOS • 没有人谈论H5的时候，我们就开始了探索之旅 • 起初，AJAX带来的变革让我们欣喜若狂 • 它刺激我们用极其复杂的方式来实现WebApp
png阴影 • Flash上传 • Flash本地存储 • SVG • ……
多数H5特性均应用于YuanOS 最记忆深刻的 -- H5的原生拖拽
可拖拽的元素 <div id=“dra" draggable="true"></div> 能够被拖拽的元素一定要设置属性：draggable=”true” 然后将'dragstart'事件绑定到draggable元素上
目标区域droppable 对于所有的droppable区域我们绑定这些事件：'dragover','dragleave'和'drop' 可以将整个body作为droppable区域， droppable区域可以接受来自任何地方的拖拽数据，包括其他浏览器或者本地。
“drop” vardt = ev.originalEvent.dataTransfer; var texts = dt.getData('Text');
通过拖拽--设置背景 (演示)
2. 通过拖拽--保存网址和内容 (演示)
3. 一个综合的案例 (演示)
varsourcei = $('<imgsrc="' + most_photo + '">'); var source = $('<canvas />'); var b = p_Width / p_width; var W = Math.round(b * width); var H = Math.round(b * height); source.attr({ width: W, height: H }); var source2D = source[0].getContext("2d"); source2D.drawImage(sourcei[0], Math.round(p_left * b * -1), Math.round(p_top * b * -1), W, H, 0, 0, W, H); var T = gettop(json, i); ctx.drawImage(source[0], Math.round(left * B), Math.round(T * B), Math.round(width * B), Math.round(height * B)) ctx.drawImage(imgs, 0, 0);
H5让WebOS越来越具备可操作性，取代桌面或者说成为桌面以外的一种重要选择。H5让WebOS越来越具备可操作性，取代桌面或者说成为桌面以外的一种重要选择。 指日可待！
NewTab是？ 在创建一个新的标签页时，取代浏览器默认主页的，带有网站缩略图导航的页面
通过CSS3属性Transform实现重力感应以及翻页特效通过CSS3属性Transform实现重力感应以及翻页特效
-webkit-transform: rotateX(-0.75deg) rotateY(0.94230723deg); -webkit-transform-origin: 50% 50%;
varLocalStorage = window.localStorage; LocalStorage.setItem(name, value);
