HTML5+jQuery设计悬浮菜单特效

作者：简简单单 2017-10-28

提示：您可以先修改部分代码再运行

对于HTML5+jQuery的使用，相信很多人并不陌生，这也是很多从事前端设计经常使用的。那么使用HTML5+jQuery设计悬浮菜单特效要怎么去设计操作呢？下面文章就给大家分享下具体设计方法，一起来了解下。


	<a href="https://img.111com.net/attachment/art/148593/61ba1e4119.com/large/26ef0003702ff0146c01" class="js-smartPhoto" target="_blank"><img alt="" src="https://img.111com.net/attachment/art/148593/61ba1e4119.com/large/26ef0003702ff0146c01" style="height:auto;" /></a> 


	喜欢的朋友点个关注，时不时分享有趣特效


	HTML代码


	<!DOCTYPE html>


	<html>


	<head>


	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


	<title>实用网站右侧常驻悬浮导航菜单js特效代码</title>


	</head>


	<body>


	<div class="box">


	<a href='#'>0Flash素材</a>


	<a href='#'>1菜单导航</a>


	<a href='#'>2时间日期</a>


	<a href='#'>3焦点图</a>


	<a href='#'>4tab标签</a>


	<a href='#'>5jquery特效</a>


	<a href='#'>6在线客服</a>


	<a href='#'>7广告代码</a>


	<a href='#'>8相册代码</a>


	<a href='#'>9图片特效</a>


	<a href='#'>10名站特效</a>


	<a href='#'>11视频播放</a>


	<a href='#'>12其他代码</a>


	</div>


	</body>


	</html>


	CSS代码


	* {


	margin:0;


	padding:0;


	list-style-type:none;


	}


	a, img {


	border:0;


	text-decoration:none;


	}


	body {


	font:12px/180% Arial, Helvetica, sans-serif, "新宋体";


	background:#DCDCDC;


	}


	.box {


	position:fixed;


	top:0;


	right:0;


	z-index:9999;


	


	cursor:pointer;


	margin:100px 0 0 0;


	}


	body{


	background-image:url(about:blank);


	background-attachment:fixed;


	}


	.box{


	position:absolute;


	top:expression(eval(document.documentElement.scrollTop));


	}


	.box a {


	display:block;


	position:relative;


	


	line-


	margin-bottom:2px;


	background:#fff;


	padding-right:10px;


	


	overflow:hidden;


	color:#333;


	cursor:pointer;


	right:-110px;


	}


	.box a:hover {


	text-decoration:none;


	color:#1974A1;


	}


	.box a:hover span {


	background:#5FA429


	}


	.box a span {


	display:block;


	float:left;


	


	background:#636871;


	color:#fff;


	font-size:16px;


	text-align:center;


	margin-right:10px;


	font-style:normal;


	}


	JS代码（需要引用Jquery1.1以上版本，百度下载直接放到网站根目录即可）


	<script src="jquery文件></script>//本地没有的朋友百度下载直接放到网站根目录即可，把“jquery文件“ 替换成你的jquery文件名


	<script type="text/javascript">


	$(function() {


	var timer = null;


	$(".box").mouseenter(function() {


	clearTimeout(timer);


	var that = $(this);


	timer = setTimeout(function() {


	that.find("a").each(function(index,ele){


	setTimeout(function(){


	$(ele).stop().animate({right:0},200);


	},50*index);


	})


	},200)


	}).mouseleave(function() {


	if(timer) {


	clearTimeout(timer);


	}


	$(this).find("a").each(function(index,ele) {


	setTimeout(function(){


	$(ele).stop().animate({right:-110},200);


	},50*index);


	})


	})


	})


	</script>


	<script type="text/javascript">


	function stops(){


	return false;


	}


	document.oncontextmenu=stops;


	</script>

提示：您可以先修改部分代码再运行

HTML5+jQuery设计悬浮菜单特效

相关文章

精彩推荐