26、jQuery

一. jQuery简介

(一) jQuery是什么：

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

(二) jQuery优势

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

(三) 如何下载JQuery
官方网站：http://jquery.com/

(四) 如何引入JQuery包
引入本地的Jquery
使用Google提供的API导入

写第一个JQUery案例

(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 redc)  找到p标签元素给他添加边框border:1px solid greend)  找到全部元素改变字体28pxe)  找到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{width: 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{width: 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{width:330px;height:400px;border:1px solid #dddddd;box-shadow:0px 0px 5px #dddddd;margin:30px auto;}#brand .title{width: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{width:284px;height:358px;overflow:hidden;padding:0px 24px;}#brand .bd-box li{float:left;width:122px;height:77px;overflow:hidden;position:relative;margin:10px 10px 0px 10px;}#brand .bd-box li img{width:120px;height:75px;border:1px solid #e9e8e8;position:absolute;left:0px;top:0px;z-index:2;overflow:hidden;}#brand .bd-box li span{width: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{width: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 {width: 100%;margin: 0 auto;background: #DDD;}div.wrap div {position: absolute;width: 220px;padding: 4px;border: 1px solid #000;}div.wrap div img {width: 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>

转载于:https://www.cnblogs.com/zhongchao666/p/9275624.html