JQuery学习笔记-JQuery的动画效果
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>UntitledDocument</title><styletype="text/css">*{margin:0;padding:0;}body{font-size:13px;line-height:130%;padding:60px;}#panel{width:300px;border:1pxsolid#0050D0;}.head{padding:5px;background:#96E555;cursor:pointer;}.content{padding:10px;text-indent:2em;border-top:1pxsolid#0050D0;display:block;display:none;}.highlight{background:#FF3300}</style><scripttype="text/javascript"src="js/jquery-1.7.2.js"></script><scripttype="text/javascript">/*$(function(){//show()hide()方法中传入毫秒数达到动画效果$(".head").toggle(function(){$(".content").show(500);},function(){$(".content").hide(500);});})*///只改变高度/*$(function(){$(".head").toggle(function(){$(".content").slideDown(500);},function(){$(".content").slideUp(500);});})*///只改变透明度/*$(function(){$(".head").toggle(function(){$(".content").fadeIn(500);},function(){$(".content").fadeOut(500);});})*///toggle()可以切换元素是否可见//slideToggle通过高度变化来切换匹配元素的可见性//fadeToggle通过透明度来切换可见性//fadeTo把透明度以渐进的方式调整为执行的值(0-1之间)$(function(){$(".content").show(500);vari=1;$(".head").click(function(){//$(".content").toggle(500);//$(".content").slideToggle();//$(".content").fadeToggle(1000);$(".content").fadeTo("slow",i);i=i-0.1;});})//</script></head><body><divid="panel"><h6class="head">什么是JQuery?</h6><divclass="content">JQuery是一个JavaScript库。</div></div></body></html>
<scripttype="text/javascript">$(document).ready(function(){alert($(window).height());//浏览器当前窗口可视区域高度alert($(document).height());//浏览器当前窗口文档的高度alert($(document.body).height());//浏览器当前窗口文档body的高度alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度包括borderpaddingmarginalert($(window).width());//浏览器当前窗口可视区域宽度alert($(document).width());//浏览器当前窗口文档对象宽度alert($(document.body).width());//浏览器当前窗口文档body的高度alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度包括borderpaddingmargin})</script>
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。