modernizr html5弹出框触屏手机网站点击动画弹出层导航菜单



228 908 303



特效描述:弹出框导航 动画弹出层导航,

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<link rel="stylesheet" type="text/css" href="css/content.css" />

2. 引入JS

<script src="js/modernizr.custom.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script type="text/javascript" src="js/uiMorphingButton_fixed.js"></script>

3. HTML代码

<div class="container">
	<header class="codrops-header">
		<h1>Morphing Buttons Concept</h1>
		<p>Inspiration for revealing content by morphing the action element. Examples:</p>
		<nav class="codrops-demos">
			<a class="current-demo" href="index.html">Login/Signup</a>
			<a href="index2.html">Terms</a>
			<a href="index3.html">Info Overlay</a>
			<a href="index4.html">Subscribe</a>
			<a href="index5.html">Share</a>
			<a href="index6.html">Video Player</a>
			<a href="index7.html">Sidebar Settings</a>
		</nav>
	</header>
	<section>
		<p>Click one of the buttons below to see a <strong>modal dialog</strong>:</p>
		<div class="mockup-content">
			<p>Pea horseradish azuki bean lettuce avocado asparagus okra.</p>
			<div class="morph-button morph-button-modal morph-button-modal-2 morph-button-fixed">
				<button type="button">Login</button>
				<div class="morph-content">
					<div>
						<div class="content-style-form content-style-form-1">
							<span class="icon icon-close">Close the dialog</span>
							<h2>Login</h2>
							<form>
								<p><label>Email</label><input type="text" /></p>
								<p><label>Password</label><input type="password" /></p>
								<p><button>Login</button></p>
							</form>
						</div>
					</div>
				</div>
			</div><!-- morph-button -->
			<strong class="joiner">or</strong>
			<div class="morph-button morph-button-modal morph-button-modal-3 morph-button-fixed">
				<button type="button">Signup</button>
				<div class="morph-content">
					<div>
						<div class="content-style-form content-style-form-2">
							<span class="icon icon-close">Close the dialog</span>
							<h2>Sign Up</h2>
							<form>
								<p><label>Email</label><input type="text" /></p>
								<p><label>Password</label><input type="password" /></p>
								<p><label>Repeat Password</label><input type="password" /></p>
								<p><button>Sign Up</button></p>
							</form>
						</div>
					</div>
				</div>
			</div><!-- morph-button -->
			<p>Kohlrabi radish okra azuki bean corn fava bean mustard tigernut juccama green bean celtuce collard greens avocado quandong.</p>
		</div><!-- /form-mockup -->
	</section>
</div><!-- /container -->
<script type="text/javascript">
(function() {
	var docElem = window.document.documentElement, didScroll, scrollPosition;
	// trick to prevent scrolling when opening/closing button
	function noScrollFn() {
		window.scrollTo( scrollPosition ? scrollPosition.x : 0, scrollPosition ? scrollPosition.y : 0 );
	}
	function noScroll() {
		window.removeEventListener( 'scroll', scrollHandler );
		window.addEventListener( 'scroll', noScrollFn );
	}
	function scrollFn() {
		window.addEventListener( 'scroll', scrollHandler );
	}
	function canScroll() {
		window.removeEventListener( 'scroll', noScrollFn );
		scrollFn();
	}
	function scrollHandler() {
		if( !didScroll ) {
			didScroll = true;
			setTimeout( function() { scrollPage(); }, 60 );
		}
	};
	function scrollPage() {
		scrollPosition = { x : window.pageXOffset || docElem.scrollLeft, y : window.pageYOffset || docElem.scrollTop };
		didScroll = false;
	};
	scrollFn();
	[].slice.call( document.querySelectorAll( '.morph-button' ) ).forEach( function( bttn ) {
		new UIMorphingButton( bttn, {
			closeEl : '.icon-close',
			onBeforeOpen : function() {
				// don't allow to scroll
				noScroll();
			},
			onAfterOpen : function() {
				// can scroll again
				canScroll();
			},
			onBeforeClose : function() {
				// don't allow to scroll
				noScroll();
			},
			onAfterClose : function() {
				// can scroll again
				canScroll();
			}
		} );
	} );
	// for demo purposes only
	[].slice.call( document.querySelectorAll( 'form button' ) ).forEach( function( bttn ) { 
		bttn.addEventListener( 'click', function( ev ) { ev.preventDefault(); } );
	} );
})();
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 弹出层拖动 窗口提示框 html5弹窗动画 html5动画h5动画 html5按钮动画 提示框/弹出层 html5文字动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到