一聚教程网：一个值得你收藏的教程网站

ps教程 | flash教程 | 路由器设置 | Jsp教程 | 加入收藏

PHP教程 Css教程 操作系统 数据库

首页 php教程 asp.net教程 css教程 网页制作 网页特效 手机开发 办公数码
当前位置：一聚教程网 > 网页制作 > jquery

推荐专题

最新下载

热门教程

jQuery如何实现遮罩层登录对话框的方法

时间：2016-12-30 编辑：简简单单 来源：一聚教程网

用户登录是许多网站必备的功能。有一种方式就是不管在网站的哪个页面，点击登录按钮就会弹出一个遮罩层，显示用户登录的对话框。这用方式比较灵活方便。而现在扫描二维码登录的方式也是很常见，例如QQ、微信、百度等。现在何问起推荐一个带二维码的登录弹出层，可拖动、关闭，有需要的朋友可以参考一下。

效果图：

代码如下：

 

jQuery带二维码登录窗口弹出层特效 - 何问起
css"href="css/normalize.css"/>
 .tc{display: block;padding: 1em 1.5em;border: 3px solid #fff;font-weight: 700;margin: 50px auto;background:#1d7db1;color: #fff;}
 .tc a:hover{opacity: 0.6;}
 a{color:blue}
点击登录
 
 
  用户登录
  
 
 
 
 
  
  手机扫描
  
  
   扫描二维码登录
  
  
  
  
   
   短信快捷登录
   
   
   
   
   
   遇到登录问题
   
   
   
   
  
  
   立即注册
  
  
  期待更多功能
  
 
 
javascript">
 //窗口效果
 //点击登录class为tc 显示
 $(".tc").click(function(){
 $("#gray").show();
 $("#popup").show();//查找ID为popup的DIV show()显示#gray
 tc_center();
 });
 //点击关闭按钮
 $("a.guanbi").click(function(){
 $("#gray").hide();
 $("#popup").hide();//查找ID为popup的DIV hide()隐藏
 })
 //窗口水平居中
 $(window).resize(function(){
 tc_center();
 });
 function tc_center(){
 var _top=($(window).height()-$(".popup").height())/2;
 var _left=($(window).width()-$(".popup").width())/2;
 
 $(".popup").css({top:_top,left:_left});
 }
 
 
 $(document).ready(function(){
 $(".top_nav").mousedown(function(e){
  $(this).css("cursor","move");//改变鼠标指针的形状
  var offset = $(this).offset();//DIV在页面的位置
  var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离
  var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离
  $(document).bind("mousemove",function(ev){ //绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
  $(".popup").stop();//加上这个之后
  var _x = ev.pageX - x;//获得X轴方向移动的值
  var _y = ev.pageY - y;//获得Y轴方向移动的值
  $(".popup").animate({left:_x+"px",top:_y+"px"},10);
  });
 });
 $(document).mouseup(function() {
  $(".popup").css("cursor","default");
  $(this).unbind("mousemove");
 });
 })

适用多种浏览器，如火狐，Chrome，Edge等。

来源：何问起 说明

相关文章

热门栏目

一聚教程网| 关于我们| 联系我们| 广告合作| 友情链接| 版权声明

copyRight@2007-2024 www.111COM.NET AII Right Reserved 苏ICP备17065847号-2

网站内容来自网络整理或网友投稿如有侵权行为请邮件:yijucomnet@163.com 我们24小时内处理