<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<title>Hello H5+</title>
<script type="text/javascript" charset="utf-8">
var ws = null,
wp = null,
wo = null;
// H5 plus事件處理
function plusReady() {
ws = plus.webview.currentWebview();
wo = ws.opener();
wp = plus.webview.create('webview_new.html', 'webview_new.html', {
scrollIndicator: 'none',
scalable: false,
popGesture: 'none'
}, {
preate: true
});
wp.addEventListener('close', function () {
wp = null;
}, false);
}
if (window.plus) {
plusReady();
} else {
document.addEventListener('plusready', plusReady, false);
}
// 動畫窗口
function animateWindow(type) {
wp || (wp = plus.webview.create('webview_new.html', 'webview_new.html', {
scrollIndicator: 'none',
scalable: false,
popGesture: 'none'
}, {
preate: true
}));
wp.show(type);
}
// 關閉窗口
var _back = window.back;
function preateBack() {
wp && (wp.close(), wp = null);
_back();
}
window.back = preateBack;
</script>
</head>
<body>
<header id="header">
<div class="nvbt iback" onclick="back()"></div>
<div class="nvtt">系統原生動畫</div>
</header>
<div id="content" class="content">
<br />
<ul class="dlist">
<li class="ditem" onclick="animateWindow('pop-in')">從右側平移入棧</li>
<li class="ditem" onclick="animateWindow('slide-in-right')">從右側橫向滑出</li>
<li class="ditem" onclick="animateWindow('slide-in-left')">從左側橫向滑出</li>
<li class="ditem" onclick="animateWindow('slide-in-top')">從上側豎向滑出</li>
<li class="ditem" onclick="animateWindow('slide-in-bottom')">從下側豎向滑出</li>
<!--<li class="ditem" onclick="animateWindow('zoom-out')">從小到大逐漸放大</li>-->
<li class="ditem" onclick="animateWindow('zoom-fade-out')">從小到大並逐漸透明顯示</li>
<li class="ditem" onclick="animateWindow('fade-in')">從透明到不透明逐漸顯示</li>
<!--<li class="ditem" onclick="animateWindow('flip-x')">以x軸從上到下翻轉效果</li>
<li class="ditem" onclick="animateWindow('flip-rx')">以x軸從下到上翻轉轉效果</li>
<li class="ditem" onclick="animateWindow('flip-y')">以y軸從左到右翻轉效果</li>
<li class="ditem" onclick="animateWindow('flip-ry')">以y軸從右到左翻轉效果</li>
<li class="ditem" onclick="animateWindow('page-forward')">向前翻書動畫效果</li>-->
<li class="ditem" onclick="animateWindow('none')">無動畫</li>
</ul>
</div>
</body>
</html>
html5+ webview_animation-窗口動畫
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
使用html5+的plus清除緩存的文件
點擊清除緩存的按鈕 // 清除緩存 $('.clear-file').click(function(){ var con = confirm("確認要清除緩存嗎？"); if(con){