jQuery入坑笔记

最新推荐文章于 2018-11-16 15:00:24 发布

梧桐下的四叶草

最新推荐文章于 2018-11-16 15:00:24 发布

阅读量431

点赞数

分类专栏： JavaScript 文章标签： jquery javascript

本文链接：https://blog.csdn.net/zsc2014030403015/article/details/74279000

版权

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

以前比较散乱的学习jQuery，所以现在想要系统的学一下。这里面我是跟着<Head First jQuery>学的，因为以前看过这一系列的书都感觉不错，所以现在也是对Head First系列的书充满好感。

(1)slideToggle

在这里我要实现一个点击文字就会出现图片向下滑动出现的效果，所以采用slideToggle来实现，这个的话其实就是封装了两个函数slideUp和slideDown。这两个函数会根据你使用的选择器而判断使用。如果当前的选择器上的容器是display：none；的情况，那么就会调用slideDown来实现向下滑动出现的效果。反之亦然。

index.html:

<html>
	<head>
		<style>
			html{
				margin:0;
				padding:0;
				width:100%;
				height:100%;
				background-size:100% 100%;
			}
			body{
				margin:0;
				padding:0;
				width:100%;
				height:100%;
				background-size:100% 100%;
			}
			#clickMe{
				background-color:red;
				margin:5px;
			}
			#picframe{
				width:100%;
				height:30em;
				display:none;
			}
			#picframe img{
				width:100%;
				height:100%;
				display:none;
			}
		</style>
	</head>
	<body>
		<div id="clickMe">Show Me the Furry Friend of the Day</div>
		<div id="picframe">
			<img src="./imgs/0.jpg">
		</div>
	</body>
	<script src="./jquery-3.1.1.min.js"></script>
	<script src="./index.js"></script>
</html>

index.js

$(function(){
	$("#clickMe").click(function(){
		$('img').fadeIn(1000);
		$('#picframe').slideToggle('slow');
	});
});

(2)根据图片改需求

根据效果如下：

index.html

<html>
	<head>
		<style>
			html{
				margin:0;
				padding:0;
				width:100%;
				height:100%;
				background-size:100% 100%;
			}
			body{
				margin:0;
				padding:0;
				width:100%;
				height:100%;
				background-size:100% 100%;
			}
			.picframe{
				width:45%;
				height:15em;
				margin-left:20px;
				margin-bottom:20px;
			}
			.picframe img{
				width:100%;
				height:15em;
				background-size:100% 100%;
			}
			.row{
				display:flex;
				flex-direction: row;
				height:15em;
				margin-left:20px;
			}
			.col{
				display:flex;
				flex-direction: column;
				height:30em;
				margin-top:20px;
			}
			.line-block{
				height:1em;
				width:100%;
			}
			.discount{
				margin-top:-9em;
				margin-left: 1em;
				width:inherit;
				height:15em;
				line-height:15em;
				text-align:center;
				font-size:4em;
			}
		</style>
	</head>
	<body class="col">
		<div class="row">
			<div class="picframe">
				<img src="./imgs/0.jpg">
				<div class="discount"></div>
			</div>
			<div class="picframe">
				<img src="./imgs/0.jpg">
				<div class="discount"></div>
			</div>
		</div>
		<div class="line-block"></div>
		<div class="row">
			<div class="picframe">
				<img src="./imgs/0.jpg">
				<div class="discount"></div>
			</div>
			<div class="picframe">
				<img src="./imgs/0.jpg">
				<div class="discount"></div>
			</div>
		</div>
	</body>
	<script src="./jquery-3.1.1.min.js"></script>
	<script src="./index.js"></script>
</html>

index.js

$(function(){
	$(".picframe").click(function(){
		var rNum = Math.round(Math.random()*10);
		var discount = rNum>5?rNum:5;
		$('div',this).text(discount+'%');
	});
});

未完待续。。

梧桐下的四叶草

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery入坑笔记

以前比较散乱的学习jQuery，所以现在想要系统的学一下。这里面我是跟着学的，因为以前看过这一系列的书都感觉不错，所以现在也是对Head First系列的书充满好感。(1)slideToggle在这里我要实现一个点击文字就会出现图片向下滑动出现的效果，所以采用slideToggle来实现，这个的话其实就是封装了两个函数slideUp和slideDown。这两个函数会根据你使用的选择器而判断
复制链接

扫一扫

专栏目录