jquery動畫與事件案例
阿新 • • 發佈：2019-01-06
程式碼都已經測試通過，直接開啟註釋即可看見效果！
<!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>