JavaScript Drain Operation of Objects

xiaoxiao2021-04-07  393

The code to be dragged by a mouse, I feel very interesting.

This example needs to be mastered, capture the mouse, get the mouse position (equivalent to the object), release the mouse capture, the scroll distance of the document.

1. setCapture () Sets the mouse capture of the object belonging to the current document.

2. Event.OffsetX Sets or gets the X coordinate of the mouse pointer position relative to the object that triggered the event.

3. Event.offsety settings or get the Y coordinate of the mouse pointer position relative to the object of the trigger event.

4. ReleaseCapture () Releases the mouse capture of the object in the current document.

5. ScrollLeft setting or get the distance between the left boundaries of the object and the top of the window.

6. ScrollTop setting or get the distance between the top of the object, the topmost of the object.

7. with the default object for one or more statements.

8. Event.x, Event.y Sets or gets the X, Y coordinate of the mouse pointer relative to the window object.

DOCTYPE HTML PUBLIC "- // w3c // DTD XHTML 1.0 Transitional // En" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"

>

<

HTML

XMLNS

= "http://www.w3.org/1999/xhtml"

XML: LANG

= "en"

LANG

= "en"

>

<

HEAD

>

<

Title

>

Title

>

<

Style

Type

= "Text / CSS"

>

# l1

{

Position

:

Absolute

;

TOP

:

100px

;

Left

:

100px

;

Width

:

100px

;

HEIGHT

:

150px

;

Border

:

1px solid #ccc

;

BACKGROUND

:

# f00

;

Z-Index

:

1

}

# l2

{

Position

:

Absolute

;

TOP

:

150px

;

Left

:

150px

;

Width

:

100px

;

HEIGHT

:

150px

;

Border

:

1px solid # 666

;

BACKGROUND

:

# 0f0

;

Z-Index

:

2

}

# l3

{

Position

:

Absolute

;

TOP

:

200px

;

Left

:

200px

;

Width

:

100px

;

HEIGHT

:

150px

;

Border

:

1px solid # 999

;

BACKGROUND

:

# 00F

;

Z-Index

:

3

;

}

Style

>

<

Script

Type

= "Text / JavaScript"

>

VAR

X, Y, Z, Down

=

False

, OBJ;

FUNCTION

INIT () {OBJ

=

Event.srcelement;

//

Get focus object

Obj.setcapture ();

//

Set the mouse capture

z

=

Obj.Style.zindex;

//

Get the original Z-axis position

Obj.Style.zindex

=

100

;

//

Set in the top

x

=

Event.offsetx; //

Get x positions with objects of mouse pointers relative to trigger events

y

=

Event.offsety;

//

Get the Y position of the mouse pointer relative to the object of the trigger event

Down

=

True

;

//

Set the mouse state to press the status

}

FUNCTION

Moveit () {

IF

(Down

&&&&

Event.srcelement

==

Obj) {

WITH

(Obj.style) {PosleFT

=

Document.body.scrollleft

Event.x

-

X; Postop

=

Document.body.scrolltop

Event.y

-

Y;}}}

FUNCTION

Stopdrag () {Down

=

False

Obj.Style.zindex

=

z; OBJ.RELEASECAPTURE ();

Script

>

HEAD

>

<

Body

>

<

Div

id

= "L1"

OnMouseDown

= "init ()"

OnMousemove

= "Moveit ()"

OnMouseup

= "stopdrag ()"

>

Level1

Div

>

<

Div

id

= "L2"

OnMouseDown

= "init ()"

OnMousemove

= "Moveit ()"

OnMouseup

= "stopdrag ()"

>

Level2

Div

>

<

Div

id

= "L3"

OnMouseDown

= "init ()"

OnMousemove

= "Moveit ()"

OnMouseup

= "stopdrag ()"

>

Level3

Div

>

Body

>

HTML

>

转载请注明原文地址:https://www.9cbs.com/read-132631.html

New Post(0)