jquery效果

最新推荐文章于 2023-05-17 08:43:22 发布

jeo_chow

最新推荐文章于 2023-05-17 08:43:22 发布

阅读量184

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/jeo_chow/article/details/52206190

版权

jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>效果</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!-- 记得引入jquery-1.11.3.js文件到js目录下 -->
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <style type="text/css">
    	body{
    		font-family: "Microsoft YaHei";
    		text-align: center;
    	}
    	#mainDiv {
    		width: 100%;
    		text-align: center;
    		margin-top:10px;
    	}
    	.div1 {
    		width:320px;
    		height:120px;
    		color: white;
    		background-color: #0092E7;
    		margin-left: auto;
    		margin-right: auto;
    	}
    	.div2 {
    		width:320px;
    		height:120px;
    		margin-top:10px;
    		margin-left: auto;
    		margin-right: auto;
    		
    	}
    	.div2_1 {
    		width:155px;
    		height:100%;
    		color: white;
    		float: left;
    		text-align: center;
    	}
    	
    	.cGreen{background-color: #4CA902}
    	.cPink{background-color: #ED4A9F}
    	.cBlue{background-color: #0092E7}
    	.cCyan{background-color: #01A6A2}
    	.cYellow{background-color: #DCA112}
    	.cRed{background-color: #B7103B}
    	.cPurple{background-color: #792F7C}
    	.cBlack{background-color: #110F10}
    	.cOrange{background-color: #FF4500}
    	.cGray{background-color: #A9A9A9}
    	.hide{display: none;}
    </style>
    <script type="text/javascript">
    
    	$(document).ready(function(){
    		$("#btn1").click(function(){
    			// 隐藏div1
    			
    			//$(".div1").hide();
    			//$(".div1").hide("slow");
    			//$(".div1").hide(10000);  // 指定隐藏的时间：10秒
    			
    			$(".div1").hide(1000,function(){
    				// 在执行完隐藏操作后自动触发的函数
    				alert(1);
    			});
    		});
    		
    		$("#btn2").click(function(){
    			$(".div1").show("slow");
    		});
    		
    		$("#btn3").click(function(){
    			$(".cPink").slideUp("slow");  // 向上滑动，隐藏
    		});
    		
    		$("#btn4").click(function(){
    			$(".cPink").slideDown("slow"); // 向下滑动，显示
    		});
    		
    		$("#btn5").click(function(){
    			$(".cPink").slideToggle("slow");
    		});
    		
    		$("#btn6").click(function(){
    			$(".cGreen").fadeOut("slow");			// 淡出
    		});
    		
    		$("#btn7").click(function(){
    			$(".cGreen").fadeIn("slow");			// 淡入
    		});
    		
    		$("#btn8").click(function(){
    			$(".cGreen").fadeToggle("slow");		//  淡出、淡入
    		});
    		
    		$("#btn9").click(function(){
    			// 指定透明度
    			$(".div1").fadeTo("slow",0.4);
    		});
    		
    		$("#btn10").click(function(){
    			$(".div2").animate({"width":"toggle","opacity":"toggle"});
    		});
    		
    	});
    </script>
  </head>
  
  <body>
    <div id="mainDiv">
    	<div class="div1">①</div>
    	<div class="div2">
    		<div class="div2_1 cPink" style="margin-right:5px;">②</div>
    		<div class="div2_1 cGreen" style="margin-left:5px;">③</div>
    	</div>
   	</div>
    <p style="clear:both;"></p>
    <br>
    <hr>
    <input type="button" id="btn1" value="hide()隐藏蓝色区域块">
    <input type="button" id="btn2" value="show()显示蓝色区域块">
    <input type="button" id="btn3" value="slideUp()通过高度变化（向上减小）来动态地隐藏粉色区域块">
    <input type="button" id="btn4" value="slideDown()通过高度变化（向下增大）来动态地显示粉色区域块">
    <input type="button" id="btn5" value="slideToggle()通过高度变化来切换粉色区域块的可见性">
    <input type="button" id="btn6" value="fadeOut()通过不透明度的变化来实现淡出绿色块">
    <input type="button" id="btn7" value="fadeIn()通过不透明度的变化来实现淡入绿色块">
    <input type="button" id="btn8" value="fadeToggle()通过不透明度的变化淡入和淡出绿色块">
    <input type="button" id="btn9" value="fadeTo()通过不透明度以渐进方式调整蓝色块到指定的不透明度（0.4）">
    <input type="button" id="btn10" value="animate()通过制定自定义动画操作粉、绿色块">
  </body>
</html>

jeo_chow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery效果

效果 body{ font-family: "Microsoft YaHei"; text-align: center; } #mainDiv { width: 100%; text-align: center; margin-top:10px; }
复制链接

扫一扫