拖动登录框 HTML+CSS+js
先上效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖动登录框</title>
<Style>
* {
margin: 0px;
padding: 0px;
}
a {
color: black;
text-decoration: none;
}
.one {
width: 100%;
text-align: center;
height: 30px;
font-size: 24px;
line-height: 30px;
}
.login {
display: none;
position: fixed;
width: 512px;
height: 280px;
border: #ebebeb solid 1px;
left: 50%;
top: 50%;
background: #ffffff;
box-shadow: 0px 0px 20px #ddd;
z-index: 999;
transform: translate(-50%,-50%);
}
.title {
position: relative;
height: 40px;
width: 100%;
line-height: 40px;
font-size: 18px;
text-align: center;
cursor: move;
}
.title a{
position: absolute;
font-size: 12px;
top: -15px;
right: -15px;
width: 30px;
height: 30px;
border: 1px solid #666;
border-radius: 15px;
text-align: center;
line-height: 30px;
background-color: white;
}
.con {
margin-top: 20px;
}
.login-input input {
float: left;
line-height: 35px;
height: 35px;
width: 350px;
border: #ebebeb solid 1px;
text-indent: 5px;
}
.login-input {
overflow: hidden;
margin: 0px 0px 20px 0px;
}
.login-input label {
float: left;
width: 90px;
padding-right: 10px;
text-align: right;
line-height: 35px;
height: 35px;
font-size: 14px;
}
.bg {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, .3);
}
.button a {
display: block;
}
.button {
width: 50%;
margin: 30px auto 0px auto;
line-height: 40px;
font-size: 14px;
border: #ebebeb 1px solid;
text-align: center;
}
</Style>
</head>
<body>
<div class="one"><a href="javascript:;">点击，弹出登录框</a></div>
<div class="login">
<div class="title">登录会员
<span><a href="javascript:;" id="close">关闭</a></span>
</div>
<div class="con">
<div class="login-input">
<label>用户名:</label>
<input type="text" placeholder="请输入用户名" name="" id="name">
</div>
<div class="login-input">
<label>登录密码:</label>
<input type="text" placeholder="请输入登录密码" name="" id="code">
</div>
<div class="button">
<a href="javascript:;">登录会员</a>
</div>
</div>
</div>
<div class="bg"></div>
<script>
var one = document.querySelector('.one');
var login = document.querySelector('.login');
var bg = document.querySelector('.bg');
//点击弹出背景和登录框
one.addEventListener('click',function(){
login.style.display = 'block';
bg.style.display = 'block';
})
//点击关闭，隐藏背景和登录框
var close = document.querySelector('#close');
close.addEventListener('click',function(){
login.style.display = 'none';
bg.style.display = 'none';
})
var title = document.querySelector('.title');
//拖拽事件
title.addEventListener('mousedown',function(e){
//鼠标按下时，获取鼠标在盒子内的坐标
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
console.log(x);
console.log(y);
//鼠标移动时，把鼠标在页面中的坐标减去鼠标在盒子内的坐标就是left和top值
document.addEventListener('mousemove',move);
function move(e){
login.style.left = e.pageX - x +'px';//返回值不带单位
login.style.top = e.pageY - y + 'px';
}
//鼠标弹起，事件移除
document.addEventListener('mouseup',function(){
document.removeEventListener('mousemove',move);
})
})
</script>
</body>
</html>
拖动登录框 HTML+CSS+js的更多相关文章
- js 拟写登录页 可以拖动登录框
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 动态滑动登陆框-Html+Css+Js
动态滑动登陆框 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
- JavaScript--结合CSS变形、缩放能拖拽的登录框
上例图: 代码块: <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- HTML和CSS实现的透明登录框效果
实现代码 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- #3使用html+css+js制作网页 制作登录网页
#3使用html+css+js制作网页 制作登录网页 本系列链接 2制作登录网页 2.1 准备 2.1.1 创建文件夹 2.1.2 创建主文件 2.2 html部分 2.2.1 网站信息 2.2.2 ...
- phpmyadmin 4.x 版本无法看到登录框的处理
由于个人dreamhost即将到期问题,购买了一台VPS. 配置了一个CentOS 6.4 Linux 服务器,用Nginx+php-fpm搭建的环境. 这些都是废话,下面是重点: 当搭建后配置php ...
- JQuery+CSS3实现封装弹出登录框效果
原文:JQuery+CSS3实现封装弹出登录框效果 上次发了一篇使用Javascript来实现弹出层的效果,这次刚好用了JQuery来实现,所以顺便记录一下: 因为这次使用了Bootstrap来做一个 ...
- 第一百三十三节，JavaScript，封装库--弹出登录框
JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...
随机推荐
- Redis——急速安装并设置自启（CentOS）
现状 对于开发人员来说,部署服务器环境并不是一个高频操作.所以就导致绝大部分开发人员不会花太多时间去学习记忆,而是直接百度(有一些同学可能连链接都懒得收藏).所以到了部署环境的时候就头疼,甚至是抗拒. ...
- js的13种继承
js继承的13种方式 也可以说只有12种,ES6的extend 也是12种方法之一-寄生继承的语法糖 1.原型链法 代码示例 Child.prototype = new Parent(); 所属模式: ...
- 一图看懂 ASP.NET Core 中的服务生命周期
翻译自 Waqas Anwar 2020年11月8日的文章 <ASP.NET Core Service Lifetimes (Infographic)> [1] ASP.NET Core ...
- Java集合知识总结
集合概述 集合:集合是Java中提供的一种容器,可以用来存储多个数据. 集合和数组的区别: (1)数组长度的是固定的,集合的长度是可变的. (2)数组中存储的都是同一类型的元素.集合存储的都是对象,对 ...
- jquery 和 bootstrap 的使用
jquery 和 bootstrap 的使用参考 bootstrap简介 jqury在线手册 jquery快速入门教程 jQuery 核心函数和方法 jQuery API jQuery CDN jQu ...
- Tomcat管理弱口令页面Getshell
目录 弱口令Getshell 利用Burpsuite对tomcat账号密码进行爆破 弱口令Getshell Tomcat安装完成后会有如下页面,点击该页面的 Manager App 处会弹出输入用户名 ...
- PHP Proxy 负载均衡技术
<?php $whitelistPatterns = array( ); $forceCORS = false; $anonymize = true; $startURL = "&qu ...
- Andrew Ng机器学习算法入门(九):逻辑回归
逻辑回归 先前所讲的线性回归主要是一个预测问题,根据已知的数据去预测接下来的情况.线性回归中的房价的例子就很好地说明了这个问题. 然后在现实世界中,很多问题不是预测问题而是一个分类问题. 如邮件是否为 ...
- (Py练习)日期格式转换
#将日期转换为易读的格式 #使用dateuti包 from dateutil import parser dt = parser.parse("Mar 6 2019 12:00AM" ...
- phpstorm 实现分屏显示