A Simple jQuery mouse gestures demo and tutorial.
You can see this example live over top of my blog header, it shows mouse left,right,middle ,over events live. here we learn how did i implemented this.
HTML of demo
Here we use simple logic with four layers for each mouse event. code shown below
<div id="mouse-div">
<div id="mouse-parts">
<div id="mouse-left"> </div>
<div id="mouse-right"> </div>
<div id="mouse-blink"> </div>
<div id="mouse-middle"> </div>
</div>CSS of Demo
Total mouse main element #mouse-div was positioned absolutely with mouse background.
mouse main element has another element called #mouse-parts and positioned relatively with main element.
#mouse-left element positioned with main background and its mouse left click event background matched exactly with absolute positioning.
#mouse-right element positioned with main background and its mouse right click event background matched exactly with absolute positioning.
#mouse-middle element positioned with main background and its mouse middle click event background matched exactly with absolute positioning.
#mouse-blink element positioned with main background and its mouse over event background matched exactly with absolute positioning.
#mouse-div { position: absolute; height: 240px; width: 200px; left: 14px; top: 51px; background: url(mouse.png) no-repeat left top; } #mouse-div #mouse-parts { position: relative; height: 100%; width: 100%; } #mouse-parts #mouse-blink { height: 43px; width: 45px; background: url(mouse-over.png) no-repeat center center; position: absolute; left: 114px; top: 165px; display:none; } #mouse-parts #mouse-left { height: 141px; width: 114px; background: url(mouse-left.png) no-repeat left top; position: absolute; top: 24px; display:none; } #mouse-parts #mouse-right { height: 142px; width: 110px; position: absolute; background: url(mouse-right.png) no-repeat left top; left: 62px; top: 0px; display:none; } #mouse-parts #mouse-middle { height: 128px; width: 82px; position: absolute; background: url(mouse-middle.png) no-repeat left top; left: 33px; top: -1px; display:none; }
jQuery Code
jQuery().ready(function(){ jQuery('#mouse-div').hover(function(){ jQuery('#mouse-blink').show();},function(){ jQuery('#mouse-blink').hide();}) .mousedown(function(e){ //fire the each event when mouse button pressed e.preventDefault(); if(e.which==1){ jQuery('#mouse-left').show();//show the mouse-left element over the mouse that was brightened }else if(e.which==3){ jQuery('#mouse-right').show();//show the mouse-right element over the mouse that was brightened return false; }else if(e.which==2){ jQuery('#mouse-middle').show();//show the mouse-middle element over the mouse that was brightened } return false;}) .mouseup(function(e){jQuery('#mouse-left,#mouse-right,#mouse-middle').hide();})//reset the all images to hidden state when mouse released .bind('contextmenu',function(){return false;});//hide the default context menu when right clicking on main element. });
View Demo and Download ‘jquery mouse guestures’
Popularity: 10% [?]
Related Articles
1 user responded in this post
[...] context menu on the images by saving. we can see this demo on my previous post about the jquery mouse gestures. AKPC_IDS += "465,";Popularity: unranked [?] Share and [...]
Leave A Reply