搜索注册栏（注册弹出模态框）和富强民主的鼠标点击效果
<!doctype html>
<html>
<head>
< charset=\"utf-8\">
< ></ >
< href=\"css/bootstrap.min.css\" rel=\"stylesheet\" />
< href=\"css/font-awesome.min.css\" rel=\"stylesheet\" />
< src=\"js/jquery.min.js\"></ >
< src=\"js/bootstrap.min.js\"></ >
< href=\"http://fonts.googleapis.com/css?family=Montserrat\" rel=\"stylesheet\" type=\"text/css\">
< href=\"http://fonts.googleapis.com/css?family=Lato\" rel=\"stylesheet\" type=\"text/css\">
</head>
< type=\"text/ \"> /* 鼠标特效 ，点击出现富强民主文明和谐的字*/
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(); }); }); });
</ >
<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\" =\" (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\">×</button>
<h4 class=\"modal- \">注册</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\" />男 </label>
<label class=\"radio-inline\"><input type=\"radio\" />女 </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>
页面效果
![\"在这里插入图片描述\"](\"/images/csdn/1545122498p154Z5122r4N98.png\")
动态效果：
![\"在这里插入图片描述\"](\"/images/csdn/1545122499v1545b132j2499.jpeg\")
继续阅读与本文标签相同的文章
上一篇 :
汽车服务器ECU与以太网的高效连接
下一篇 :
南方电网积极探索区块链技术应用
-
曾经风靡一时的360安全卫士为什么如今没落了？
2026-05-18栏目： 教程
-
用C语言编程，如何节省存储空间？
2026-05-18栏目： 教程
-
三元牛奶，的优势在哪里？
2026-05-18栏目： 教程
-
常浏览“成人网站”要留意了，有这2种反应，请立马关闭
2026-05-18栏目： 教程
-
美国SpaceX公司计划向太空发射4.2万枚通信卫星
2026-05-18栏目： 教程