jQuery事件和制作动画效果

用jQuery写了一个鼠标拖动效果:可以拖动页面里的某层;一个键盘按键导航应用:就和你在电脑桌面按鼠标右键,弹出的菜单可以用键盘按键操控一样;一个元素显隐的渐入渐出效果:可以实现点击按钮显示图片、隐藏图片、淡入淡出、设置速度等等。

鼠标拖动效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标拖动效果</title>
<style type="text/css">
         #Main{
            width:400px;
            height:400px;
             position:absolute;
            top:10px;
            left:0;
             border:1px solid #CCC;
              border-radius:5px;
              background-color:Green;
          }
          h3 {
              margin:0;
              width:400px;
              height:40px;
              background-color:Gray;
              cursor:move;
              line-height:40px;
              border-radius:5px 5px 0 0;
          }
</style>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
         //注册一个Jquery的鼠标拖动函数,参数为要拖动的对象
         $.fn.extend({ SliderObject: function (objMoved) {
              var mouseDownPosiX;
              var mouseDownPosiY;
              var InitPositionX;
              var InitPositionY;
              var obj = $(objMoved) == undefined ? $(this) : $(objMoved);
              $(this).mousedown(function (e) {
                  //当鼠标按下时捕获鼠标位置以及对象的当前位置
                  mouseDownPosiX = e.pageX;
                  mouseDownPosiY = e.pageY;
                  InitPositionX = obj.css("left").replace("px", "");
                  InitPositionY = obj.css("top").replace("px", "");
                  obj.mousemove(function (e) {//这个地方改成$(document).mousemove貌似可以避免因鼠标移动太快而失去焦点的问题
                      //貌似只有IE支持这个判断,Chrome和Firefox还没想到好的办法
                     //if ($(this).is(":focus")) {
                         var tempX = parseInt(e.pageX) - parseInt(mouseDownPosiX) + parseInt(InitPositionX);
                          var tempY = parseInt(e.pageY) - parseInt(mouseDownPosiY) + parseInt(InitPositionY);
                          obj.css("left", tempX + "px").css("top", tempY + "px");
                      //};
                      //当鼠标弹起或者离开元素时,将鼠标弹起置为false,不移动对象
                  }).mouseup(function () {
                      obj.unbind("mousemove");
                 }).mouseleave(function () {
                     obj.unbind("mousemove");
                 });
              })
          }
          });
      $(document).ready(function () {
          $("h3").SliderObject($("#Main"));
     })
</script>

</head>

<body>
 <div id="Main">
          <h3>鼠标放在这里拖动我</h3>
        <div id="Container">可以使用鼠标拖动的层</div>
 </div>


</body>
</html>

键盘按键导航

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>支持键盘按键的jQuery导航应用</title>
<style type="text/css">
  #nav{width:460px; margin:0 auto} 
  #nav ul{list-style:none; height:24px} 
  #nav ul li{float:left; font-size:14px; font-weight:bold} 
  #nav ul li a{display:block; color:#369; margin-right:20px} 
  #nav ul li a:hover{color:#f90} 
  .box{width:400px; height:300px; margin:20px auto; padding:10px 20px; line-height:22px} 
  .box h2{padding:5px 10px; width:200px; background:#9cf; color:#fff} 
  #home{background:#15add1} 
  #about{background:#fdc700} 
  #product{background:#f80083} 
  #service{background:#f18300} 
  #blog{background:#98c313} 
</style>
<script src="jquery-3.2.1.js"></script>
 <script type="text/javascript">
    $(function(){ 
    $(".box").css("display","none"); 
    $("#home").css("display","block"); 

    // listens for any navigation keypress activity 
    $(document).keypress(function(e){ 
        switch(e.which){ 
            // user presses the "a" 
            case 97: 
                showViaKeypress("#home"); 
                break;     
 
            // user presses the "s" key 
            case 115: 
                showViaKeypress("#about"); 
                break; 
 
            // user presses the "d" key 
            case 100:     
                showViaKeypress("#product"); 
                break; 
 
            // user presses the "f" key 
            case 102: 
                showViaKeypress("#service"); 
                break; 
 
            // user presses the "g" key 
            case 103: 
               showViaKeypress("#blog"); 
         } 
     }); 
   });
   function showViaKeypress(element_id){ 
    $(".box").css("display","none"); 
    $(element_id).slideDown("slow"); 
   }  
</script>

</head>

<body>
  <div id="nav"> 
    <ul> 
        <li><a href="#home">首页[A]</a></li> 
        <li><a href="#about">关于[S]</a></li> 
        <li><a href="#product">产品[D]</a></li> 
        <li><a href="#service">服务[F]</a></li> 
        <li><a href="#blog">BLOG[G]</a></li>        
    </ul> 
  </div> 
  <div id="home" class="box"> 
    <h2>Welcome!</h2> 
    <p>Some Text</p> 
  </div> 
  <div id="about" class="box"> 
    <h2>About me</h2> 
    <p>Some Text</p> 
  </div> 
  <div id="product" class="box"> 
    <h2>Product</h2> 
    <p>Some Text</p> 
  </div> 
  <div id="service" class="box"> 
    <h2>Service</h2> 
    <p>Some Text</p> 
  </div> 
  <div id="blog" class="box"> 
    <h2>My Blog</h2> 
    <p>Some Text</p> 
  </div> 

</body>
</html>

元素显隐的渐入渐出效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>无标题文档</title>
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
<script language="javascript">  
$(function(){  
        $("input:eq(0)").click(function(){  
          $("img").hide(3000);  
        });  
        $("input:eq(1)").click(function(){  
           $("img").show(2000);  
       });  
       $("input:eq(2)").click(function(){  
           $("img").fadeOut(2000);  
       });  
       $("input:eq(3)").click(function(){  
           $("img").fadeIn(2000);  
       });   
       $("input:eq(4)").click(function(){  
           $("img").fadeTo(1000,0.5);  
       });   
       $("input:eq(5)").click(function(){  
           $("img").fadeTo(1000,0.0);  
       });   
       $("input:eq(6)").click(function(){  
           $("img").slideUp(1000);  
       });   
       $("input:eq(7)").click(function(){  
           $("img").slideDown(1000);  
       });       
   });  
</script>  
</head>  
<body>  
<input type="button" value="Hide">  
<input type="button" value="Show">  
<input type="button" value="FadeOut">  
<input type="button" value="FadeIn">  
<input type="button" value="FadeTo 0.5">  
<input type="button" value="FadeTo 0">  
<input type="button" value="SlideUp">  
<input type="button" value="SlideDown">  
    <p><img src="123.jpg"></p>  
</body>  
</html>  
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注