linux开发板显示百叶窗图片,WEB前端第四十五课——jQuery框架（三）animate、轮播图&百叶窗案例...

1.呼吸轮播图案例

① user-select，该属性用于控制用户能够选中文本，

常用属性值：

none，表示元素及其子元素的文本不可选中。

text，用户可以选择文本。

auto、all、contain等

② is(":animated")，用于判断元素是否处于动画状态。

为了避免动画积累效应，设置该判断条件，如果元素不处于动画状态才添加新的动画。

语法：$("选择器") .is(":animated");　　//返回值为Boolean

③ index()，搜索匹配的元素返回指定元素的索引值，语法格式有三种写法：

$("选择器") .index();　　//表示当前 jq对象的第一个元素相对于其同辈元素的位置索引；

$("选择器1") .index("选择器2");　　//表示选择器1对应的元素在所有选择器2元素中的索引位置；

$("选择器1") .index($("选择器2") );　　//表示选择器2对应的元素在所有选择器1元素中的索引位置。呼吸轮播图li{

width: 15px;height: 15px;border: 3px solid orangered;

border-radius: 50%;display: inline-block;float: left;

margin: 0 3px;padding:0;cursor: pointer;

}

.anchorSelect{background-color: aqua;}" _ue_custom_node_="true"><>=7){

picIndex=0;

}

$imgLis.eq(picIndex).fadeIn(1000);

$anchorLis.eq(picIndex).addClass("anchorSelect")

});

//设置通过锚点方式切换图片

$anchorLis.mouseenter(function () {

$(".anchorSelect").removeClass("anchorSelect");

$imgLis.eq(picIndex).fadeOut(1000);

picIndex=$(this).index();       //获取当前节点在其对应的jq对象中的索引位置

$(this).addClass("anchorSelect");

$imgLis.eq(picIndex).fadeIn(1000);

});

//  设置定时自动触发轮播，将向右按钮切换时间设置间隔执行函数。

timer=setInterval(function () {

if ($imgLis.is(":animated")){

return;

}

$imgLis.eq(picIndex).fadeOut(2000);

$anchorLis.eq(picIndex).removeClass("anchorSelect")

picIndex++;

if (picIndex>=7){

picIndex=0;

}

$imgLis.eq(picIndex).fadeIn(2000);

$anchorLis.eq(picIndex).addClass("anchorSelect")

},3000);" _ue_custom_node_="true">

2.animate()方法

jQuery中的自定义动画方法

① 基本形态，animate函数包含领个参数，第一个参数是动画的最终样式(JSON格式)

第二个参数是执行动画所需要的时间(毫秒)

语法示例：$("选择器") .animate({JSON样式}, time);

即使样式中只有一种属性，也要使用JSON格式书写，不能使用k,v格式。

在jQuery中“background-color、background-position”不能通过animate()方法生成动画效果。

能够使用animate()生成动画效果的属性基本上都是数值型的、可量化的。

② 动画顺序

同步原则，同一个元素如果存在多个animate()命令，则按照添加顺序执行；

异步原则，不同元素分别设置各自的animate()命令，则它们同时执行。

③ 匀速运动

animate()方法的第三个参数用于定义动画时间曲线，可选参数，

animate()方法默认的动画并不是匀速执行的，而是先加速后减速的方式。

animate()方法自带的两种动画效果，linear(线性匀速)、swing(先加速后减速，默认)

④ 回调函数

animate()方法的第四个参数用于定义回调函数，可选参数，为动画执行完成时执行的函数。Title

3.stop()方法

用于停止元素动画。

语法：$("选择器") .stop(clearAllAnimation，goToEnd);

该方法有两个参数(都是Boolean)：

第一个参数表示是否清空所有动画，默认为“false”，表示不清除；

第二个参数表示是否立即完成当前动画，默认为“false”，表示不立即完成。

两个参数都可以不写，此时采用默认值。

4.百叶窗案例

① find()，该方法用于搜索指定元素的所有符合条件的后代元素。

语法：$("选择器") .find("后代选择器");

ps：符合条件的后代包括子元素、孙元素等所有后代；

如果要返回所有后代元素，则后代选择器使用“*”。Title