How to write the picture mobile code of html
This article mainly explains "how to write the picture mobile code of html". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to write the picture mobile code of html".
Html Picture Mobility (js)
* {padding: 0 margin: 0}
# open {
Width: 300px
Height: 300px
Background-color: brown
Position: relative
Border-radius:50%
}
# dv {
Width:100px
Height:100px
/ * background-color:blue;*/
Border-radius:50%
Position:relative
}
/ / Image moving method
Function ImgMove (ImgId) {
/ / get the element
Var dv = document.getElementById (ImgId)
Var x = 0
Var y = 0
Var l = 0
Var t = 0
Var isDown = false
/ / Mouse Down event
Dv.onmousedown = function (e) {
/ / obtain x and y coordinates
X = e.clientX
Y = e.clientY
/ / get the offset of the left and top
L = dv.offsetLeft
T = dv.offsetTop
/ / switch on
IsDown = true
/ / set the style
Dv.style.cursor = 'move'
}
/ / move the mouse
_ window.onmousemove = function (e) {
If (isDown = = false) {
Return
}
/ / get x and y
Var nx = e.clientX
Var ny = e.clientY
/ / calculate the left offset and the top offset after moving
Var nl = nx-(x-l)
Var nt = ny-(y-t)
Dv.style.left = nl + 'px'
Dv.style.top = nt + 'px'
Document.getElementById ("img-left") [xss_clean] = dv.style.left.toString ()
Document.getElementById ("img-top") [xss_clean] = dv.style.top.toString ()
}
/ / Mouse up event
Dv.onmouseup = function () {
/ / switch off
IsDown = false
Dv.style.cursor = 'default'
}
}
ImgMove ('dv')
Function ImgInto (num1Id) {
Var num1 = document.getElementById (num1Id)
Return num1.style.top.toString ()
}
At this point, I believe that everyone on the "html picture mobile code how to write" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
