JQuery学习笔记-JQuery的动画效果

发布时间:2020-04-07 14:53:04 作者:umgsai
来源:网络 阅读:1191
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
*{
	margin:0;
	padding:0;
}

body {
	font-size:13px;
	line-height: 130%;
	padding: 60px;
}

#panel{
	width: 300px;
	border: 1px solid #0050D0;
}

.head{
	padding: 5px;
	background: #96E555;
	cursor: pointer;
}

.content{
	padding: 10px;
	text-indent: 2em;
	border-top: 1px solid #0050D0;
	display: block;
	display: none;
}

.highlight{
	background: #FF3300
}

</style>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="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);
		var i = 1;
		$(".head").click(function(){
			//$(".content").toggle(500);
			//$(".content").slideToggle();
			//$(".content").fadeToggle(1000);
			$(".content").fadeTo("slow", i);
			i = i - 0.1;
		});
	})
	
	//
</script>
</head>
<body>
	<div id="panel">
		<h6 class="head">什么是JQuery?</h6>
		<div class="content">
			JQuery是一个JavaScript库。
		</div>
	</div>
    
</body>
</html>


<script type="text/javascript"> 
$(document).ready(function() 
{ 
alert($(window).height()); //浏览器当前窗口可视区域高度 
alert($(document).height()); //浏览器当前窗口文档的高度 
alert($(document.body).height());//浏览器当前窗口文档body的高度 
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin 
alert($(window).width()); //浏览器当前窗口可视区域宽度 
alert($(document).width());//浏览器当前窗口文档对象宽度 
alert($(document.body).width());//浏览器当前窗口文档body的高度 
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin 
} 
) 
</script>


附件:http://down.51cto.com/data/2364959
推荐阅读:
  1. (JQuery学习笔记)利用jquery制作网页导航定位
  2. JQuery学习笔记- jQuery 事件与应用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

border cursor ue

上一篇:cdn性能测试怎么做

下一篇:Java读linux文件名乱码应该如何解决

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》