The example of this article describes the method of jquery implementation of the DIV layer fade and drag effect. Share to everyone for your reference. The implementation methods are as follows:
Copy Code code as follows:
<title>jquery implementation div layer fade in drag effect) </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 Tag
var _x,_y;//the relative position of the mouse from the upper-left corner of the control
$ (document). Ready (function () {
$ ("#div2"). Click (function () {
Alert ("click");//Click (trigger 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 to start dragging and transparent display
});
$ (document). MouseMove (function (e) {
if (_move) {
Var x=e.pagex-_x;//calculates the absolute position of the upper-left corner of the control based on the mouse position when moving
var y=e.pagey-_y;
$ ("#div2"). css ({top:y,left:x});//new position of control
}
}). MouseUp (function () {
_move=false;
$ ("#div2"). Fadeto ("Fast", 1);//stop moving and revert to opacity after releasing the mouse
});
});
</script>
<body>
<div id= "Div2" > Support drag <br> If you cannot drag, please refresh this page </div>
</body>
I hope this article will help you with your jquery programming.
