搜索注册栏（注册弹出模态框）和富强民主的鼠标点击效果

最新推荐文章于 2020-05-14 19:17:56 发布

江西师范大学-20届-吴悠

最新推荐文章于 2020-05-14 19:17:56 发布

阅读量286

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/qq_39905917/article/details/85069120

版权

前端开发专栏收录该内容

21 篇文章 1 订阅

订阅专栏

搜索注册栏（注册弹出模态框）和富强民主的鼠标点击效果

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="css/bootstrap.min.css" rel="stylesheet" />
		<link href="css/font-awesome.min.css" rel="stylesheet" />
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
		<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
	</head>
<script type="text/javascript"> /* 鼠标特效 ，点击出现富强民主文明和谐的字*/ 
var a_idx = 0; jQuery(document).ready(function($) { 
	$("body").click(function(e) { var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); 
	var $i = $("<span/>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; 
	var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "#ff6651" }); 
	$("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); }); 
</script>

	<body>
		<!--搜索注册栏-->
		<div class="container-fluid">
				<nav class="navbar-form navbar-center" role="Search">
					        <div class="col-lg-4"></div>
							<div class="col-lg-4">
							        <div class="input-group">
							        <input type="text" class="form-control " placeholder="Search" onkeydown="onKeyDown(event)" style="width: 500px;">
							        <span class="input-group-addon btn-lg"><a href="#"><i class="glyphicon glyphicon-search"><span>搜索</span></i></a></span>
							        </div>
							</div>
							<div class="col-lg-4">
									<button type="submit" class="btn-info btn-sm">登录</button>
									<button type="button" class="btn-danger btn-sm">注销</button>
									<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" >注册</button>
									<!--注册的模态框-->
									<div class="modal fade" id="myModal">
											<div class="modal-dialog">
														<div class="modal-content">
																<div class="modal-header">
																		<button type="button" class="close" data-dismiss="modal">&times;</button>
																		<h4 class="modal-title">注册</h4>
																</div>
																<div class="modal-body">
																		<div class="container">
																				<div class="container">
																						<label>手机号</label>
																						<input type="text" class="form-control" placeholder="请输入您的手机号" />
																				</div><br />
																				<div class="container">
																						<label>姓名</label>
																						<input type="text" class="form-control" placeholder="请输入您的姓名" />
																				</div><br />
																				<div class="container">
																						<label>邮箱</label>
																						<div class="input-group">
																						<input class="text" class="form-control" style="width: 100px;" placeholder="请输入您的邮箱" />
																						<span class="input-group-addon">@qq.com</span>
																						</div>
																				</div><br />
																				<div class="container">
																						<label>性别</label>
																						<label class="radio-inline"><input type="radio" />男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
																						<label class="radio-inline"><input type="radio" />女&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
																				</div><br />
																		</div>
																</div><!--body部分-->
																<div class="modal-footer">
																	<button class="btn btn-primary">提交</button>
																	<button class="btn btn-default" data-dismiss="modal">关闭</button>
																</div>
														</div>
											</div>
									</div>
									<!--注册的模态框-->
							</div>	
					</nav>
				<!--搜索注册条-->
		</div>
	</body>
</html>

页面效果
在这里插入图片描述
动态效果：