JavaScript DHTML/jQuery/Event Mouse

Материал из Web эксперт
Версия от 07:23, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Bounced menu

 
<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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</span>
          </p>
          <div>asdf</div>
    </body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/jQuery/Event_Mouse&oldid=2807»