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>
目录
相关文章
|
12天前
|
JavaScript 前端开发
jQuery 事件
jQuery 事件
12 1
|
15天前
|
移动开发 JavaScript 前端开发
老程序员分享:jQuery笔记(四)jQuery中的动画
老程序员分享:jQuery笔记(四)jQuery中的动画
16 0
|
14天前
|
JavaScript 前端开发 开发者
jQuery中的ready()函数:优雅地处理页面加载事件
jQuery中的ready()函数:优雅地处理页面加载事件
7 0
|
21天前
|
JavaScript
jQuery 动画小练习
jQuery 动画小练习
16 0
|
22天前
|
JavaScript 前端开发
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
17 0
|
24天前
|
JavaScript 前端开发
我如何使用jQuery动画我的元素
我如何使用jQuery动画我的元素
12 0
|
24天前
|
JavaScript
jQuery如何停止动画队列
jQuery如何停止动画队列
18 0
|
28天前
制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】
制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】
25 0
|
2月前
|
JavaScript 前端开发
JavaScript-jQuery的使用 + JS的案例
JavaScript-jQuery的使用 + JS的案例
27 0
|
JavaScript 前端开发
jquery城市选择案例
1.代码实例 04-jQuery-城市选择案例 select { width: 200px; background-color: teal; height: 200px; font-size: 20px; } .
717 0