impress.js高级引导界面代码【原创

来源:https://www.sucaihuo.com/js/3212.html 2017-11-15 18:03浏览(493) 收藏

impress.js高级特效展示 适用于个人介绍 超级酷炫,js支持键盘方向控制的引导页面模板
impress.js高级引导界面代码
分类:其它特效 > 页面引导 难易:初级
查看演示 下载资源 下载积分: 60 积分
打开源代码直接在源代码中更改文字即可,十分简单


<!doctype html>
<html lang="zh-CN">

	<head>
		<meta charset=utf-8 "utf-8"/>
		<meta name="viewport" content="width=1024" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta http-equiv=refresh content= />
		<title>关于我 |Dreamer</title>
		
		<meta name="author" content="tim" />
		<script data-pagespeed-no-defer>
			
			      
function   fresh()  
{  
if(location.href.indexOf("?reload=true")<0)
   {
    location.href+="?reload=true";  
   }  
}  
setTimeout("fresh()",50)

			
			
			
			
			
			
			(function() {
				function d(b) {
					var a = window;
					if(a.addEventListener) a.addEventListener("load", b, !1);
					else if(a.attachEvent) a.attachEvent("onload", b);
					else {
						var c = a.onload;
						a.onload = function() {
							b.call(this);
							c && c.call(this)
						}
					}
				}
				var p = Date.now || function() {
					return +new Date
				};
				window.pagespeed = window.pagespeed || {};
				var q = window.pagespeed;

				function r() {
					this.a = !0
				}
				r.prototype.c = function(b) {
					b = parseInt(b.substring(0, b.indexOf(" ")), 10);
					return !isNaN(b) && b <= p()
				};
				r.prototype.hasExpired = r.prototype.c;
				r.prototype.b = function(b) {
					return b.substring(b.indexOf(" ", b.indexOf(" ") + 1) + 1)
				};
				r.prototype.getData = r.prototype.b;
				r.prototype.f = function(b) {
					var a = document.getElementsByTagName("script"),
						a = a[a.length - 1];
					a.parentNode.replaceChild(b, a)
				};
				r.prototype.replaceLastScript = r.prototype.f;
				r.prototype.g = function(b) {
					var a = window.localStorage.getItem("pagespeed_lsc_url:" + b),
						c = document.createElement(a ? "style" : "link");
					a && !this.c(a) ? (c.type = "text/css", c.appendChild(document.createTextNode(this.b(a)))) : (c.rel = "stylesheet", c.href = b, this.a = !0);
					this.f(c)
				};
				r.prototype.inlineCss = r.prototype.g;
				r.prototype.h = function(b, a) {
					var c = window.localStorage.getItem("pagespeed_lsc_url:" + b + " pagespeed_lsc_hash:" + a),
						f = document.createElement("img");
					c && !this.c(c) ? f.src = this.b(c) : (f.src = b, this.a = !0);
					for(var c = 2, k = arguments.length; c < k; ++c) {
						var g = arguments[c].indexOf("=");
						f.setAttribute(arguments[c].substring(0, g), arguments[c].substring(g + 1))
					}
					this.f(f)
				};
				r.prototype.inlineImg = r.prototype.h;

				function t(b, a, c, f) {
					a = document.getElementsByTagName(a);
					for(var k = 0, g = a.length; k < g; ++k) {
						var e = a[k],
							m = e.getAttribute("data-pagespeed-lsc-hash"),
							h = e.getAttribute("data-pagespeed-lsc-url");
						if(m && h) {
							h = "pagespeed_lsc_url:" + h;
							c && (h += " pagespeed_lsc_hash:" + m);
							var l = e.getAttribute("data-pagespeed-lsc-expiry"),
								l = l ? (new Date(l)).getTime() : "",
								e = f(e);
							if(!e) {
								var n = window.localStorage.getItem(h);
								n && (e = b.b(n))
							}
							e && (window.localStorage.setItem(h, l + " " + m + " " + e), b.a = !0)
						}
					}
				}

				function u(b) {
					t(b, "img", !0, function(a) {
						return a.src
					});
					t(b, "style", !1, function(a) {
						return a.firstChild ? a.firstChild.nodeValue : null
					})
				}
				q.i = function() {
					if(window.localStorage) {
						var b = new r;
						q.localStorageCache = b;
						d(function() {
							u(b)
						});
						d(function() {
							if(b.a) {
								for(var a = [], c = [], f = 0, k = p(), g = 0, e = window.localStorage.length; g < e; ++g) {
									var m = window.localStorage.key(g);
									if(!m.indexOf("pagespeed_lsc_url:")) {
										var h = window.localStorage.getItem(m),
											l = h.indexOf(" "),
											n = parseInt(h.substring(0, l), 10);
										if(!isNaN(n))
											if(n <= k) {
												a.push(m);
												continue
											} else if(n < f || 0 == f) f = n;
										c.push(h.substring(l + 1, h.indexOf(" ", l + 1)))
									}
								}
								k = "";
								f && (k = "; expires=" + (new Date(f)).toUTCString());
								document.cookie = "_GPSLSC=" + c.join("!") + k;
								g = 0;
								for(e = a.length; g < e; ++g) window.localStorage.removeItem(a[g]);
								b.a = !1
							}
						})
					}
				};
				q.localStorageCacheInit = q.i;
			})();
			pagespeed.localStorageCacheInit();
		</script>
		<link href="css/A.info.css+fonts.css,Mcc.3oeLZa5OjE.css.pagespeed.cf.eMOlhcLhLT.css" rel="stylesheet" />
		<link rel="shortcut icon" />
		<link rel="apple-touch-icon" href="apple-touch-icon.png" />
		<base target="_blank">
	</head>

	<body class="impress-not-supported">
		<div class="fallback-message">
			<p>您的浏览器 <b>不支持</b> impress.js的展示要求, 将为您呈现简化版的展示</p>
			<p>为了获取最佳效果,请使用最新版的<b>Chrome</b>, <b>Safari</b> 或 <b>Firefox</b> 浏览器</p>
			<p>请使用电脑端食用,效果更佳,记得摇一摇哟!</p>
		</div>
		<div id="impress">
			<div id="welcome" class="step" data-x="-2000" data-y="-2500">
				<p>欢迎来到</p>
				<p><span class="title"><b>Dreamer</b></span></p>
				<p><span class="footnote"><sup>*</sup>我叫<span class="name"> GaoWei</span>,下面是关于我的一些介绍</span>
				</p>
			</div>
			<div id="me" class="step" data-x="0" data-y="-2500">
				<b class="now_me">现在的我:</b>
				<ul>
					<li><b class="ios">一名大三理工男</b></li>
					<li><b class="unity">未来的职业程序猿一名</b></li>
					<li><b class="ios">业余 前端 开发者</b></li>
					<li><b class="photo">业余建站爱好者</b></li>
				</ul>
			</div>
			<div id="whereiam" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="3">
				<p>生于<span class="kunming">安徽</span></p>
				<p><span class="born">一个不起眼的小农村</span></p>
				<p>就读<span class="tsinghua">桂林理工</span></p>
				<p><span class="study">麻雀虽小五脏俱全</span></p>
			</div>
			<div id="guilin" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="4">
				<p>现就读于<b class="trans">桂林</b>
					<p>
						<p>努力学习本专业<sup>*</sup>的同时,也在不断学习新的东西<sup>**</sup></p>
						<p><span class="footnote">* 其实就是玩手机,** 然后就是发呆</span></p>
			</div>
			<div id="world" class="step" data-x="-100" data-y="2900" data-z="900" data-rotate="-90" data-scale="5">
				<p>有时候会觉得,世界真的很小</p>
			</div>
			<div id="meet" class="step" data-x="1300" data-y="6000" data-z="2400" data-scale="6">
				<p>也许我们就在某时某地</p>
				<p>曾经擦肩而过</p>
				<p>而你我,却浑然不觉</p>
			</div>
			<div id="tiny" class="step" data-x="1300" data-y="6000" data-z="-3000" data-rotate="300" data-scale="1">
				<p>但是</p>
			</div>
			<div id="comein" class="step" data-x="0" data-y="7000" data-z="-3000" data-rotate="300">
				<p>从此刻开始,从您踏入
					<a href="http://www.aoeiun.cn/">Dreamer</a>开始</p>
				<p>我们的生活便有了<b>交集</b></p>
			</div>
			<div id="mywords" class="step" data-x="4500" data-y="3500" data-z="3000" data-rotate="160">
				<p>也许您在这里能看到的只是</p>
				<p>中国千千万万理工男之中最普通的一员</p>
				<p>所写下的最蹩足的文字</p>
			</div>
			<div id="grow" class="step" data-x="3500" data-y="-850" data-z="3000" data-rotate="270" data-scale="6">
				<p>但我相信它们真实地记载了</p>
				<p><b>我的生活,我的成长</b></p>
			</div>
			<div id="knowme" class="step" data-x="-6000" data-y="-800" data-z="0" data-rotate="0" data-scale="1">
				<p>正如</p>
				<p>伯乐得见绝世好马,子期终遇伯牙佳音</p>
			</div>
			<div id="prizeme" class="step" data-x="-6000" data-y="-500" data-z="-500" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
				<p><span class="horse">良驹美景,</span> <span class="moutain">高山流水,</span> <span class="hope">我真心希望</span> <span class="youare">您就是</span> <span class="my">我的伯乐,我的子期</span> <b></p>
</div>
<div id="findme" class="step" data-x="-6000" data-y="1000" data-scale="4">
<p>您可以在<a href="http://weibo.com/u/5189035926?is_all=1">新浪微博</a>,<a href="#"> Twitter</a> 或者<a href="">Github</a>上找到我</p>
<q>也可以逛一逛这个<a href="http://www.aoeiun.cn/">网站</a>,这里有一些你需要的东西</q>
</div>
<div id="subcribe" class="step" data-x="-6000" data-y="3100" data-rotate="180" data-scale="4">
<p>如果您有兴趣持续关注本站,可以将本站加入收藏夹</p>
<p>当然也欢迎您通过<a href="http://www.aoeiun.cn/">主页</a>访问本站。</p>
<p><span class="adv">这样<del>我就可以光明正大地给您推送我的分享了</del>您就可以第一时间看到本站的新文章了</span></p>
</div>
<div id="one-more-thing" class="step" data-x="-1500" data-y="-1100" data-z="0" data-scale="2">
<p>One More Thing</p>
<p>其实是一句话,想分享给您</p>
</div>
<div id="motto" class="step" data-x="0" data-y="1500" data-z="6000" data-scale="5">
<p>不论您走到哪儿,在做什么</p>
<p>都请铭记在心 请记住</p>
<p><b>勿忘初心,方得始终</b></p>
			</div>
			<div id="back" class="step" data-x="-6000" data-y="5200" data-scale="2">
				<p>谢谢您的来访</p>
				<p>点击
					<a href="http://www.aoeiun.cn/">这里</a>返回Dreamer</p>
			</div>
			<div id="overview" class="step" data-x="0" data-y="2500" data-scale="16">
			</div>
		</div>
		<div class="hint">
			<p>使用空格或方向键继续</p>
		</div>
		<script>
			if("ontouchstart" in document.documentElement) {
				document.querySelector(".hint").innerHTML = "<p>在左侧或右侧点击继续</p>";
			}
		</script>
		<script src="js/impress.js.pagespeed.jm.J1W2agOVUy.js"></script>
		<script>
			impress().init();
		</script>
	</body>

</html>
标签: 引导
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/3212.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2