JQuery implements the DIV layer fade-in and fade-out drag effect method
This article mainly introduces jQuery's method of implementing the DIV layer fade-in and fade-out drag effect. It involves jQuery's common tips for mouse operations and is very useful. For more information, see
This article describes how jQuery implements the DIV layer fade-in and fade-out drag effect. Share it with you for your reference. The specific implementation method is as follows:
The Code is as follows:
<Html>
<Head>
<Title> jQuery implements the drag effect when the DIV layer fades in and out. </title>
<Style type = "text/css">
# Div2
{
Position: absolute;
Width: 400px;
Height: 300px;
Border: 1px solid #333333;
Background-color: #777788;
Text-align: center;
Line-height: 400%;
Font-size: 13px;
Left: 80px;
Top: 20px;
}
</Style>
<Script type = "text/javascript" language = "javascript" src = "/images/jquery. js"> </script>
<Script type = "text/javascript" language = "javascript">
Var _ move = false; // move the tag
Var _ x, _ y; // the relative position of the cursor in the upper left corner of the control.
$ (Document). ready (function (){
$ ("# Div2"). click (function (){
// Alert ("click"); // click (triggered after release)
}). Mousedown (function (e ){
_ Move = true;
_ X = e. pageX-parseInt ($ ("# div2" ).css ("left "));
_ Y = e. pageY-parseInt ($ ("# div2" ).css ("top "));
$ ("# Div2"). fadeTo (20, 0.25); // click it to start dragging and display it transparently
});
$ (Document). mousemove (function (e ){
If (_ move ){
Var x = e. pageX-_ x; // when moving, the absolute position in the upper left corner of the control is calculated based on the mouse position.
Var y = e. pageY-_ y;
$ ("# Div2" ).css ({top: y, left: x}); // new control position
}
}). Mouseup (function (){
_ Move = false;
$ ("# Div2"). fadeTo ("fast", 1); // stop moving with the mouse removed and restore to Opacity
});
});
</Script>
</Head>
<Body>
<H4> no effect is displayed. Please refresh this page. </H4>
<Div id = "div2"> drag and drop supported <br> if you cannot drag, Please refresh this page </div>
</Body>
</Html>
I hope this article will help you with jQuery programming.
