拖动登录框 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()方法,浏览器窗口事 ...
随机推荐
- Day06_31_接口(Interface)
java 接口(Interface) 接口和抽象类的区别? 子类只能通过extends关键字去继承抽象类(Abstract),子类(如果不是抽象类)则必须覆写抽象类之中的全部抽象方法(如果子类没有实现 ...
- 解决mysql You can't specify target table for update in FROM clause错误
mysql中You can't specify target table for update in FROM clause错误的意思是说,不能先select出同一表中的某些值,再update这个表( ...
- 技术面试问题汇总第001篇：猎豹移动反病毒工程师part1
我在2014年7月1日参加了猎豹移动(原金山网络)反病毒工程师的电话面试,但是很遗憾,由于我当时准备不足,加上自身水平不够,面试官向我提出的很多技术问题我都没能答出来(这里面既有基础类的问题,也有比较 ...
- hdu1337 水题
题意: 给你n个格子,每个格子初始状态都是1,然后这样变化1 2 3...n,2 4 6 ... n, 3 6 9 ....n ,...n;如果是1变成0,如果是0变成1,问经过n次变换之 ...
- hdu3400 两重三分
题意: 题意给你两个公路 A-B C-D 和三个速度V(ab) V(cd) 和 V(两条公路之间) 问你从A到D的最短时间是多少. 思路: 一开始暴力了其中的一条边,每次加0.01,另 ...
- RHCE7 认证之学习笔记
-------------------------------------------------------------------------------------------初始化:两台服务器 ...
- Caddy-基于go的微型serve用来做反向代理和Gateway
1.简单配置 2.go实现,直接一个二进制包,没依赖. 3.默认全站https 常用 反向代理,封装多端口gateway 使用:启动直接执行二进制文件 caddy 就行 根据输出信息 直接https: ...
- 【转】风控中的特征评价指标（三）——KS值
转自:https://zhuanlan.zhihu.com/p/79934510 风控业务背景 在风控中,我们常用KS指标来评估模型的区分度(discrimination).这也是风控模型同学最为追求 ...
- IO系列测试源码
//IO系列测试源码(需要自取) using System; using System.CodeDom; using System.Collections.Generic; using System. ...
- 逆向工程初步160个crackme-------1
放假在家学习的效率真的很低,看完看雪加密解密的前两章就迫不及待的找了几个crackme练习一下,顺便熟悉ollydbg的使用. 工具:exeinfope(查壳工具),ollydbg(2.10版) 1. ...