zoukankan html css js c++ java

26、jQuery

一. jQuery简介

(一) jQuery是什么：

是一个javascript代码仓库
是一个快速的简洁的javascript框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。

(二) jQuery优势

体积小，使用灵巧(只需引入一个js文件)
方便的选择页面元素(模仿CSS选择器更精确、灵活)
动态更改页面样式/页面内容(操作DOM，动态添加、移除样式)
控制响应事件(动态添加响应事件)
提供基本网页特效(提供已封装的网页特效方法)
快速实现通信(ajax)
易扩展、插件丰富

(三) 如何下载JQuery

官方网站：http://jquery.com/

(四) 如何引入JQuery包

引入本地的Jquery
使用Google提供的API导入

写第一个JQUery案例
<script type=“text/javascript” src=“”></script>
<script type=“text/javascript”>
	$(function(){
		alert(“jQuery 你好!”);
	});
</script>

(1) 在JQuery库中，$是JQuery的别名，$()等效于就jQuery().
(2) $是jQuery别名。如$()也可jQuery()这样写,相当于页面初始化函数，当页面加载完毕，会执行jQuery()。

(3) 原生转jQuery: 加$()
jQuery转原生： [] .get()

window.onload == $(function(){})

window.onload = function(){} : ++页面加载、（图片、音频、视频等等）一个页面中只能有一个window.onload++

$(function(){}) : ++文档加载，速度更快一个页面可以有无限个$(function(){})++

二. jQuery选择器的使用

jQuery选择器分为：
基本选择器；
层级选择器；
常用伪类选择器:可以看作是一种特殊的类选择符;

jQuery基本选择器
(1) 包括ID选择器，标签选择器，类选择器，通配选择器和组选择器5种
a) ID选择器：$(“#id”)
b) 标签选择器：$(“element”)
c) 类选择器：$(“.className”)
d) 通配选择器：$(“*”)匹配指定上下文中所有元素
e) 组选择器：$(“selector1,selector2,selectorN”)特点：无数量限制，以逗号分隔（逐个匹配，结果全部返回）

例题:

.css({"属性":"属性值","属性":"属性值"})
或.css("属性","属性值")

<body>
		<div id="main">孔子</div>
		<h4>论语</h4>
		<div class="one">子在川上曰：</div>
		<p>"逝者如斯夫！</p>
		<p>不舍昼夜。"</p>
		<!--a)	找到.one改变他的字体颜色
		b)	找到#main给他增加border：1px solid red
		c)	找到p标签元素给他添加边框border:1px solid green
		d)	找到全部元素改变字体28px
		e)	找到ID与ClassName 添加background:red-->
	
	<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
	<script type="text/javascript">
		$('.one').css('color','red');
		$('#main').css('border',"1px solid red");
		$('p').css('border',"1px solid green");
		$('*').css('fontSize','28px');
		$('#main,.one').css('background','red');
	</script>
	</body>

效果图:

层级选择器：通过DOM的嵌套关系匹配元素

jQuery层级选择器：包含选择器、子选择器、相邻选择器、兄弟选择器 4 种
a) 包含选择器：$(“a b”)在给定的祖先元素下匹配所有后代元素（不受层级限制）
b) 子选择器：$(“parent>child”)在给定的父元素下匹配所有子元素。
c) 相邻选择器：$(“prev + next”)匹配所有紧接在prev元素后的next元素。一个
d) 兄弟选择器：$(“prev ~ siblings”)匹配prev元素之后的所有sibling元素。所有同级元素sibling

案例

<body>
		<div class="main">
			<span>1<img src="img/1.jpg"/></span>
			2<img src="img/1.jpg"/>
		</div>
		3<img src="img/1.jpg">
		4<img src="img/1.jpg">
		<div>
			5<img src="img/1.jpg">
		</div>
//		1..main里所有的img设置border: 5px solid red
//		2..main里的子元素img设置border: 5px solid green
//		3..main的相邻元素img设置border:5px solid blue
//		4. .main的所有兄弟元素img设置border:5px solid yellow
		<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
		<script type="text/javascript">
//			$('.main img').css('border','5px solid red');
//			$('.main>img').css('border','5px solid green');
//			$('.main+img').css('border','5px solid blue');
			$('.main~img').css('border','5px solid yellow');
		</script>
	</body>

常用伪类选择器：可以看作是一种特殊的类选择符

选择器          说明
:first			匹配找到的第1个元素
:last			匹配找到的最后一个元素
:eq			    匹配一个给定索引值的元素
:even			匹配所有索引值(下标)为偶数的元素
:odd			匹配所有索引值(下标)为奇数的元素
:gt(index)	    匹配所有大于给定索引值的元素
:lt(index)	    匹配所有小于给定索引值的元素
:not			去除所有与给定选择器匹配的元素

案例:

<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
		</ul>
		<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
		<script type="text/javascript">
			/*
			 * :first				匹配找到的第1个元素
				:last				匹配找到的最后一个元素
				:eq				匹配一个给定索引值的元素
				:even				匹配所有索引值为偶数的元素
				:odd				匹配所有索引值为奇数的元素
				:gt(index)		匹配所有大于给定索引值的元素
				:lt(index)		匹配所有小于给定索引值的元素
				:not				去除所有与给定选择器匹配的元素

			 */
//			$('ul li:first').css('background',"red");
//			$('ul li:last').css('background',"red");
//			$('ul li:eq(3)').css('background',"red");
//			$('ul li:even').css('background',"red");
//			$('ul li:odd').css('background',"green");
//			$('ul li:gt(3)').css('background',"red");
//			$('ul li:lt(3)').css('background',"red");
			$('ul li:not(:eq(6))').css('background',"red");
		</script>
	</body>

三. jQuery属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				 100px;
				height: 100px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="box" title="pox" width="100px" height="100px" border='1px solid black' >
			
		</div>
		<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
		<script type="text/javascript">
			var $div = $('#box');
			
//			$div.attr('id','boxid');
//			alert($div.attr('class'));
//设置属性和值,只有属性时返回属性值


//addClass(class|fn)
//为每个匹配的元素添加指定的类名。

//removeClass([class|fn])
//从所有匹配的元素中删除全部或者指定的类。





			$div.click(function(){
//				$div.toggleClass('ddddd');
// 如果存在就删除一个类, 如果不存在就添加一个类。


//html() ===  innerHTML,取得第一个匹配元素的html内容。传参设置,不传是获取.
//				$(this).html('<strong>中国</strong>');
//				alert($(this).html())


//text() === innerText ,取得所有匹配元素的内容(不包括解析的标签),传参写入,不传参获取
				$(this).text('<strong>中国</strong>');
				alert($(this).text());
			})
		</script>
	</body>
</html>

四. jQuery动画

(一) 显隐动画

show():显示
hide():隐藏
原理：hide()通过改变元素的高度宽度和不透明度，直到这三个属性值到0；
show()从上到下增加元素的高度，从左到右增加元素宽度，从0到1增加透明度，直至内容完全可见。
参数：
show()
show(speed,callback)
++speed++:字符串或数字，表示动画将运行多久（slow=0.6/normal=0.4/fast=0.2）
++callback++:动画完成时执行的方法

(二) 显隐切换

toggle():切换元素的可见状态
原理：匹配元素的宽度、高度以及不透明度，同时进行动画，隐藏动画后将display设置为none
参数：
toggle(speed)
toggle(speed,callback)
toggle(boolean)
++speed++:字符串或数字，表示动画将运行多久（slow=0.6/normal=0.4/fast=0.2）
++easing++:使用哪个缓冲函数来过渡的字符串（linear/swing）
++callback++:动画完成时执行的方法
++boolean++:true为显示 false为隐藏

(三) 滑动

1. 显隐滑动效果

slideDown():滑动隐藏
slideUp():滑动显示
参数：
slideDown(speed,callback)
slideUp(speed,callback)

2. 显隐切换滑动

slideToggle():显隐滑动切换
参数：
slideToggle(speed,callback)

(四) 渐变：通过改变不透明度

1. 淡入淡出

fadeIn()
fadeOut()
参数：
fadeIn(speed,callback)
fadeOut(speed,callback)

2. 设置淡出透明效果

fadeTo():以渐进的方式调整到指定透明度
参数：
fadeTo(speed,opacity,callback)

3. 渐变切换：结合fadeIn和fadeOut

fadeToggle()
参数：
fadeOut(speed,callback)

(五) 自定义动画：animate()

用animate模拟show():
show:表示由透明到不透明
toggle:切换
hide:表示由显示到隐藏

.animate({属性:属性值,属性:属性值},运动时间,fn)

例题:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				 100px;
				height: 100px;
				background: red;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<input type="button" name="btn" id="btn" value="效果" />
		<div id="box">
			
		</div>
		<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
		<script type="text/javascript">
			$('#btn').click(function(){
//				$('#box').hide(5000,function(){
////					$(this).show(5000)
//		
//				});
//				$('#box').toggle(5000);
//				$('#box').slideUp(5000,function(){
//					alert('hehe')
//					$(this).slideDown(5000);
//				})
//				$('#box').slideToggle(4000);
//				$('#box').fadeOut(5000,function(){
//					$(this).fadeIn(5000,function(){
//						$(this).fadeTo(3000,0.3);
//					})
//				})
//				$('#box').fadeToggle(3000)
				$('#box').animate({left:800},30,function(){
					$(this).animate({top:600},30,function(){
						$(this).animate({left : 0},30,function(){
							$(this).animate({top : 100},30)
						})
					})
				})
			})
		</script>
	</body>
</html>

jQuery进阶

一、遍历

each(callback)

$('ul li').each(function(){}) 对象方法
$.each(obj,function(index,value){}) 工具方法

//each(function(){})    对象方法
//$.each(obj,function(){}) 工具方法
//			$('ul li').click(function(){
//				$(this).css('background','red');
//			})
			let $lis = $('ul li');
//			$lis.each(function(index,value){
////				$(value).click(function(){
////					alert($(this).text());
////				})
//				$(value).hover(function(){
//					$(this).css('background','red');
//				},function(){
//					$(this).css('background',"");
//				})
//			})

			$.each($lis,function(index,value){
				$(value).mouseenter(function(){
					$(this).css('background','red');
				})
				$(value).mouseleave(function(){
					$(this).css('background','');
				})
			})

二、Ajax

(一) .load()方法

1. .load三个参数

（1）参数一：url必选(url,参数类型字符串)
（2）参数二：data可选，发送key:value数据，参数类型为object
（3）参数三：callback可选，回调函数，参数类型为函数Function（function可传（response,status,xhr））
response获取所返回的结果，可对其进行数据的操作
status当前我们获取数据的状态success成功error失败
xhr:把前面两个参数的功能全部实现，他本身就是一个对象，前两个对象相当于他的属性
（4）

案例一：本地.html文件
案例二：服务器文件.php文件（获取方式get和post）

(二)

.get():以get方式发送数据、处理静态页
.post():以post方式发送数据
.getScript():专业处理js文件
.getJSON():专业处理JSON文件

//.get()
            $('#btn').click(function(){
//				$.get('php/index.php?name=小罗&age=30&t=' + new Date().getTime(),function(data){
//					$('#box').text(data);
//				})
//				$.get('php/index.php?t=' + new Date().getTime(),"name=小罗&age=30",function(data){
//					$('#box').text(data);
//				})
				$.get('php/index.php?t=' + new Date().getTime(),{name:"小罗",age:30},function(data){
					$('#box').text(data);
				})
			})
			
//.post()
            $('#btn').click(function(){
//				$.post('php/index.php',"name=小王&age=17",function(data){
//					$('#box').text(data);
//				})
				$.post('php/index.php',{name:"小王",age:17},function(data){
					$('#box').text(data);
				})
			})

//.getScript()			
			$('#btn').click(function(){
				$.getScript('js/index.js',function(){});
			})

//.getJSON()			
            $("#btn").click(function(){
				$.getJSON("index.json",function(data){
					var str = '';
					$(data).each(function(index,value){
						str = `用户名:<strong>${value.name}</strong><em>${value.age}</em><br>`;
						$('#box').append(str);
					})
					
				})
			})

1. 三个参数

(1) 参数一：url:必选（url参数类型字符串）
(2) 参数二：data：可选，发送key:value数据，参数类型为object(带?,字符串,对象)
(3) 参数三：callback：可选，回调函数，参数类型为函数Function
(4) type可选，字符串，主要设置返回文件的类型($.getScript和.getJSON无此参数)

2. $.get和$.post方式之间的区别：

(1) $.get是以$_GET方式接受数据$.post是以$_POST方式接受数据
(2) $.get可以带?方式来传参，$.post不能以?方式传参

(三) $.ajax():(底层方法讲解)

url:外部文件地址
type:提交文件方式，GET和POST
data:传参方式（字符串，对象）
success:回调函数 Function(response,status,xhr){}
dateType:返回数据类型

            $.ajax({
				type:"get",
				url:"index.php?name=张三&age=18",
				async:true,
				success : function(data){
					alert(data);
				}
			});

三、DOM操作

(一) 创建元素节点

1. $(html):创建节点

如：$(“<div title = ‘盒子’>dom</div>”);

(二) 创建文本

var $div = $(“<div>我是DOM</div>”)
$(“body”).append($div);

(三) 设置属性

var $div = $("<div title=‘div盒子’>我是DOM</div>")
$("body").append($div);

(四) DOM插入

1. 内部插入：(子集)

(1) append():向元素内部增加内容（末尾）
(2) appendTo():将要增加的内容增加到元素中
(3) prepend():向元素内部增加内容（前置）
(4) prependTo():将要增加的内容增加到元素中

2. 外部插入：（同级）

(1) after():在元素后面插入内容
(2) insertAfter():将内容插入元素后面
(3) before():在元素前面插入内容
(4) insertBefore():将内容插入元素前面

(五) 删除

1. remove():删除匹配元素

2. empty():清空子节点内容

            $('#btn').click(function(){
				$('h3').remove();
			})
			$("#btn1").click(function(){
				$('h4').empty();
			})

(六) 克隆：创建指定节点的副本

1. clone()

            $('h3').click(function(){
				//true: 包含事件
				$(this).clone(true).appendTo($('body'));
			})

true:表示复制属性、样式和事件

(七) 替换：

1. replaceWith():将指定元素替换成匹配元素

2. replaceAll():用匹配元素替换成指定元素

            var $a = $('a');
			$a.each(function(){
				$(this).click(function(){
//					$(this).replaceWith("<input type='button' value='" + $(this).text() + "'>" );
					$("<input type='button' value='" + $(this).text() + "'>").replaceAll($(this));
				})
			})
			
			
			
			
			//注：
			$(document).onclick(function(evt){
				
				//阻止默认行为
				evt.preventDefault();
				//阻止事件冒泡
				evt.stopPropagation();
				//既阻止默认行为也阻止事件冒泡
				return false;
			})

四、图片翻转

<doctype html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jquery实现图片翻牌旋转特效</title>
		<style>
			*{margin:0px;padding:0px;}
			li{list-style:none;}
			#brand{
				330px;
				height:400px;
				border:1px solid #dddddd;
				box-shadow:0px 0px 5px #dddddd;
				margin:30px auto;
			}
			#brand .title{
				100%;
				height:35px;
				line-height:35px;
				font-size:16px;
				margin-top:4px;
				border-bottom:2px solid #33261c;
				text-align:center;
				color:#33261c;
			}
			#brand .bd-box{
				284px;
				height:358px;
				overflow:hidden;
				padding:0px 24px;
			}
			#brand .bd-box li{
				float:left;
				122px;
				height:77px;
				overflow:hidden;
				position:relative;
				margin:10px 10px 0px 10px;
			}
			#brand .bd-box li img{
				120px;
				height:75px;
				border:1px solid #e9e8e8;
				position:absolute;
				left:0px;
				top:0px;
				z-index:2;
				overflow:hidden;
			}
			#brand .bd-box li span{
				120px;
				height:0px;
				border:1px solid #e9e8e8;
				position:absolute;
				left:0px;
				top:38px;
				z-index:1;
				text-align:center;
				line-height:75px;
				font-size:14px;
				color:#FFF;
				background:#ffa340;
				font-weight:bold;
				overflow:hidden;
				display:none;
			}
			#brand .bd-box li a{
				120px;
				height:75px;
				position:absolute;
				left:0px;
				top:0px;
				z-index:3;
			}
		</style>
		<script type="text/javascript" src="jquery-1.8.3.js"></script>
		<script type="text/javascript">
			$(function(){
				const $lis = $('#brand .bd-box li');
				$lis.each(function(){
					$(this).hover(function(){
						var $img = $(this).find('img');
						var $span = $(this).children('span');
						$span.stop();
						$img.animate({height : 0,top : 37},500,function(){
							$img.hide();
							$span.show().animate({height : 75,top : 0},500)
						})
					},function(){
						var $img = $(this).find('img');
						var $span = $(this).children('span');
						$img.stop();
						$span.animate({height : 0,top : 37},500,function(){
							$span.hide();
							$img.show().animate({height : 75,top : 0},500)
						})
					})
				})
			})
		</script>
	</head>
	<body>
		<div id="brand">
			<div class='title'>
				热门品牌推荐
			</div>
			<ul class='bd-box'>
				<li>
					<a href="#"> </a>
					<img src="images/1.jpg" />
					<span>肌龄</span>
				</li>
				<li>
					<a href="#"> </a>
					<img src="images/2.jpg" />
					<span>肌龄</span>
				</li>
				<li>
					<a href="#"> </a>
					<img src="images/3.jpg" />
					<span>肌龄</span>
				</li>
				<li>
					<a href="#"> </a>
					<img src="images/4.jpg" />
					<span>肌龄</span>
				</li>
				<li>
					<a href="#"> </a>
					<img src="images/5.jpg" />
					<span>肌龄</span>
				</li>
				<li>
					<a href="#"> </a>
					<img src="images/6.jpg" />
					<span>肌龄</span>
				</li>
				<li>
					<a href="#"> </a>
					<img src="images/7.jpg" />
					<span>肌龄</span>
				</li>
				<li>
					<a href="#"> </a>
					<img src="images/8.jpg" />
					<span>肌龄</span>
				</li>
			</ul>
		</div>
		
	</body>
</html>

五、瀑布流

<!DOCTYPE html>
<html>
	
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			body {
				height: 100%;
			}
			div.wrap {
				 100%;
				margin: 0 auto;
				background: #DDD;
			}
			div.wrap div {
				position: absolute;
				 220px;
				padding: 4px;
				border: 1px solid #000;
			}
			div.wrap div img {
				 220px;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
		<script>
			window.onload = function(){
				pbl("wrap");
			}
			$(window).resize(function(){
				pbl("wrap");
			})
		function pbl(ele,child,space){
			//初始化参数
			if(!ele){
				return;
			}
			child = child || 'div';
			space = space || 10;
			//获取大盒子
			var $bigBox = $("#" + ele);
			//获取所有的子盒子
			var $childs = $bigBox.children(child);
			//大盒子的宽度
			var bigBoxWidth = $bigBox.width();
			//一个子盒子的宽
			var childWidth = $childs.eq(0).width();
			//计算列数
			var colNum = Math.floor(bigBoxWidth / childWidth);
	
			//计算左右间隙
			var padding = Math.floor((bigBoxWidth - childWidth * colNum) / (colNum + 1));
			//初始化第一行的坐标
			var arr = [];
			for(var i = 0;i < colNum;i ++){
				arr[i] = {};
				arr[i].left = (i * childWidth) + (i + 1) * padding;
				arr[i].top = space;
			}
			
			//遍历所有的子节点，放到最小高度的列中
			$childs.each(function(index,value){
				$(value).css('position','absolute');
				var i = minTop(arr);
//				alert(i);
				$(value).animate({left : arr[i].left,top : arr[i].top},3000,function(){
					
				})
				arr[i].top += $(value).outerHeight();
					$bigBox.css('height',arr[i].top);
			})
		}
		function minTop(arr){
			var min = arr[0].top;
			var index = 0;
			for(var i = 0,len = arr.length;i < len;i ++){
				if(min > arr[i].top){
					min = arr[i].top;
					index = i;
				}
			}
			return index;
		}
		</script>
	</head>

	<body>
		<div class="wrap" id="wrap">
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/1.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/2.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/3.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/4.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/5.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/6.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/7.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/8.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/9.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/10.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/11.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/12.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/13.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/14.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/15.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/16.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/17.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/18.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/19.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/20.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/21.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/22.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/23.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/24.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/25.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/26.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/27.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/28.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/29.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/30.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/31.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/32.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/33.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/34.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/35.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/36.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/37.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/38.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/39.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/40.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/41.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/42.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/43.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/44.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/45.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/46.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/47.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/48.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/49.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/50.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/51.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
		</div>
	</body>

</html>

查看全文

相关阅读:
win7无法访问2003共享的解决方法（转）
nokia vcf文件导入iphone（转）
zblog之密码修改
 vs2010 dump 调试
 T400 CTO 突遇windows update当前无法检查更新,因为服务为运行。您可能需要重新启动计算机!
练手卦，奖金何时发？
QUdpSocket 4.6 严重丢包
 修行
 占问事宜：我买的择日书籍何时能到？
Silverlight 5 Beta新特性[6]低延迟对WAV格式声音效果支持

原文地址：https://www.cnblogs.com/zhongchao666/p/9275624.html