This article shares the js mouse special effect example code for your reference. The specific content is as follows
Example 1: Disable the right mouse button
<script type="text/javascript"> //Define the callback for the mouse button of the document document.onmousedown = function(event){ //Determine whether the value of the event is right-click if (event.button == 2){ alert('Disable right-click!'); //Prompt the user to disable right-click} } </script>0 No button press
1 Press the left button
2 Press the right button
3 Press the left and right keys
4 Press the middle key
5 Press the left and middle keys
6 Press the right and middle keys
7 Press all keys
Example 2: Dynamically define the mouse pointer shape
<script type="text/javascript"> //Initialize the mouse shape function initMouse(){ //Get the target DOM through the tag name. If it is a full web page, you can use body var pDom = document.getElementsByTagName("p")[0]; //Modify the mouse pointer shape of the style, pointer is the shape of the hand pDom.style.cursor = 'pointer'; } </script>Name Attribute Code
Default arrow style cursor:default
Hand shape cursor: pointer
Hand shape cursor:hand
Move cross arrow cursor: move
Help question mark cursor: help
Crosshair cursor:crosshair
Text/Editor cursor: text
Unable to release (disable) cursor:no-drop
Disable cursor:not-allowed
Automatic cursor:auto
Cursor: progress
Change size upward cursor: n-resize
Change the size down cursor: s-resize
Change the size to the left cursor: w-resize
Change size to the right cursor: e-resize
Change the size up left cursor: nw-resize
Change the size down to the left cursor: sw-resize
Change the size up right cursor: ne-resize
Change the size to the right downward cursor: se-resize
Example 3: Changes in font size when the mouse enters and exits
<script type="text/javascript"> //Move the mouse pointer into function mOver(pDOM){ pDOM.style.fontSize = '20px'; //Resize the font size to 20 pixels} //Move the mouse pointer out function mOut(pDOM){ pDOM.style.fontSize = ''; //Resize the font size to default}</script><!-- Define an area--> <p style="margin:5px auto; width:100px; height:100px; border:1px solid black;" onmouseover="mOver(this);" onmouseout="mOut(this);"> Move the mouse to this area</p>Example 4:
<script type="text/javascript"> var nowPos; //Current position var myTimer; //Timer variable function startIt(){ //Start function//Start timer, in 10 milliseconds myTimer = window.setInterval("scrollPage()",10); } //Stop function function stopIt(){ //Cancel timer clearInterval(myTimer); } //Scroll function function scrollPage(){ window.scrollBy(0,1); //Scroll in one pixel} document.onmousedown = stopIt; //Snap the click event document.ondblclick = startIt; // Listen to the double-click event</script>Example 5: Different colors appear on the link with the mouse
<script type="text/javascript"> //Define the mouseover event function defineLinkColor(){ //Get the DOM of all links in the web page var linkDOMs = document.getElementsByTagName("a"); //Transf the links DOM for(var i=0; i<linkDOMs.length; i++){ //Define event callback for each link mouseover linkDOMs[i].onmouseover = function(){ this.style.color = 'red'; //Change the color style for the current link} linkDOMs[i].onmouseout = function(){ this.style.color = ''; //Restore default} } } }</script>Example 6: Deactivate the mouse pulley
<script type="text/javascript"> function init(){ //Redefine the event callback function of document's pulley sliding of pulleys document.onmousewheel = function(){ alert('Use pulleys are forbidden'); //The user is prompted to not use pulleys return false; //Return false, nothing is done (this sentence cannot be missed, otherwise it will still scroll) }; }</script>The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.