|
内容提要: /**************************************************** * *mouseover()函数--鼠标悬停事件 *hover()函数--鼠标悬停/离开切换事件 *toggle()函数--单击切换事件(toggle(fn1,fn2,fn3,....),每次单击后依次调用函数 *获取元素的高度和宽度 *通过css函数获取元素的高度和宽度 *利用自定义动画animate()函数动态显示元素宽度和高度 *使用show()和hide()方法控制层的显示和隐藏 *使用toggle()转换函数控制层的显示和隐藏.toggle(false):隐藏设置,toggle(true):显示设置 * ****************************************************/ ----------------------------------------------------------------------------------------------- 效果展示:  ----------------------------------------------------------------------------------------------- 源码: <!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()函数--鼠标悬停事件 *hover()函数--鼠标悬停/离开切换事件 *toggle()函数--单击切换事件(toggle(fn1,fn2,fn3,....),每次单击后依次调用函数 *获取元素的高度和宽度 *通过css函数获取元素的高度和宽度 *利用自定义动画animate()函数动态显示元素宽度和高度 *使用show()和hide()方法控制层的显示和隐藏 *使用toggle()转换函数控制层的显示和隐藏.toggle(false):隐藏设置,toggle(true):显示设置 * ****************************************************/ $(function(){ $("#div1").mouseover(function(){ alert("层被选择"); }); $("#div2").hover(function(){ alert("鼠标悬停"); },function(){ alert("鼠标离开"); }); $("#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> <!-- ************利用鼠标悬停实现div选取**************--> <div id="div1" style="background-color:#9C0; width:500px; ">测试mouseover()函数--鼠标悬停事件</div><br /> <div id="div2" style="background-color:#969; width:500px; ">测试hover()函数--鼠标悬停/离开切换事件</div><br /> <!-- ************利用鼠标单击实现div选取**************--> <div id="div3" style="background-color:#6CF; width:500px; ">测试toggle()函数--单击切换事件(toggle(fn1,fn2,fn3,....),每次单击后依次调用函数)</div><br /> <!-- ************div层的尺寸**************--> <!-- jquery对于div层的尺寸主要是动态读取动态修改.width(),height()--> <div id="div4" style="background-color:#F63; width:500px; ">获取元素的高度和宽度,并修改</div><br /> <!-- ************jQuery函数css()---样式设定**************--> <div id="div5" style="background-color:#FF0; width:500px; ">通过css函数获取元素的高度和宽度</div><br /> <!-- ************jQuery动态修改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()函数动态显示元素宽度和高度" /> <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()转换函数控制层的显示和隐藏.toggle(false):隐藏设置,toggle(true):显示设置" /><br /> <div id="div7" style="background-color:#F39; width:400px; height:200px"></div> </div> </body> </html> |
|
|
