html5+ webview_animation-窗口动画

<!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" οnclick="animateWindow('zoom-out')">从小到大逐渐放大</li>-->
				<li class="ditem" onclick="animateWindow('zoom-fade-out')">从小到大并逐渐透明显示</li>
				<li class="ditem" onclick="animateWindow('fade-in')">从透明到不透明逐渐显示</li>
				<!--<li class="ditem" οnclick="animateWindow('flip-x')">以x轴从上到下翻转效果</li>
				<li class="ditem" οnclick="animateWindow('flip-rx')">以x轴从下到上翻转转效果</li>
				<li class="ditem" οnclick="animateWindow('flip-y')">以y轴从左到右翻转效果</li>
				<li class="ditem" οnclick="animateWindow('flip-ry')">以y轴从右到左翻转效果</li>
				<li class="ditem" οnclick="animateWindow('page-forward')">向前翻书动画效果</li>-->
				<li class="ditem" onclick="animateWindow('none')">无动画</li>
			</ul>
		</div>
	</body>

</html>
wlor
发布了33 篇原创文章 · 获赞 6 · 访问量 2万+
私信关注
html5+ webview_animation-窗口动画

猜你喜欢
