This tutorial demonstrates about the capturing mouse events using mouse-capture.js jQuery plugins. This plugin has the capability to capture mouse events according to a method in a certain situation. This will help you manipulate and manage all mouse events in the easiest way that you can’t imagine.
Basic example as follows:
.mouseclick()
- Create a design of the page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>jQuery mouse capture demo</title>
<style type="text/css">
#capture-click {
position: absolute;
background-color: blue;
color: white;
top: 100px;
height: 200px;
left: 200px;
width: 300px;
}
</style>
</head>
<body>
<div id="capture-click">It capture the mouse when clicked.</div>
</body>
</html>
- Set the following plugins.
<script src="jquery-1.3.1.min.js" type="text/javascript"></script> <script src="jquery.mousecapture.js" type="text/javascript"></script>
- Create a script for the mouseclick() event handler.
<script type="text/javascript">
$(document).ready(function() {
$(document).ready(function() {
$("#capture-click").mousecapture({
"down": function(e, s) {
$(this).html("Mouse has been clicked");
// Scale the box to the appropriate size
$('#capture-click').animate({
width : '200px',
height : '200px'
}, 1000);
}
});
});
</script>
Description: When mouse clicked, it will change the width and hieght of a box slowly.
.mousemove()
- Create a design of the page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>jQuery mouse capture demo</title>
<style type="text/css">
#mouse-move {
position: absolute;
background-color: blue;
color: white;
top: 400px;
height: 200px;
left: 200px;
width: 300px;
}
</style>
</head>
<body>
<div id="mouse-move">It capture the mouse when moving.</div>
</body>
</html>
- Set the following plugins.
<script src="jquery-1.3.1.min.js" type="text/javascript"></script> <script src="jquery.mousecapture.js" type="text/javascript"></script>
- Create a script for the mousemove() event handler.
<script type="text/javascript">
$(document).ready(function() {
$("#mouse-move").mousedown(function() {
$(this).html("mousedown triggered<br>on " + Date.now());
});
$("#mouse-move").mouseup(function() {
$(this).html("mouseup triggered<br>on " + Date.now());
});
$("#mouse-move").mousemove(function() {
$(this).html("mousemove triggered<br>on " + Date.now());
});
});
</script>
For all students who need programmer for your thesis system or anyone who needs a sourcecode in any programming languages. You can contact me @ :
Email – [email protected]
Mobile No. – 09305235027 – tnt
