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

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!

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.