<!doctype html>
<html>
<head>
<title>效果切换</title>
<meta http-equiv="html/css" type="text" charset="gbk" >
<script src="jquery-1.11.3.js"></script>
<style>
button{
border:1px solid red;
}
#jqueryms{
position:absolute;
left:500px;
}
</style>
</head>
<body>
<h1 align="center"><<JQuery效果>></h1>
<div id="jqueryms" align="center" style="width:400px;height:200px;border:3px solid black">
<h3 align="center"style="color:red">JQuery的用法及其描述</h3>
<p>
<ol start="1">
<li>首先引入JQuery文件</li>
<li>定义button按钮</li>
<li>给每个button按钮绑定单击事件</li>
<li>获取div属性值，用jquery属性实现效果</li>
</ol>
</p>
</div>
<button id="btn1">显示</button>
<button id="btn2">隐藏</button>
<button id="btn3">淡出</button>
<button id="btn4">淡入</button>
<button id="btn5">淡入淡出切换效果</button>
<button id="btn6">上下滑动效果</button>
<div id="d1" style="width:300px;height:300px;border:1px solid red;background:black;display:none"></div>
<script>
$("#btn1").click(function(){
$("#d1").show("slow");
})
$("#btn2").click(function(){
$("#d1").hide(3000)
})
$("#btn3").click(function(){
$("#d1").fadeOut(3000)
})
$("#btn4").click(function(){
$("#d1").fadeIn(9000);
})
$("#btn5").click(function(){
$("#d1").fadeToggle(1000);
})
$("#btn6").click(function(){
$("#d1").slideToggle("slow");
})
</script>
</body>
</html>
<html>
<head>
<title>效果切换</title>
<meta http-equiv="html/css" type="text" charset="gbk" >
<script src="jquery-1.11.3.js"></script>
<style>
button{
border:1px solid red;
}
#jqueryms{
position:absolute;
left:500px;
}
</style>
</head>
<body>
<h1 align="center"><<JQuery效果>></h1>
<div id="jqueryms" align="center" style="width:400px;height:200px;border:3px solid black">
<h3 align="center"style="color:red">JQuery的用法及其描述</h3>
<p>
<ol start="1">
<li>首先引入JQuery文件</li>
<li>定义button按钮</li>
<li>给每个button按钮绑定单击事件</li>
<li>获取div属性值，用jquery属性实现效果</li>
</ol>
</p>
</div>
<button id="btn1">显示</button>
<button id="btn2">隐藏</button>
<button id="btn3">淡出</button>
<button id="btn4">淡入</button>
<button id="btn5">淡入淡出切换效果</button>
<button id="btn6">上下滑动效果</button>
<div id="d1" style="width:300px;height:300px;border:1px solid red;background:black;display:none"></div>
<script>
$("#btn1").click(function(){
$("#d1").show("slow");
})
$("#btn2").click(function(){
$("#d1").hide(3000)
})
$("#btn3").click(function(){
$("#d1").fadeOut(3000)
})
$("#btn4").click(function(){
$("#d1").fadeIn(9000);
})
$("#btn5").click(function(){
$("#d1").fadeToggle(1000);
})
$("#btn6").click(function(){
$("#d1").slideToggle("slow");
})
</script>
</body>
</html>
2450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
