jquery动画与事件案例

简介: jquery动画与事件案例

代码都已经测试通过,直接打开注释即可看见效果!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      $(function(){
        //鼠标单击事件
        /*$("#div1").click(function(){
          alert('a');
        });*/
        //鼠标移动上的事件
        /*$("#div1").mousemove(function(){
          $(this).css("background","yellow");
        });*/
        //鼠标离开事件
        /*$("#div1").mouseout(function(){
          $(this).css("background","green");
        });*/
        //鼠标指针进入时
        /*$("#div1").mouseenter(function(){
          $(this).css("background","pink");
        });*/
        //鼠标指针离开时
        /*$("#div1").mouseleave(function(){
          $(this).css("background","red");
        });*/
        
        //用户按下键盘的时间
        /*$("[name='pass']").keydown(function(){
          alert("按下了键");
        });*/
        //用户释放键盘的时间
        /*$("[name='pass']").keyup(function(){
          alert("释放了键");
        });*/
        //当键盘或按钮被按下时
        /*$("[name='pass']").keypress(function(){
          alert("按下了键");
        });*/
        
        //获得焦点
        /*$("[name='pass']").focus(function(){
          alert("聚焦");
        });*/
        //失去焦点
        /*$("[name='pass']").blur(function(){
          alert("失去焦点");
        });*/
        //绑定单个事件
        /*$("#div2").bind("click",function(){
          alert('单击完了');
        })*/
        
        //绑定多个事件
        /*$("#div2").bind({
          mouseover:function(){
            $(this).css("background","red");
          },
          mouseout:function(){
            $(this).css("background","yellow");
          }
        });*/
        //移除绑定的事件
        /*$("#div2").unbind("mouseover");*/
        
        //toggle()方法,相当于模拟鼠标多次单击事件
        /*$("p").toggle(
          function(){
            $(this).css("background","red")
          },
          function(){
            $(this).css("background","orange")
          },
          function(){
            $(this).css("background","yellow")
          },
          function(){
            $(this).css("background","green")
          },
          function(){
            $(this).css("background","cyan")
          },
          function(){
            $(this).css("background","blue")
          },
          function(){
            $(this).css("background","people")
          }
        );*/
        //动画,jquery显示和隐藏
        /*$("p").hide();
        $("#div2").click(function(){
          $("p").show("300");
        });*/
        //隐藏
        /*$("#div2").click(function(){
          $("p").hide("300");
        });*/
        
        //改变元素的透明度(淡入和淡出)
        //淡入
        /*$("p").hide();
        $("#div2").click(function(){
          $("p").fadeIn("slow");
        })*/
        
        //淡出
        /*$("#div2").click(function(){
          $("#div1").fadeOut("slow");
        })*/
        
        //改变元素的高度
        /*$("#div2").click(function(){
          $("#div1").slideUp("slow");
        })*/
        /*$("#div1").hide("3000");
        $("#div2").click(function(){
          $("#div1").slideDown("slow");
        })*/
      })
    </script>
    <style type="text/css">
      #div1{
        width: 200px;
        height: 150px;
        background: pink;
        border-radius: 5px;
        line-height: 50px;
        text-align: center;
        cursor: pointer;
      }
      #div2{
        width: 200px;
        height: 150px;
        background: blueviolet;
        border-radius: 5px;
        line-height: 50px;
        text-align: center;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="div1">
      按钮1
      <p style="background: brown;">p1</p>
    </div>
    <div id="div2">
      按钮2
    </div>
    密码<input type="password" name="pass" />
  </body>
</html>


目录
相关文章
N..
|
9天前
|
JavaScript 前端开发
jQuery事件处理
jQuery事件处理
N..
13 1
N..
|
9天前
|
JavaScript 前端开发 UED
jQuery动画特效
jQuery动画特效
N..
16 1
|
6天前
|
XML 前端开发 JavaScript
jQuery与javascript的区别+案例 锋芒毕露
jQuery与javascript的区别+案例 锋芒毕露
|
9天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
9天前
|
Web App开发 JavaScript 前端开发
jquery的冒泡事件event.stopPropagation()
jquery的冒泡事件event.stopPropagation()
9 0
|
9天前
|
JavaScript 前端开发
jQuery中的事件与动画
jQuery中的事件与动画
11 0
|
7月前
|
JavaScript
jQuery04(事件&动画)
jQuery04(事件&动画)
|
8月前
|
JavaScript 前端开发 Java
JQuery的使用(工具方法、CSS属性及方法、筛选、文档处理、事件、动画)后续
元素 . animate({属性:属性值 } , time);缩放:width height移动:top left移动本元素,距离:top = "+=" left = "-="上一章:JQuery(入门~选择器)
|
8月前
|
JavaScript
jQuery事件&动画2
jQuery事件&动画2
26 0
|
8月前
|
JavaScript
jQuery事件&动画1
jQuery事件&动画1
38 0