一. 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>