Home > Developer > Web Develop
Simple implementation of the covering layer with the left and right mouse effect ------- Day75, into ------- day75
Yesterday, we realized how to determine from which side of the div the mouse is inserted. It is much easier to drag the mouse into the part. We use javascript to achieve the drag effect.
Let's review yesterday's mouse judgment:
Html section:
<body><div style="margin-left:300px;margin-top:300px;width:400px;height:400px;background:cyan;" id="test"></div> </body>Js section:
Window. onload = function () {var left = 0; // move the cursor to the left of the div. var top = 0; // move the cursor to the value above the div var right = 0; // move the cursor to the value on the right of the div var bottom = 0; // move the cursor to the bottom of the div with the value var width = 10; // The initial width of the hidden layer var height = 10; // The initial height of the hidden layer var marginLeft; // The initial position var marginRight of the hidden layer; // The initial position var marginTop of the hidden layer; // specifies the initial position of the covering layer. var marginBottom; // specifies the initial position of the covering layer. var arr = new Array (); var check = true; // specifies whether the mouse is first inserted into divtest. addEventListener ("mouseover", function (event) {var t Est = document. getElementById ("test"); if (check) {check = false; var x = event. clientX; var y = event. clientY; left = x-test.offsetLeft; top = y-test.offsetTop; right = test. offsetLeft + test. offsetWidth-x; bottom = test. offsetTop + test. offsetHeight-y; arr. push (top); arr. push (right); arr. push (bottom); arr. push (left); var least = findLeast (arr); // determine the minimum value here}) var findLeast = function ([a1, a2, a3, a4]) {var a; var n; a = a1> a2? A2: a1; n = a = a2? 2:1; a = a3>? A: a3; n = a = a3? 3: n; a = a4>? A: a4; n = a = a4? 4: n; return n ;}Then we implement the following operations ):
The comparison on the left is relatively simple. You can set the initial position to be the same as that on the div, and then the width increases constantly. Let's look at the Code:
If (least = 4) {newDiv. style. left = test. offsetLeft + "px"; newDiv. style. top = test. offsetTop + "px"; // set the initial position newDiv. style. height = test. offsetHeight + "px"; newDiv. style. width = width + "px"; // you can specify the initial state document of the covering layer. body. appendChild (newDiv); var changeWidth = setInterval (function () {if (newDiv. offsetWidth> = test. offsetWidth) {alert (10); clearInterval (changeWidth);} else {width = width + 10; // here is the key to change newDiv. style. width = width + "px"; }}, 100 );}The right side is a little more troublesome. We can only make the initial position of it smaller, but its width is becoming larger, which is the same as that on the left, let's look at the Code:
If (least = 2) {newDiv. style. left = test. offsetLeft + test. offsetWidth + "px"; newDiv. style. top = test. offsetTop + "px"; // set the initial position newDiv. style. height = test. offsetHeight + "px"; newDiv. style. width = width + "px"; // set the initial state of the covering layer document. body. appendChild (newDiv); marginLeft = test. offsetLeft + test. offsetWidth; var changeWidth = setInterval (function () {if (newDiv. offsetLeft <= test. offsetLeft) {alert (10); clearInterval (changeWidth);} else {marginLeft = marginLeft-10; // when the initial position is decreasing, the width is indeed increasing with width = width + 10; newDiv. style. width = width + "px"; newDiv. style. left = marginLeft + "px" ;}, 100 );}}So what else is missing? By the way, where does newDiv come from?
var getOneDiv=function(){var div=document.createElement("div");div.style.position="absolute";div.style.display="block";div.style.zIndex="10";div.style.background="yellow";return div;}Used to generate a new div, And we
After var least = findLeast (arr); the determination is complete, var newDiv = getOneDiv () can be generated ();
This way, we have implemented the drag-and-drop operations. The upper and lower steps are similar. I will not pass the code, so the next step is the removal effect, but today it is too late, I am also a little sleepy. Since I started to work on Saturday and Sunday, it is a little difficult to get things done, and I have no idea how to go to bed.
The simplest way is to put all the things to be masked into a MC, and then write the code to the frame in that MC.
This. createEmptyMovieClip ("black", this. getNextHighestDepth ());
With (this. black ){
BeginGradientFill ("radial", [0x000000, 0x000000, 0x000000], [0, 0,100], [0, 30,
120], {matrixType: "box", x:-50, y:-50, w: 100, h: 100, r: 0 });
MoveTo (-Stage. width,-Stage. height );
LineTo (Stage. width,-Stage. height );
LineTo (Stage. width, Stage. height );
LineTo (-Stage. width, Stage. height );
LineTo (-Stage. width,-Stage. height );
EndFill ();
StartDrag (true );
}
How can I use jquery to change the style of the li border and the button in li after the following effect is clicked?
Bind the mouse hover event to all li tags, and do two things in the event
1. Restore the changed li label to the default style.
2. Change the style of the current tag
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
