小程序直播署理加盟_js完成登录框鼠标拖拽效果

  • 栏目:行业动态 时间:2021-01-12 13:11 分享新闻到:
<返回列表

js实现登录框鼠标拖拽效果       本文主要介绍了js实现登录框鼠标拖拽效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧

效果图:

代码如下:

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title 登录框鼠标拖拽效果 /title 
 style type="text/css" 
 body {
 background: url("timg image quality=80 size=b9999_10000 sec=34 di=e97c96dfe7860297d1968c30adc862a2 imgtype=0 src=http%3A%2F%%3A82%2F2015%2F0409%2F01%2F15.jpg%2521960.jpg") no-repeat top center #ffffff;
 background-size: 100%;
 padding: 0;
 margin: 0;
 font-size: 12px;
 font-family: "微软雅黑", sans-serif;
 .ui-dialog {
 width: 380px;
 position: absolute;
 z-index: 9000;
 top: 100px;
 left: 100px;
 border: 1px solid #d5d5d5;
 background-color: #ffffff;
 /*display: none;*/
 .ui-dialog-title {
 height: 48px;
 line-height: 48px;
 padding-left: 20px;
 color: #535353;
 font-size: 16px;
 background-color: #f5f5f5;
 border-bottom: 1px solid #efefef;
 cursor: move;
 .ui-dialog-title-closebutton {
 width: 16px;
 height: 16px;
 display: inline-block;
 position: absolute;
 right: 20px;
 color: #000;
 text-decoration: unset;
 .ui-dialog-title-closebutton:hover {
 color: #4ca8ff;
 .ui-dialog-content {
 padding: 15px 20px;
 .ui-dialog-pt15 {
 padding-top: 15px;
 .ui-dialog-l40 {
 height: 40px;
 line-height: 40px;
 text-align: right;
 .ui-dialog-input {
 width: 100%;
 height: 40px;
 margin: 0;
 padding: 0;
 border:1px solid #d5d5d5;
 font-size: 16px;
 color: #c1c1c1;
 text-indent: 25px;
 outline: none;
 .ui-dialog-input-username {
 background: url("images/input_username.png") no-repeat 2px;
 .ui-dialog-input-password {
 background: url("images/input_password.png") no-repeat 2px;
 .ui-dialog-submit {
 width: 100%;
 height: 50px;
 background: #3b7ae3;
 border: none;
 font-size: 16px;
 color: #ffffff;
 outline: none;
 text-decoration: none;
 display: block;
 text-align: center;
 line-height: 50px;
 .ui-dialog-submit:hover {
 background: #3f81b0;
 .ui-mask {
 width: 100%;
 height: 100%;
 background: #000;
 opacity: 0.4;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 8000;
 display: none;
 .link {
 text-align: right;
 line-height: 20px;
 padding-right: 40px;
 /style 
 /head 
 body 
 div id="dialog" 
 div id="dialogTitle" 
 !-- 右上角的关闭按钮 -- 
 a href="javascript:hideDialog();" rel="external nofollow" X /a 
 /div 
 div 
 div 
 input type="input" placeholder="手机/邮箱/用户名" / 
 /div 
 div 
 input type="input" placeholder="密码" / 
 /div 
 div 
 a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" 忘记密码 /a 
 /div 
 div 
 a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" 登录 /a 
 /div 
 div 
 a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" 立即注册 /a 
 /div 
 /div 
 /div 
 div id="mask" /div 
 div 
 a href="javascript:showDialog();" rel="external nofollow" 登录 /a 
 /div 
 script type="text/javascript" 
 // 获取元素对象
 function g(id) {
 return document.getElementById(id);
 // 自动居中函数 -- 登录浮层
 // el {Element}
 function autoCenter(el) {
 // 获得可视区域的宽和高
 var bodyW = document.documentElement.clientWidth;
 var bodyH = document.documentElement.clientHeight;
 // 获得元素 el 的宽和高
 var elW = el.offsetWidth;
 var elH = el.offsetHeight;
 // 设置元素的 style 样式
 el.style.left = (bodyW - elW) / 2 + 'px';
 el.style.top = (bodyH - elH) / 2 + 'px';
 // 扩展元素到整个可视区域 -- 遮罩层
 // el {Element}
 function fillToBody(el) {
 // 将元素的宽和高设置的和可视区域一样
 el.style.width = document.documentElement.clientWidth + 'px';
 el.style.height = document.documentElement.clientHeight + 'px';
 // 定义全局变量
 var mouseOffsetX = 0;
 var mouseOffsetY = 0;
 var isDragging = false;
 // 鼠标事件1 -- 在标题栏上按下
 // 计算鼠标相对拖拽元素的的左上角的坐标, 并且标记元素为可拖动
 g('dialogTitle').addEventListener('mousedown', function(e) {
 var e = e || window.event;
 // 用鼠标按下时的坐标减去 dialog 的左上角坐标
 mouseOffsetX = e.pageX - g('dialog').offsetLeft;
 mouseOffsetY = e.pageY - g('dialog').offsetTop;
 isDragging = true;
 // 鼠标事件2 -- 鼠标移动
 document.onmousemove = function(e) {
 var e = e || window.event;
 // 鼠标当前位置
 var mouseX = e.pageX;
 var mouseY = e.pageY;
 // 鼠标从单击时至当前时刻移动的距离
 var moveX = 0;
 var moveY = 0;
 if (isDragging === true) {
 moveX = mouseX - mouseOffsetX;
 moveY = mouseY - mouseOffsetY;
 // 范围限定
 // moveX 0 且 moveX (页面最大宽度 - 浮层宽度)
 // moveY 0 且 moveY (页面最大宽度 - 浮层高度)
 var pageWidth = document.documentElement.clientWidth;
 var pageHeight = document.documentElement.clientHeight;
 // 登录浮层的宽、高
 var dialogWidth = g('dialog').offsetWidth;
 var dialogHeight = g('dialog').offsetHeight;
 var maxX = pageWidth - dialogWidth;
 var maxY = pageHeight - dialogHeight;
 moveX = Math.min(maxX, Math.max(0, moveX));
 moveY = Math.min(maxY, Math.max(0, moveY));
 g('dialog').style.left = moveX + 'px';
 g('dialog').style.top = moveY + 'px';
 // 鼠标事件3 -- 鼠标松开
 document.onmouseup = function() {
 isDragging = false;
 // 展现登录浮层
 function showDialog() {
 g('dialog').style.display = 'block';
 g('mask').style.display = 'block';
 autoCenter(g('dialog'));
 fillToBody(g('mask'));
 // 隐藏登录浮层
 function hideDialog() {
 g('dialog').style.display = 'none';
 g('mask').style.display = 'none';
 window.onresize = function() {
 autoCenter(g('dialog'));
 fillToBody(g('mask'));
 showDialog();
 autoCenter(g('dialog'));
 /script 
 /body 
 /html 

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!


分享新闻到:

更多阅读

小程序直播署理加盟_js完成登录框鼠标拖

行业动态 2021-01-12
js完成登陆框电脑鼠标拖动实际效果 文中关键详细介绍了js完成登陆框电脑鼠标拖动实际...
查看全文

小程序制作工具_Javascript完成页面滚动时

行业动态 2021-01-12
Javascript完成网页页面翻转时导航栏智能化精准定位 普遍的开发设计网页页面中将会会出...
查看全文

广西企业建站公司引荐-重庆护肤品企业官

行业动态 2021-01-12
分号互连出示这一套护肤品企业网站模板,此套模版基本色应用淡黄色,设计风格选用简洁,...
查看全文
返回全部新闻


区域站点: 南丰县长图制作   南宫市在线编辑图片   囊谦县图片加文字怎么制作   南和县怎样抠图   南华县长图制作   南江县在线编辑图片   南京市图片加文字怎么制作   南靖县怎样抠图   南康市长图制作   南乐县在线编辑图片   南陵县图片加文字怎么制作   南宁市怎样抠图   南平市长图制作   南皮县在线编辑图片   南市区图片加文字怎么制作   南通市怎样抠图   南投县长图制作   南雄市在线编辑图片   南溪县图片加文字怎么制作   南阳市怎样抠图   南漳县长图制作   南召县在线编辑图片   南郑县图片加文字怎么制作   那坡县怎样抠图   那曲县长图制作   纳雍县在线编辑图片   讷河市图片加文字怎么制作   内黄县怎样抠图   内江市长图制作   内丘县在线编辑图片   内乡县图片加文字怎么制作   嫩江市怎样抠图   聂荣县长图制作   尼玛县在线编辑图片   尼木县图片加文字怎么制作   宁安市怎样抠图   宁波市长图制作   宁城县在线编辑图片   宁德市图片加文字怎么制作   宁都县怎样抠图   宁国市长图制作   宁海县在线编辑图片   宁化县图片加文字怎么制作   宁晋县怎样抠图   宁陵县长图制作   宁明县在线编辑图片   宁南县图片加文字怎么制作   宁强县怎样抠图   宁陕县长图制作   宁武县在线编辑图片   宁乡市图片加文字怎么制作   宁阳县怎样抠图   宁远县长图制作   农安县在线编辑图片   磐安县图片加文字怎么制作   盘锦市怎样抠图   盘山县长图制作   磐石市在线编辑图片   盘州市图片加文字怎么制作   蓬安县怎样抠图   澎湖县长图制作   蓬莱市在线编辑图片   彭山县图片加文字怎么制作   蓬溪县怎样抠图   彭阳县长图制作   彭泽县在线编辑图片   彭州市图片加文字怎么制作   偏关县怎样抠图   平安县长图制作   平昌县在线编辑图片   平定县图片加文字怎么制作   屏东县怎样抠图   平度市长图制作   平果县在线编辑图片   平和县图片加文字怎么制作   平湖市怎样抠图   平江县长图制作   平乐县在线编辑图片   平凉市图片加文字怎么制作   平利县怎样抠图   平罗县长图制作   平陆县在线编辑图片   屏南县图片加文字怎么制作   平泉市怎样抠图   屏山县长图制作   平顺县在线编辑图片   平塘县图片加文字怎么制作   平潭县怎样抠图   平武县长图制作   萍乡市在线编辑图片   平乡县图片加文字怎么制作   平阳县怎样抠图   平遥县长图制作   平阴县在线编辑图片   平邑县图片加文字怎么制作   平远县怎样抠图   平舆县长图制作   皮山县在线编辑图片   普安县图片加文字怎么制作   浦北县怎样抠图   浦城县长图制作   普洱市在线编辑图片   普格县图片加文字怎么制作   浦江县怎样抠图   普兰县长图制作   普宁市在线编辑图片   莆田市图片加文字怎么制作   迁安市怎样抠图   乾安县长图制作   潜江市在线编辑图片   潜山市图片加文字怎么制作  

友情链接: 贴图软件 在线免费抠图 制作图片加文字的 在线一键抠图 手机版

Copyright © 2002-2020 图片加文字怎么制作_怎样抠图_长图制作_在线编辑图片_如何制作水印图片logo 版权所有 (网站地图) 备案号:粤ICP备10235580号