1.JS弹窗登录效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><!--GBK与UTF-8由公司服务器决定-->
<meta name="Generator" content="Webstorm">
<meta name="Author" content="奇客艺术">
<meta name="keyword" content="关键字">
<meta name="description" content="描述">
<title>JS弹窗登录效果</title>
<style type="text/css">
*{margin: 0;padding: 0;}
a{color: black;text-decoration: none;font-size: 14px;}
a:hover{text-decoration: underline}
#href{float: right;margin-right: 20px;}
#bg{background:rgba(0,0,0,0.5);/*背景颜色半透明opacity:0.5*/
width:100%;height: 100%;position: fixed;left: 0;top: 0;display: none}
#login{width: 600px;height: 350px;background: white;position: fixed;display: none}
#login #title{color: white;background: #ff9933;width: 100%;height: 50px;line-height: 50px;font-size: 24px;}
#login #title .close{font-size: 24px;color: white;float: right;margin-right: 15px;text-decoration: none}
#login p{margin-top: 35px;margin-left: 120px;}
#login form p input{width:260px;height:35px;border:1px solid #dddddd;font-size: 18px;}
#login form p .text,.psw{background: rgba(250,255,189,1);}
#login form p .sub{margin-left: 65px;background: url("images/2017-07-25_123222.png");}
</style>
</head>
<body>
<div id="href"><a class="dl" href="javascript:">登录</a>&nbsp;<a href="javascript:">注册</a></div><!--作为按钮,用js禁止，使点击不跳转也不刷新-->
<div id="bg"></div>
<div id="login">
<div id="title">用户登录<a class="close" href="javascript:">X</a></div>
<form action="javascript:" target="">
<p>用户名：<input type="text" class="text" maxlength="26"></p>
<p>密&nbsp;码：<input type="password" class="psw" maxlength="16"/></p>
<p><input type="submit" class="sub" value=""/></p>
</form>
</div>
<script src="js/jquery-3.2.1.js"></script>
<script>
playauto();//playauto()函数控制弹出框居中显示
function playauto() {
var _width=$(window).width();//获取浏览器窗口宽度
var _height=$(window).height();//获取高度
$(" #login").css({left:_width/2-300,top:_height/2-175});//使弹出框居中
}
//动态改变浏览器窗口时执行
$(window).resize(function () {
playauto();//浏览器窗口大小改变，则重新执行playauto()函数，使弹出框居中
} );
$(".dl").click(function () {//点击超链接按钮显示bg、login样式
playauto();//再次点击登陆按钮时，弹出框仍然处于居中位置
$("#bg").show();
$("#login").show();
})
$(".close").click(function () {//点击弹出框上的X按钮隐藏bg、login样式，即关闭弹出框
$("#bg").hide();
$("#login").hide();
});
$("#login").mousedown(function(e){
var x=e.clientX;//鼠标按下的X坐标
var y=e.clientY;//鼠标按下的Y坐标
var $left=$("#login").offset().left;//登陆框距离左边位置
var $top=$("#login").offset().top;//登陆框距离顶部位置
var l=x-$left;//点击的坐标点距离弹出框左边的距离
var t=y-$top;//点击的坐标点距离弹出框上边的距离
$(document).mousemove(function (e) {
var nx=e.clientX;
var ny=e.clientY;
var n_left=nx-l;//动态得到弹出框距离浏览器左边距离
var n_top=ny-t;//动态得到弹出框距离浏览器上边距离
$(" #login").css({left: n_left,top:n_top});
});
$(document).mouseup(function () {
$(document).unbind("mousemove");//解除鼠标移动事件
$(document).unbind("mouseup");
})
})
</script>
</body>
</html>

2.效果图

JS弹窗登陆效果.zip

js弹窗登录效果(源码)--web前端的更多相关文章

  1. spring security之 默认登录页源码跟踪

    spring security之 默认登录页源码跟踪 ​ 2021年的最后2个月,立个flag,要把Spring Security和Spring Security OAuth2的应用及主流程源码研究透 ...

  2. Shiro 登录认证源码详解

    Shiro 登录认证源码详解 Apache Shiro 是一个强大且灵活的 Java 开源安全框架,拥有登录认证.授权管理.企业级会话管理和加密等功能,相比 Spring Security 来说要更加 ...

  3. jQuery+css3实现极具创意的罗盘旋转时钟效果源码

    效果 HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  4. 50个Android开发人员必备UI效果源码[转载]

    50个Android开发人员必备UI效果源码[转载] http://blog.csdn.net/qq1059458376/article/details/8145497 Android 仿微信之主页面 ...

  5. 非常不错的KPTimePicker效果源码

    非常不错的KPTimePicker效果源码,实现特殊设计的时间选择器.用户选择时间是通过滑动一个圆环,并且屏幕的颜色会随着时间点的推移变暗或者变亮,喜欢的朋友可以下载研究一下吧. 源码大家可以到源码天 ...

  6. [转载] 50个Android开发人员必备UI效果源码

    好东西,多学习! Android 仿微信之主页面实现篇Android 仿微信之界面导航篇Android 高仿QQ 好友分组列表Android 高仿QQ 界面滑动效果Android 高仿QQ 登陆界面A ...

  7. diff.js 列表对比算法 源码分析

    diff.js列表对比算法 源码分析 npm上的代码可以查看 (https://www.npmjs.com/package/list-diff2) 源码如下: /** * * @param {Arra ...

  8. Delphi制作QQ自动登录器源码

    Delphi制作QQ自动登录器源码  http://www.cnblogs.com/sunsoft/archive/2011/02/25/1964967.html 以TM2009为例,检查了一下,未登 ...

  9. 推荐！Html5精品效果源码分享

    一直在看别人的汇总,看到了一些不错的关于 HTML5内容的源码,我也汇总下分享出来,好东西需要共享!希望可以帮到需要的朋友. 1.劲爆分享:HTML5动感的火焰燃烧动画特效 这又是一款基于HTML5的 ...

随机推荐

  1. C++ 关于字符串总结（持续更新）

    1.find_first_of size_type find_first_of( const basic_string &str, size_type index = 0 ); size_ty ...

  2. Bootstrap+Vue.js 练习入门一

    一. 效果如下图所示,输入用户名和年龄,点击添加,数据会自动添加到下面的用户信息表内.当没有数据时,用户信息表显示:暂无数据……,当有数据时,显示 删除全部 按钮,这里为了方便快捷,我没有做删除按钮的 ...

  3. Zabbix的网络发现

      Zabbix的网络发现 Zabbix的网络发现功能,可以让我们发现网络中的主机或者服务,并在发现该设备后做出相应的操作; 它可以用HTTP.ICMP.SSH.LDAP.TCP.SNMP.Telne ...

  4. 阿里云学习之IOT物联网套件（配置篇）

    文档时间:2018.-1-24 首注:此文章是参照以下文章的整合与补充: https://bbs.aliyun.com/read/309106.html?amp;displayMode=1&p ...

  5. python数据分析工具包（3）——matplotlib（一）

    前两篇文章简单介绍了科学计算Numpy的一些常用方法,还有一些其他内容,会在后面的实例中学习.下面介绍另一个模块--Matplotlib. Matplotlib是一个Python 2D绘图库,试图让复 ...

  6. iOS 使用NTP时间同步服务

    githup上有相关开源库, ios-ntp 导入即可使用 NetworkClock *netClock = [NetworkClock sharedNetworkClock]; netClock.n ...

  7. ApiManager搭建

    piManager 作为一个Api 文档管理工具,而且是开源的,作为开发者使用,还是蛮不错的,整体的界面也很友好,下面就来看一下吧. 下面就来介绍下ApiManager在centos 6下的搭建过程吧 ...

  8. angularjs 服务详解

    一.服务 服务提供了一种能在应用的整改生命周期内保持数据的方法,它能够在控制器之间进行通信,并保持数据的一致性. 1.服务是一个单例对象,在每个应用中只会被实例化一次(被$injector): 2.服 ...

  9. 通过实例介绍持续集成的应用--基于Jenkins

    1.测试工程师为什么要掌握持续集成 一个程序员如果想发布一个产品,他需要编码.编译.测试,发布的过程.对于一个企业来说,如果也想发布一个产品的话,同样的也是需要上述的过程,区别在于企业要发布的产品的需 ...

  10. cassandra 鉴权

    1. 修改cassandra.yaml配置文件.启用用户密码登录形式. authenticator: PasswordAuthenticator authorizer: CassandraAuthor ...