jQuery--特效

最新推荐文章于 2024-07-30 09:59:07 发布

人生如初见_张默

最新推荐文章于 2024-07-30 09:59:07 发布

阅读量164

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_42176520/article/details/103601505

版权

jQuery 专栏收录该内容

98 篇文章 1 订阅

订阅专栏

显示与隐藏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#content{display: none;}
	</style>
	<script src="jQuery/jquery-1.8.3.js"></script>
	<script type="text/javascript">
        $('#btn').click(function(event) {
        	if ($(this).text() === '显示说明') {
        		$('#content').show();
                        //$('#content').show('slow');//设置显示速度，1000为一秒，也可以用fast或slow
                        //$('#content').show('slow',function() {
                            //$('h3').css('color','red');
                        //});//设置显示完成后的回调函数
        		$(this).text('隐藏说明');
        	} else {
        		$('#content').hide();
        		$(this).text('显示说明');
        	}
        });
    	});
	</script>
</head>

<body>
	    <img src="images/logo.jpg" alt='logo' style="width: 300px">
	    <div>
	    <p id="content">百度logo，埃里克森上放声大哭就会发生放声大哭肌肤时受到了飞机上的法律手段无可奈何花落去</p>
		</div>
	    <div style="clear: both">
	    	<button type="button" name="button" id="btn">显示说明</button>
	    </div>

</body>
</html>

淡入与淡出

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#content{display: none;}
	</style>
	<script src="jQuery/jquery-1.8.3.js"></script>
	<script type="text/javascript">
        //1、淡入
        $('#fadeIn').click(function(event) {
        	$('#group1 img:first').fadeIn('slow');
        	$('#group1 img:eq(1)').fadeIn('fast');
        	$('#group1 img:last').fadeIn(3000,function() {
        		alert('淡入');
        	});
        });
        //2、淡出
        $('#fadeOut').click(function(event) {
        	$('#group2 img:first').fadeOut('slow');
        	$('#group2 img:eq(1)').fadeOut('fast');
        	$('#group2 img:last').fadeOut(3000,function() {
        		alert('淡出');
        	});
        });
        //3、淡入/淡出结合
        $('#fadeToggle').click(function(event) {
        	$('#group3 img:first').fadeToggle('slow');
        	$('#group3 img:eq(1)').fadeToggle('fast');
        	$('#group3 img:last').fadeToggle(3000,function() {
        		alert('淡入/淡出结合');
        	});
        });
        //4、设置褪色级别
        $('#fadeTo').click(function(event) {
        	$('#group4 img:first').fadeTo('slow',0.6);
        	$('#group4 img:eq(1)').fadeTo('fast',0.4);
        	$('#group4 img:last').fadeTo(3000,0.2,function() {
        		alert('图片褪色');
        	});
        });
    	});
	</script>
	<style>
		#group1 img{display: none;}
	</style>
</head>

<body>
	<div id="group1">
		<button type="button" name="button" id="fadeIn">淡入</button>
		<img src="images/1.png" alt="">
		<img src="images/2.png" alt="" width="100px">
		<img src="images/3.png" alt="">
	</div>
	<div id="group2">
		<button type="button" name="button" id="fadeOut">淡出</button>
		<img src="images/1.png" alt="">
		<img src="images/2.png" alt="" width="100px">
		<img src="images/3.png" alt="">
	</div>
	<div id="group3">
		<button type="button" name="button" id="fadeToggle">淡入/淡出自动</button>
		<img src="images/1.png" alt="">
		<img src="images/2.png" alt="" width="100px">
		<img src="images/3.png" alt="">
	</div>
	<div id="group4">
		<button type="button" name="button" id="fadeTo">设置褪色级别</button>
		<img src="images/1.png" alt="">
		<img src="images/2.png" alt="" width="100px">
		<img src="images/3.png" alt="">
	</div>

</body>
</html>

滑动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>滑动效果</title>
	<style>
		#wrap img{width: 100px;}
		/*#content {width: 100px;display: none;}*//*向下滑动*/
	</style>
	<script type="text/javascript"></script>
	<script src="jQuery/jquery-1.8.3.min.js"></script>
	<script>
		$(document).ready(function() {
			//1、向下滑动
			$('#wrap img').bind('click',function() {
				// $('#content').slideDown('slow');
				$('#content').slideDown('slow',function(event) {
					$('#wrap img').fadeOut('slow',function(event) {
						$(this).attr('src','images/3.png').fadeIn('slow');
					});
				});
			});
			//2、向上滑动
			$('#wrap img').bind('click',function() {
				// $('#content').slideUp('slow');
				$('#content').slideUp('slow',function(event) {
					$('#wrap img').fadeOut('slow',function(event) {
						$(this).attr('src','images/3.png').fadeIn('slow');
					});
				});
			});
			//3、展开与收起切换
			$('#wrap img').bind('click',function() {
				// $('#content').slideToggle('slow');
				$('#content').slideToggle('slow',function(event) {
					$('#wrap img').fadeOut('slow',function(event) {
						if ($(this).attr('src') == 'images/3.png') {
							$(this).attr('src','images/2.png').fadeIn('slow');
						} else {
							$(this).attr('src','images/3.png').fadeIn('slow');
						}
					});
				});
			});
		});
	</script>
</head>
<body>
	<div id='wrap'>
		<div id='content'>
			<h3>百度</h3>
			<p>要福克斯地方思考就回复剞城飘飘㱒发生纠纷还是叶</p>
		</div>
		<img src="images/2.png" alt="百度">
	</div>
</body>
</html>

动画实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动画</title>
	<style>
		img{width: 0;opacity: 0;}
		.content{display: none;}
	</style>
	<script src="jQuery/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#btn').click(function(event) {
				$('img').before('<br>');
                                //当按钮内容为显示时，修改按钮内容，显示图片和说明
				if ($(this).text() == '显示') {
					$(this).text('隐藏');
					$('img').animate({//动画属性对象（必选）
						width:200,//属性必须是css属性，只支持数字型，不支持字体颜色
						opacity:1,//属性值单位：默认为px
					},{//动画选项属性（可选）
						duration:3000,
						complete:function(event) {
							$('.content').slideDown(3000);
						}
					});
				} else {//当按钮内容为隐藏时，修改按钮内容，隐藏图片和说明
					$(this).text('显示');
					$('img').animate({//动画属性对象（必选）
						width:0,
						opacity:0,
					},{//动画选项属性（可选）
						duration:3000,
						complete:function(event) {
							$('.content').slideUp(3000);
						}
					});
				}
			});
		});
	</script>
</head>
<body>
	<button type="button" name="button" id="btn">显示</button>
	<img src="images/2.png" alt="baidu">
	<div class="content">
		<p>富士康地方就是看适当放宽了；收款方式斯洛伐克但是</p>
	</div>
</body>
</html>