JavaScript DHTML/jQuery/Event Mouse
Содержание
- 1 Bounced menu
- 2 Cascaded Mouse leave event
- 3 Mouse down event
- 4 mousedown(fn) event fires when the pointing device button is pressed over an element.
- 5 Mouse enter
- 6 Mouse enter event
- 7 header 1
- 8 header 1
- 8.1 mouseleave event triggering
- 8.2 mousemove(fn) event fires when mouse is moved
- 8.3 Mouse out event
- 8.4 mouseout(fn) event fires when mouse is moved away from an element.
- 8.5 Mouse over action
- 8.6 Mouse over event
- 8.7 mouseover event triggering
- 8.8 Mouse up event
- 8.9 Show texts when mouseup and mousedown event triggering.
- 8.10 Show the mouse coordinates when the mouse is moved over the yellow div. Coordinates are relative to the window which in this case is the iframe.
<source lang="html4strict">
<html lang="en"> <head>
<title></title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/effects.core.js"></script> <script type="text/javascript" src="js/ui/effects.bounce.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { $("#menu a").mouseover(function() { $(this).effect("bounce"); }); }); </script>
</head> <body>
</body> </html>
</source>
Cascaded Mouse leave event
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").mouseover(function(){ $(this).append("mouseover."); }).mouseleave(function(){ $(this).append("mouseleave"); });
}); </script> </head> <body> <body>
</body>
</html>
</source>
Mouse down event
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").mouseup(function(){ $(this).append("Mouse up."); }).mousedown(function(){ $(this).append("Mouse down."); });
}); </script> </head> <body> <body>
</body>
</html>
</source>
mousedown(fn) event fires when the pointing device button is pressed over an element.
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").mouseup(function(){ $(this).append("Mouse up."); }).mousedown(function(){ $(this).append("Mouse down."); });
}); </script>
<style>
div.dbl { background:yellow;color:black; }
</style>
</head> <body> <body>
Press mouse and release here.
</body>
</html>
</source>
Mouse enter
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").mouseover(function(){ $(this).append("mouseover."); }).mouseenter(function(){ $(this).append("mouseenter"); });
}); </script> </head> <body> <body>
</body>
</html>
</source>
Mouse enter event
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("h1").bind("mouseenter mouseleave", function(e){ var str = "( " + e.pageX + ", " + e.pageY + " )"; $("h1").text("Click happened! " + str); });
}); </script>
</head> <body> <body>
header 1
</body>
</html>
</source>
mouseenter event triggering
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").mouseenter(function(e){ var pageCoords = "( " + e.pageX + ", " + e.pageY + " )"; var clientCoords = "( " + e.clientX + ", " + e.clientY + " )"; $("span:first").text("( e.pageX, e.pageY ) - " + pageCoords); $("span:last").text("( e.clientX, e.clientY ) - " + clientCoords); });
}); </script> </head> <body> <body>
Move the mouse over the div.
</body>
</html>
</source>
Mouse leave event
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("h1").bind("mouseenter mouseleave", function(e){ var str = "( " + e.pageX + ", " + e.pageY + " )"; $("h1").text("Click happened! " + str); });
}); </script>
</head> <body> <body>
header 1
</body>
</html>
</source>
mouseleave event triggering
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").mouseleave(function(e){ var pageCoords = "( " + e.pageX + ", " + e.pageY + " )"; var clientCoords = "( " + e.clientX + ", " + e.clientY + " )"; $("span:first").text("( e.pageX, e.pageY ) - " + pageCoords); $("span:last").text("( e.clientX, e.clientY ) - " + clientCoords); });
}); </script> </head> <body> <body>
Move the mouse over the div.
</body>
</html>
</source>
mousemove(fn) event fires when mouse is moved
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").mousemove(function(e){ var pageCoords = "( " + e.pageX + ", " + e.pageY + " )"; var clientCoords = "( " + e.clientX + ", " + e.clientY + " )"; $("span:first").text("( e.pageX, e.pageY ) - " + pageCoords); $("span:last").text("( e.clientX, e.clientY ) - " + clientCoords); });
}); </script> </head> <body> <body>
Move the mouse over the div.
</body>
</html>
</source>
Mouse out event
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").mouseover(function(){ $(this).append("mouseover."); }).mouseout(function(){ $(this).append("mouseout"); });
}); </script> </head> <body> <body>
</body>
</html>
</source>
mouseout(fn) event fires when mouse is moved away from an element.
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").mouseout(function(e){ var pageCoords = "( " + e.pageX + ", " + e.pageY + " )"; var clientCoords = "( " + e.clientX + ", " + e.clientY + " )"; $("span:first").text("( e.pageX, e.pageY ) - " + pageCoords); $("span:last").text("( e.clientX, e.clientY ) - " + clientCoords); });
}); </script> </head> <body> <body>
Move the mouse over the div.
</body>
</html>
</source>
Mouse over action
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("b").mouseover(function () { $(this).css({"background-color" : "yellow", "font-weight" : "bolder"}); }); }); </script>
</head> <body> <body> Hello </body>
</html>
</source>
Mouse over event
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").mouseover(function(){ $(this).append("mouseover."); }).mouseenter(function(){ $(this).append("mouseenter"); });
}); </script> </head> <body> <body>
</body>
</html>
</source>
mouseover event triggering
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").mouseover(function(e){ var pageCoords = "( " + e.pageX + ", " + e.pageY + " )"; var clientCoords = "( " + e.clientX + ", " + e.clientY + " )"; $("span:first").text("( e.pageX, e.pageY ) - " + pageCoords); $("span:last").text("( e.clientX, e.clientY ) - " + clientCoords); });
}); </script> </head> <body> <body>
Move the mouse over the div.
</body>
</html>
</source>
Mouse up event
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").mouseup(function(){ $(this).append("Mouse up."); }).mousedown(function(){ $(this).append("Mouse down."); });
}); </script> </head> <body> <body>
</body>
</html>
</source>
Show texts when mouseup and mousedown event triggering.
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").mouseup(function(){ $(this).append("Mouse up."); }).mousedown(function(){ $(this).append("Mouse down."); });
}); </script>
<style>
div.dbl { background:yellow;color:black; }
</style>
</head> <body> <body>
Press mouse and release here.
</body>
</html>
</source>
Show the mouse coordinates when the mouse is moved over the yellow div. Coordinates are relative to the window which in this case is the iframe.
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").mousemove(function(e){ var pageCoords = "( " + e.pageX + ", " + e.pageY + " )"; var clientCoords = "( " + e.clientX + ", " + e.clientY + " )"; $("span:first").text("( e.pageX, e.pageY ) - " + pageCoords); $("span:last").text("( e.clientX, e.clientY ) - " + clientCoords); });
}); </script> </head> <body> <body>
Move the mouse over the div.
</body>
</html>
</source>