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 mouseenter event triggering
- 8 Mouse leave event
- 9 mouseleave event triggering
- 10 mousemove(fn) event fires when mouse is moved
- 11 Mouse out event
- 12 mouseout(fn) event fires when mouse is moved away from an element.
- 13 Mouse over action
- 14 Mouse over event
- 15 mouseover event triggering
- 16 Mouse up event
- 17 Show texts when mouseup and mousedown event triggering.
- 18 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.
<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>
<div id="menu">
<a href="#">1</a>
<a href="#">2</a>
</div>
</body>
</html>
Cascaded Mouse leave event
<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("<span style="color:#F00;">mouseover.</span>");
}).mouseleave(function(){
$(this).append("<span style="color:#00F;">mouseleave</span>");
});
});
</script>
</head>
<body>
<body>
<div>adsf</div>
</body>
</html>
Mouse down event
<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("<span style="color:#F00;">Mouse up.</span>");
}).mousedown(function(){
$(this).append("<span style="color:#00F;">Mouse down.</span>");
});
});
</script>
</head>
<body>
<body>
<div>adsf</div>
</body>
</html>
mousedown(fn) event fires when the pointing device button is pressed over an element.
<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("<span style="color:#F00;">Mouse up.</span>");
}).mousedown(function(){
$(this).append("<span style="color:#00F;">Mouse down.</span>");
});
});
</script>
<style>
div.dbl { background:yellow;color:black; }
</style>
</head>
<body>
<body>
<p>Press mouse and release here.</p>
</body>
</html>
Mouse enter
<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("<span style="color:#F00;">mouseover.</span>");
}).mouseenter(function(){
$(this).append("<span style="color:#00F;">mouseenter</span>");
});
});
</script>
</head>
<body>
<body>
<div>adsf</div>
</body>
</html>
Mouse enter event
<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>
<div><h1>header 1</h1></div>
</body>
</html>
mouseenter event triggering
<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>
<p>
<span>Move the mouse over the div.</span>
<span> </span>
</p>
<div>asdf</div>
</body>
</html>
Mouse leave event
<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>
<div><h1>header 1</h1></div>
</body>
</html>
mouseleave event triggering
<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>
<p>
<span>Move the mouse over the div.</span>
<span> </span>
</p>
<div>asdf</div>
</body>
</html>
mousemove(fn) event fires when mouse is moved
<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>
<p>
<span>Move the mouse over the div.</span>
<span> </span>
</p>
<div>asdf</div>
</body>
</html>
Mouse out event
<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("<span style="color:#F00;">mouseover.</span>");
}).mouseout(function(){
$(this).append("<span style="color:#00F;">mouseout</span>");
});
});
</script>
</head>
<body>
<body>
<div>adsf</div>
</body>
</html>
mouseout(fn) event fires when mouse is moved away from an element.
<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>
<p>
<span>Move the mouse over the div.</span>
<span> </span>
</p>
<div>asdf</div>
</body>
</html>
Mouse over action
<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>
<b>Hello</b>
</body>
</html>
Mouse over event
<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("<span style="color:#F00;">mouseover.</span>");
}).mouseenter(function(){
$(this).append("<span style="color:#00F;">mouseenter</span>");
});
});
</script>
</head>
<body>
<body>
<div>adsf</div>
</body>
</html>
mouseover event triggering
<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>
<p>
<span>Move the mouse over the div.</span>
<span> </span>
</p>
<div>asdf</div>
</body>
</html>
Mouse up event
<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("<span style="color:#F00;">Mouse up.</span>");
}).mousedown(function(){
$(this).append("<span style="color:#00F;">Mouse down.</span>");
});
});
</script>
</head>
<body>
<body>
<div>adsf</div>
</body>
</html>
Show texts when mouseup and mousedown event triggering.
<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("<span style="color:#F00;">Mouse up.</span>");
}).mousedown(function(){
$(this).append("<span style="color:#00F;">Mouse down.</span>");
});
});
</script>
<style>
div.dbl { background:yellow;color:black; }
</style>
</head>
<body>
<body>
<p>Press mouse and release here.</p>
</body>
</html>
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.
<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>
<p>
<span>Move the mouse over the div.</span>
<span> </span>
</p>
<div>asdf</div>
</body>
</html>