经验分享程序开发文档资料数据资源其它资源

jQuery右侧弹出全屏覆盖菜单特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery右侧弹出全屏覆盖菜单特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery右侧弹出全屏覆盖菜单特效代码

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
	<meta charset="gb2312" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery右侧弹出全屏覆盖菜单</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/main.css" />
	<link rel="stylesheet" type="text/css" href="css/style4.css" />
	<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
</head>

	<body>
	<br><br><br><br><br>
		<!-- Container -->
		<div class="container">
			<!-- section with buttons-->		
			<section>

				<p><button id="trigger-overlay" type="button">鼠标点击或者按键盘M查看效果</button></p>
			</section>
			<!-- section with buttons end-->	
			
		</div>
		<!-- Container end -->


		<div class="overlay overlay-slidedown">
			<button type="button" class="overlay-close">Close</button>
			
			<nav>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">What we do?</a></li>
					<li><a href="#">Our clients</a></li>
					<li><a href="#">About us</a></li>
					<li><a href="#">Contact us</a></li>
				</ul>
			</nav>
			<div class="your_blocks">
			<div class="your_block">
			<a href="#">
                                                    <img src="img/intro.jpg" class="block_attachment" alt=""> 
                                                    			<span>
				Here you can add your awesome information, ADS or recent/popular news from your site.
			</span>	                                               			</a>
			</div>
			</div>
			
		</div>
		<!-- js on bottom for speed-->
				<script type="text/javascript" src="js/jquery.min.js"></script>
		<script src="js/mousetrap.min.js"></script>
		<script src="js/modernizr.custom.js"></script>
		<script src="js/classie.js"></script>
		<script src="js/cmdscriptmin.js"></script>
		<!-- js on bottom for speed end -->
</body>
</html>

JS代码(cmdscriptmin.js):

/*!* CMDScript - Fullscreen and overlay class functions* from Scolerov scoolerov@gmail.com* Suppost keyboard shortcuts* 8:'backspace',* 9:'tab',* 13:'enter',* 16:'shift',* 17:'ctrl',* 18:'alt',* 20:'capslock',* 27:'esc',* 32:'space',* 33:'pageup',* 34:'pagedown',* 35:'end',* 36:'home',* 37:'left',* 38:'up',* 39:'right',* 40:'down',* 45:'ins',* 46:'del',* 91:'meta',* 93:'meta',* 224:'meta'* 106:'*',* 107:'+',* 109:'-',* 110:'.',* 111:'/',* 186:';
	',* 187:'=',* 188:',',* 189:'-',* 190:'.',* 191:'/',* 192:'`',* 219:'[',* 220:'\\',* 221:']',* 222:'\''* '~':'`',* '!':'1',* '@':'2',* '#':'3',* '$':'4',* '%':'5',* '^':'6',* '&':'7',* '*':'8',* '(':'9',* ')':'0',* '_':'-',* '+':'=',* ':':';
	',* '\"':'\'',* '<':',',* '>':'.',* '?':'/',* '|':'\\'* 'option':'alt',* 'command':'meta',* 'return':'enter',* 'escape':'esc'*/
$(document).ready(function(){
	var FScreen = document.querySelector( 'div.overlay' );
	// Change main overlay keyboard close shortcutMousetrap.bind('esc',function(e){
	classie.remove( FScreen,'open' )}
),// Change main overlay keyboard open shortcutMousetrap.bind('m',function(e){
	classie.add( FScreen,'open' )}
)}
);
	(function(){
	var TBtn = document.getElementById( 'trigger-overlay' ),FScreen = document.querySelector( 'div.overlay' ),CBtn = FScreen.querySelector( 'button.overlay-close' );
	TNames ={
	'WebkitTransition':'webkitTransitionEnd','MozTransition':'transitionend','OTransition':'oTransitionEnd','msTransition':'MSTransitionEnd','transition':'transitionend'}
,EName = TNames[ Modernizr.prefixed( 'transition' ) ],support ={
	transitions:Modernizr.csstransitions}
;
	function toggleFScreen(){
	if( classie.has( FScreen,'open' )){
	classie.remove( FScreen,'open' );
	classie.add( FScreen,'close' );
	var onEndTransitionFn = function( ev ){
	if( support.transitions ){
	if( ev.propertyName !== 'visibility' ) return;
	this.removeEventListener( EName,onEndTransitionFn );
}
classie.remove( FScreen,'close' );
}
;
	if( support.transitions ){
	FScreen.addEventListener( EName,onEndTransitionFn );
}
else{
	onEndTransitionFn();
}
}
else if( !classie.has( FScreen,'close' ) ){
	classie.add( FScreen,'open');
}
}
TBtn.addEventListener( 'click',toggleFScreen );
	CBtn.addEventListener( 'click',toggleFScreen );
}
)();

CSS代码(main.css):

@import url(http://fonts.googleapis.com/css?family=Lato:300,400);.clearfix:after{clear:both;}
.clearfix:before,.clearfix:after{content:'';display:table;}
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
ul li{list-style:none;}
body{background:#fff;color:#fff;line-height:1.25;font-family:'Lato','Avenir Next',Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
a{color:#2dbaef;text-decoration:none;outline:none;}
a:hover,a:focus{color:#373e18;}
.CMD_header{margin:0 auto;padding:1.5em 0em 1.5em;text-align:center;background:#363e49;position:fixed;width:100%;}
.CMD_header h1 a{color:#707980;-webkit-transition:color 0.2s;transition:color 0.2s;}
h2.aftheader{font-weight:400;color:#707980;font-size:16px;margin-bottom:0;}
.CMD_header h1 a:hover{color:#fff;}
.CMD_header h1{margin:0 0px 20px;font-weight:300;font-size:2.5em;-webkit-transition:all 0.6s;transition:all 0.6s;}
.CMD_buy{position:absolute;top:49px;right:50px;background:#2dbaef;padding:10px 20px 10px 20px;border-radius:5px;line-height:14px;font-size:16px;font-weight:400;}
.CMD_buy a{color:#fff;}
.CMD_header h1 span{display:block;padding:0 0 0.6em 0.1em;font-size:0.6em;opacity:0.7;}
.CMD_effectslist{margin:0 auto;padding-top:138px;padding-bottom:50px;}
.demo{padding-top:190px;}
#back{margin-right:20px;width:120px;background:#707980;}
.CMD_content{text-align:left;color:#707980;font-size:16px;padding:20px;}
.CMD_contactinfo{text-align:center;width:500px;margin:0 auto;}
.CMD_info{margin:0;padding:0;}
.CMD_info li{display:inline-block;}
.CMD_info li a{color:#9dabb4;-webkit-transition:all 0.2s;transition:all 0.2s;}
.CMD_info li a:hover{color:#363e49;text-decoration:none;}
.CMD_info li i{margin-right:20px;}
body > div > section:nth-child(3) > div > ul > li:nth-child(3) > a > i{margin-right:0;}
.CMD_grid{display:block;width:600px;margin:0 auto;-webkit-transition:all 0.6s;transition:all 0.6s;}
.CMD_grid h1{font-size:32px;font-weight:300;color:#343e48;}
.CMD_effectslist a,section button{font-size:18px;display:block;background:transparent;color:#9dabb4;font-weight:400;padding:10px 20px;margin:20px auto;border-radius:5px;border:2px solid #9dabb4;width:80%;-webkit-transition:all 0.2s;transition:all 0.2s;}
.CMD_effectslist a:hover,.CMD_effectslist a:active,.CMD_effectslist a.current-demo{background:#9dabb4;color:#fff;}
section{padding:1em 2em 2em;text-align:center;font-size:1.5em;}
section p{max-width:600px;margin:0 auto;}
section button{color:#fff;font-weight:200;display:inline-block;border:none;padding:15px 30px;outline:none;background:#2fbcf2;width:350px;}
@media screen and (max-width:960px){.CMD_grid{width:300px;}
.CMD_contactinfo{width:300px;}
.CMD_header h1{margin:0 0px 20px;font-weight:400;font-size:1.5em;}
section button{width:160px;}
}

CSS代码(normalize.css):

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
[hidden]{display:none;}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0;}
a:focus{outline:thin dotted;}
a:active,a:hover{outline:0;}
h1{font-size:2em;margin:0.67em 0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
dfn{font-style:italic;}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
mark{background:#ff0;color:#000;}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}
pre{white-space:pre-wrap;}
q{quotes:"\201C" "\201D" "\2018" "\2019";}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{border:0;}
svg:not(:root){overflow:hidden;}
figure{margin:0;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
legend{border:0;padding:0;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button,input{line-height:normal;}
button,select{text-transform:none;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}

CSS代码(style4.css):

nav ul li i{margin-right:10px;}
/* Overlay colors */
.color1{background:rgba(0,0,0,0.9);}
.color2{background:rgba(26,188,156,0.9);}
.color3{background:rgba(44,62,80,0.9);}
.color4{background:rgba(47,50,56,0.9);}
/* Overlay style */
.overlay{position:fixed;width:100%;height:100%;top:0;left:0;background:rgba(211,84,0,0.9);}
/* Overlay closing cross */
.overlay .overlay-close{width:80px;height:80px;position:absolute;margin:0;padding:0;right:20px;top:20px;overflow:hidden;border:none;background:url(../img/cross.png) no-repeat center center;text-indent:200%;color:transparent;outline:none;z-index:100;-webkit-transition:all 0.2s;transition:all 0.2s;}
.overlay .overlay-close:hover{-webkit-transform:scale(0.6);-moz-transition:scale(0.6);-o-transition:scale(0.6);transition:scale(0.6);}
/* Menu style */
.overlay nav{width:20%;top:50%;left:20%;text-align:left;position:relative;line-height:5em;-webkit-transform:translateY(-50%);transform:translateY(-50%);float:left;}
/* Block styles */
.overlay .your_blocks{width:38.6%;right:20%;position:relative;line-height:2em;-webkit-transform:translateY(-50%);transform:translateY(-50%);float:right;top:50%;}
.overlay .your_block{border-radius:10px;display:inline-block;text-align:left;margin:10px 10px;color:#fff;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:-webkit-transform 0.7s,opacity 0.1s 0.7s;transition:transform 0.7s,opacity 0.1s,visibility 0s 0.7s;-webkit-transform:translate3d( 300%,0,0);transform:translate3d( 300%,0,0);}
.overlay-slidedown.open .your_block{border-radius:10px;visibility:visible;opacity:1;-webkit-transition:-webkit-transform 0.7s,opacity 0.1s 0.7s;transition:transform 0.7s,opacity 1s;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
.block_link{color:#fff;font-size:15px;text-decoration:underline;}
.overlay .your_block img{width:720px;border-radius:10px;}
.overlay .your_block span{position:absolute;bottom:10px;left:0;margin-bottom:0;text-align:left;z-index:3;color:#fff;font-size:22px;text-decoration:none;padding:20px;font-weight:300;}
.overlay ul{list-style:none;padding:0;margin:0 auto;display:inline-block;height:100%;position:relative;}
.overlay ul li{display:block;height:20%;height:calc(100% / 5);min-height:54px;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:-webkit-transform 0.3s,opacity 0.1s,visibility 0s 0.2s;transition:transform 0.3s,opacity 0.1s,visibility 0s 0.2s;-webkit-transform:translate3d( 300%,0,0);transform:translate3d( 300%,0,0);}
.overlay-slidedown.open ul li:first-child{-webkit-transition-delay:0.05s;transition-delay:0.05s;}
.overlay-slidedown.open ul li:nth-child(2){-webkit-transition-delay:0.1s;transition-delay:0.1s;}
.overlay-slidedown.open ul li:nth-child(3){-webkit-transition-delay:0.15s;transition-delay:0.15s;}
.overlay-slidedown.open ul li:nth-child(4){-webkit-transition-delay:0.2s;transition-delay:0.2s;}
.overlay-slidedown.open ul li:last-child{-webkit-transition-delay:0.25s;transition-delay:0.25s;}
.overlay-slidedown.open ul li{visibility:visible;opacity:1;-webkit-transition:-webkit-transform 0.7s,opacity 0.1s 0.7s;transition:transform 0.7s,opacity 1s;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
.overlay ul li a{font-size:32px;font-weight:300;display:block;color:#fff;-webkit-transition:opacity 0.2s;transition:opacity 0.2s;}
.overlay ul li a:hover,.overlay ul li a:focus{opacity:0.5;}
/* Effects */
.overlay-slidedown{visibility:hidden;-webkit-transform:translateX(100%);transform:translateX(100%);-webkit-transition:-webkit-transform 0.4s ease-in-out,visibility 0s 0.4s;transition:transform 0.4s ease-in-out,visibility 0s 0.4s;}
.overlay-slidedown.open{visibility:visible;-webkit-transform:translateX(0%);transform:translateX(0%);-webkit-transition:-webkit-transform 0.4s ease-in-out;transition:transform 0.4s ease-in-out;}
@media screen and (max-height:30.5em){.overlay nav{line-height:1.6em;font-size:34px;}
.overlay ul li{min-height:34px;}
}
@media screen and (max-width:1430px){.overlay .your_blocks{width:48.6%;}
.overlay nav{left:10%;}
}
@media screen and (max-width:960px){.overlay .your_blocks{display:none;}
.overlay nav{text-align:center;left:0;width:100%;}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
376.96 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
376.96 KB
立即下载
康昭
了解
打赏作者 鼓励作者
Html Js 菜单导航特效2
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章