介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
,& lt; meta charset=癠TF-8"比;
,& lt; title>登录框鼠标拖拽效果& lt;/title>
,& lt; style 类型=拔谋?css"比;
,body {
背景:才能,url (“https://timgsa.baidu.com/timg?image&质量=80,大?b9999_10000&秒=1488778794834,di=e97c96dfe7860297d1968c30adc862a2& imgtype=0, src=http % % 2 f % 2 fpic1.5442.com % 3偶% 2 f2015 % 2 f0409 % 2 f01 % 2 f15.jpg % 2521960. jpg"), no-repeat top center # ffffff;
,,background-size: 100%;
,,填充:0;
保证金才能:0;
,,字体大小:12 px;
,,字体类型:“微软雅黑,,,无衬线;
,}
,.ui-dialog {
,,宽度:380 px;
位置:才能,绝对;
,,z - index: 9000;
,,:100 px;
,,左:100 px;
边境才能:1 px solid # d5d5d5;
,,背景颜色:# ffffff;/*才能显示:没有。*/,}
,.ui-dialog-title {
,,身高:48 px;
,,行高:48 px;
,,padding-left: 20 px;
,,颜色:# 535353;
,,字体大小:16 px;
,,背景颜色:# f5f5f5;
边界底部才能:1 px solid # efefef;
,,光标:移动;
,}
,.ui-dialog-title-closebutton {
,,宽度:16 px;
,,身高:16 px;
,,显示:inline-block;
位置:才能,绝对;
,,右:20 px;
,,颜色:# 000;
文字修饰才能:设置;
,}
,.ui-dialog-title-closebutton: hover {
,,颜色:# 4 ca8ff;
,}
,.ui-dialog-content {
,,填充:15 px 20 px;
,}
,.ui-dialog-pt15 {
,,padding-top: 15 px;
,}
,.ui-dialog-l40 {
,,身高:40像素;
,,行高:40像素;
text-align:,才能正确的;
,}
,.ui-dialog-input {
,,宽度:100%;
,,身高:40像素;
保证金才能:0;
,,填充:0;
边境才能:1 px solid # d5d5d5;
,,字体大小:16 px;
,,颜色:# c1c1c1;
,,indent: 25 px;
大纲:才能,没有;
,}
,.ui-dialog-input-username {
背景:才能,url (/input_username.png"“图像),no-repeat 2 px;
,}
,.ui-dialog-input-password {
背景:才能,url (/input_password.png"“图像),no-repeat 2 px;
,}
,.ui-dialog-submit {
,,宽度:100%;
,,身高:50 px;
背景:才能,# 3 b7ae3;
边界:才能,没有;
,,字体大小:16 px;
,,颜色:# ffffff;
大纲:才能,没有;
文字修饰才能:没有;
,,显示:块;
,,text-align:中心;
,,行高:50 px;
,}
,.ui-dialog-submit: hover {
背景:才能,# 3 f81b0;
,}
,.ui-mask {
,,宽度:100%;
,,身高:100%;
,,背景:# 000;
,,不透明度:0.4;
位置:才能,绝对;
,,:0;
,,左:0;
,,z - index: 8000;
,,显示:没有;
,}
,.link {
text-align:,才能正确的;
,,行高:20 px;
,,padding-right: 40像素;
,}
,& lt;/style>
& lt;/head>
& lt; body>
,& lt; div 类=皍i-dialog", id=癲ialog"比;
,& lt; div 类=皍i-dialog-title", id=癲ialogTitle"比;
登才能录
& lt;才能!——,右上角的关闭按钮,——比;
& lt;才能a href=癹avascript: hideDialog ();“, rel=癳xternal nofollow",类=皍i-dialog-title-closebutton"祝辞X
,& lt;/div>
,& lt; div 类=皍i-dialog-content"比;
& lt;才能div 类=皍i-dialog-l40 ui-dialog-pt15"比;
& lt;才能input 类=皍i-dialog-input ui-dialog-input-username",类型=癷nput",占位符=笆只?邮箱/用户名“,/比;
& lt;才能/div>
& lt;才能div 类=皍i-dialog-l40 ui-dialog-pt15"比;
& lt;才能input 类=皍i-dialog-input ui-dialog-input-password",类型=癷nput",占位符=懊苈搿?/比;
& lt;才能/div>
& lt;才能div 类=皍i-dialog-l40"比;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
小编给大家分享一下js如何实现登录框鼠标拖拽效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<>强效果图:
<强>代码如下:
