<!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-窗口动画
最新推荐文章于 2021-06-24 22:53:50 发布
823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
