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>
adsf
</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>
adsf
</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>
adsf
</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.
asdf
</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.
asdf
</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.
asdf
</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>
adsf
</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.
asdf
</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>
adsf
</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.
asdf
</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>
adsf
</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.
asdf
</body>
</html>
</source>
