Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "JavaScript how to achieve the mouse drag effect of the login box". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to achieve the mouse drag effect of the login box with JavaScript" can help you solve your doubts.

Mouse drag effect of login box

Body {

Background: url ("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488778794834&di=e97c96dfe7860297d1968c30adc862a2&imgtype=0&src=http%3A%2F%2Fpic1.5442.com%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: Microsoft Yahei, 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

}

Log in

X

Forget the password.

Log in

Immediate registration

Log in

/ / get element object

Function g (id) {

Return document.getElementById (id)

}

/ / Auto-centering function-log in to the floating layer

/ / el {Element}

Function autoCenter (el) {

/ / obtain the width and height of the visual area

Var bodyW = document.documentElement.clientWidth

Var bodyH = document.documentElement.clientHeight

/ / get the width and height of the element el

Var elW = el.offsetWidth

Var elH = el.offsetHeight

/ / set the style style of the element

El.style.left = (bodyW-elW) / 2 + 'px'

El.style.top = (bodyH-elH) / 2 + 'px'

}

/ / extend the element to the entire visual area-the mask layer

/ / el {Element}

Function fillToBody (el) {

/ / set the width and height of the element to the same as the visual area

El.style.width = document.documentElement.clientWidth + 'px'

El.style.height = document.documentElement.clientHeight + 'px'

}

/ / define global variables

Var mouseOffsetX = 0

Var mouseOffsetY = 0

Var isDragging = false

/ / Mouse event 1-- Press on the title bar

/ / calculate the coordinates of the mouse relative to the upper-left corner of the drag element, and the tag element is draggable

G ('dialogTitle'). AddEventListener (' mousedown', function (e) {

Var e = e | | window.event

/ / subtract the coordinates of the upper left corner of the dialog when pressed with the mouse

MouseOffsetX = e.pageX-g ('dialog'). OffsetLeft

MouseOffsetY = e.pageY-g ('dialog'). OffsetTop

IsDragging = true

});

/ / Mouse event 2-- Mouse movement

_ document.onmousemove = function (e) {

Var e = e | | window.event

/ / current position of the mouse

Var mouseX = e.pageX

Var mouseY = e.pageY

/ / the distance the mouse moves from the time of click to the current moment

Var moveX = 0

Var moveY = 0

If (isDragging = true) {

MoveX = mouseX-mouseOffsetX

MoveY = mouseY-mouseOffsetY

/ / scope limit

/ / moveX > 0 and moveX

< (页面最大宽度 - 浮层宽度) // moveY >

0 and moveY < (maximum width of page-height of floating layer)

Var pageWidth = document.documentElement.clientWidth

Var pageHeight = document.documentElement.clientHeight

/ / log in to the width and height of the floating layer

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'

}

}

/ / Mouse event 3-- Mouse release

_ document.onmouseup = function () {

IsDragging = false

}

/ / display login floating layer

Function showDialog () {

G ('dialog'). Style.display =' block'

G ('mask'). Style.display =' block'

AutoCenter (g ('dialog'))

FillToBody (g ('mask'))

}

/ / hide login floating layer

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'))

After reading this, the article "how to achieve the mouse drag effect in the login box with JavaScript" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.