|
內(nèi)容提要: /**************************************************** * *mouseover()函數(shù)--鼠標(biāo)懸停事件 *hover()函數(shù)--鼠標(biāo)懸停/離開切換事件 *toggle()函數(shù)--單擊切換事件(toggle(fn1,fn2,fn3,....),每次單擊后依次調(diào)用函數(shù) *獲取元素的高度和寬度 *通過css函數(shù)獲取元素的高度和寬度 *利用自定義動畫animate()函數(shù)動態(tài)顯示元素寬度和高度 *使用show()和hide()方法控制層的顯示和隱藏 *使用toggle()轉(zhuǎn)換函數(shù)控制層的顯示和隱藏.toggle(false):隱藏設(shè)置,toggle(true):顯示設(shè)置 * ****************************************************/ ----------------------------------------------------------------------------------------------- 效果展示:  ----------------------------------------------------------------------------------------------- 源碼: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>控制div層</title> <script src="jquery-1.4.1.min.js"></script> <script type="application/javascript" language="javascript"> /**************************************************** * *mouseover()函數(shù)--鼠標(biāo)懸停事件 *hover()函數(shù)--鼠標(biāo)懸停/離開切換事件 *toggle()函數(shù)--單擊切換事件(toggle(fn1,fn2,fn3,....),每次單擊后依次調(diào)用函數(shù) *獲取元素的高度和寬度 *通過css函數(shù)獲取元素的高度和寬度 *利用自定義動畫animate()函數(shù)動態(tài)顯示元素寬度和高度 *使用show()和hide()方法控制層的顯示和隱藏 *使用toggle()轉(zhuǎn)換函數(shù)控制層的顯示和隱藏.toggle(false):隱藏設(shè)置,toggle(true):顯示設(shè)置 * ****************************************************/ $(function(){ $("#div1").mouseover(function(){ alert("層被選擇"); }); $("#div2").hover(function(){ alert("鼠標(biāo)懸停"); },function(){ alert("鼠標(biāo)離開"); }); $("#div3").toggle(function(){ alert("第一次單擊"); },function(){ alert("第二次單擊"); },function(){ alert("第三次單擊"); }); $("#div4").click(function(){ var w = $("div4").width(); var h = $("div4").height(); alert("div寬度:"+$("#div4").width()+",div高度:"+$(this).height()); $("#div4").width("600px"); $("#div4").height("50px"); alert("修改后的div寬度:"+$("#div4").width()+",高度:"+$(this).height()); }) $("#div5").click(function(){ alert("寬度:"+$(this).css("width")+",高度:"+$(this).css("height")); }); $("#button6").click(function(){ var w = $("#width6").val(); var h = $("#height6").val(); //注意:這里的px不能少; $("#div6").width(w+"px").height(h+"px"); }); $("#button6-2").click(function(){ var w = $("#width6").val(); var h = $("#height6").val(); //通過css修改div層大小的三種方法 //$("#div6").css({"width":w+"px","height":h+"px"}); //$("#div6").css("width",w+"px").css("height",h+"px"); $("#div6").css("width",w+"px").height(h+"px"); }); $("#button6-3").click(function(){ var w = $("#width6").val(); var h = $("#height6").val(); $("#div6").animate({"width":w+"px","height":h+"px"}); }); $("#button7").toggle(function(){ $("#div7").show("show",function(){ alert("顯示層"); }); },function(){ $("#div7").hide("fast",function(){ alert("隱藏層"); }); }); $("#button7-2").click(function(){ $("#div7").toggle(9000); }); }) </script> </head> <body> <!-- ************利用鼠標(biāo)懸停實(shí)現(xiàn)div選取**************--> <div id="div1" style="background-color:#9C0; width:500px; ">測試mouseover()函數(shù)--鼠標(biāo)懸停事件</div><br /> <div id="div2" style="background-color:#969; width:500px; ">測試hover()函數(shù)--鼠標(biāo)懸停/離開切換事件</div><br /> <!-- ************利用鼠標(biāo)單擊實(shí)現(xiàn)div選取**************--> <div id="div3" style="background-color:#6CF; width:500px; ">測試toggle()函數(shù)--單擊切換事件(toggle(fn1,fn2,fn3,....),每次單擊后依次調(diào)用函數(shù))</div><br /> <!-- ************div層的尺寸**************--> <!-- jquery對于div層的尺寸主要是動態(tài)讀取動態(tài)修改.width(),height()--> <div id="div4" style="background-color:#F63; width:500px; ">獲取元素的高度和寬度,并修改</div><br /> <!-- ************jQuery函數(shù)css()---樣式設(shè)定**************--> <div id="div5" style="background-color:#FF0; width:500px; ">通過css函數(shù)獲取元素的高度和寬度</div><br /> <!-- ************jQuery動態(tài)修改div層的尺寸**************--> <div style="width:400px; height:350px"> <center> 寬:<input type="text" id="width6" width="200" /><br /> 高:<input type="text" width="200" id="height6" /><br /> <input type="button" id="button6" value="修改div尺寸" /><br /> <input type="button" id="button6-2" value="通過css修改div尺寸" /><br /> <input type="button" id="button6-3" value="利用自定義動畫animate()函數(shù)動態(tài)顯示元素寬度和高度" /> <div id="div6" style="background-color:#C93; width:400px; height:200px;"></div> </center> </div><br /> <!-- ************層的顯示和隱藏**************--> <div> <input type="button" id="button7" value="使用show()和hide()方法控制層的顯示和隱藏" /><br /> <input type="button" id="button7-2" value="使用toggle()轉(zhuǎn)換函數(shù)控制層的顯示和隱藏.toggle(false):隱藏設(shè)置,toggle(true):顯示設(shè)置" /><br /> <div id="div7" style="background-color:#F39; width:400px; height:200px"></div> </div> </body> </html> |
|
|
