Use the div to implement the marquee effect.
The code is as follows
1<! DOCTYPE html>234<title>myCanvasTest</title>5<style type= "Text/css" >6 #selection {7 border:3px red Solid;8 Display:none;9 Position:absolute;Ten } One*{ A Cursor:crosshair; - } -</style> the -<body> -<div id= "Selection" ></div> -</body> +<script type= "Text/javascript" > - varSelection//Storage coordinate amount (convenient for use) +Flag =false,//as a move marker if the mouse is clicked ASelectiondiv = document.getElementById ("Selection");//Get marquee Div Object at - //Initializing coordinate objects - functioninit () { -Selection = { -top:0, -left:0, inwidth:0, -height:0 to }; + } - the //mouse down, record coordinates * functionsetlocation (x, y) { $Selection.left =x;Panax NotoginsengSelection.top =y; - } the + //Mouse movement calculation distance deposit width High A functionmovelocation (x, y) { theSelection.width = Selection.left-x; +Selection.height = Selection.top-y; - Moveit (); $ } $ - //Update div coordinate dimension information - functionMoveit () { the Console.log (selection); - //when the height width is less than 0, drag-and-drop is a positive value, such as less than 0 indicates the drag is in the opposite direction. To recalculate top and left guaranteed drag effectsWuyiSelectionDiv.style.top = (Selection.height < 0?) the Selection.top: -Selection.top-selection.height) Wu+ "px"; -SelectionDiv.style.left = (Selection.width < 0?) About Selection.left: $Selection.left-selection.width) -+ "px"; - //The Math.Abs () method returns the absolute value -SelectionDiv.style.width =Math.Abs (selection.width) A+ "px"; +SelectionDiv.style.height =Math.Abs (selection.height) the+ "px"; - } $ the //Show selection Box div the functionShowit () { theSelectionDiv.style.display = "Block"; the } - in //Hide Selection Box div the functionHideit () { theSelectionDiv.style.display = "None"; About } the the //Mouse down trigger event theWindow.onmousedown =function(e) { + varx =E.clientx, -y =E.clienty; the //Initializing coordinate objectsBayi init (); the //Show Div Objects the Showit (); - //sets the Top,left value. As the origin of this drag - setlocation (x, y); the //Call the Move method the Moveit (); the //to open a tag theFlag =true; - } the the //trigger when mouse moves theWindow.onmousemove =function(e) {94 varx =E.clientx, they =E.clienty; the //triggers an event when the tag is turned on the if(flag)98 movelocation (x, y); About } - 101 //The mouse lifts, triggers the event, hides the Div, clears the coordinate object, closes the marker102Window.onmouseup =function(e) {103 //Hide Div104 Hideit (); the //Clear Coordinate information106 init ();107 //Close Tag108Flag =false;109 } the 111</script> theIt feels like you're coding. Stuck in a place where x, Y is negative.
To ensure that there is a drag effect when x, Y is negative. You must move the position of the div.
It looks like a drag-and-drop. Actually update the div's coordinate position while updating the size
Create a marquee using div
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
