- A+
所属分类：Web前端
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元素中的索引位置。
<head> <meta charset="UTF-8"> <title>呼吸轮播图</title> <script src="jQueryFiles/jquery-1.8.3.js"></script> <style> *{margin: 0;padding: 0;} .container{ width: 520px;height: 780px;margin: 0 auto;padding: 0; border: 1px solid fuchsia;position: relative; } .imgUl{list-style: none;} .imgUl li{position: absolute;display: none;} .imgUl li:first-child{display: block;} .leftBtn,.rightBtn{ width: 25px;height: 40px;background-color: darkorange; color: white;font-size: 30px;line-height: 36px;text-align: center; position: absolute;top: 46%;cursor: pointer; user-select: none; /*设定元素内文本内容无法选中*/ } .rightBtn{right: 0;} .anchorUl{ list-style: none;position: absolute;left: 32%;bottom: 50px; } .anchorUl>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;} </style> </head> <body> <div class="container"> <ul class="imgUl"> <li><a href="#"><img src="Images/Rotation/rotation01.jpg" alt="WEB前端第四十五课——jQuery框架（三）animate、轮播图&百叶窗案例" alt=""></a></li> <li><a href="#"><img src="Images/Rotation/rotation02.jpg" alt="WEB前端第四十五课——jQuery框架（三）animate、轮播图&百叶窗案例" alt=""></a></li> <li><a href="#"><img src="Images/Rotation/rotation03.jpg" alt="WEB前端第四十五课——jQuery框架（三）animate、轮播图&百叶窗案例" alt=""></a></li> <li><a href="#"><img src="Images/Rotation/rotation04.jpg" alt="WEB前端第四十五课——jQuery框架（三）animate、轮播图&百叶窗案例" alt=""></a></li> <li><a href="#"><img src="Images/Rotation/rotation05.jpg" alt="WEB前端第四十五课——jQuery框架（三）animate、轮播图&百叶窗案例" alt=""></a></li> <li><a href="#"><img src="Images/Rotation/rotation06.jpg" alt="WEB前端第四十五课——jQuery框架（三）animate、轮播图&百叶窗案例" alt=""></a></li> <li><a href="#"><img src="Images/Rotation/rotation07.jpg" alt="WEB前端第四十五课——jQuery框架（三）animate、轮播图&百叶窗案例" alt=""></a></li> </ul> <div class="leftBtn"><</div> <div class="rightBtn">></div> <ul class="anchorUl"> <li class="anchorSelect"><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div> <script> var $imgLis=$(".imgUl li"); var $leftBtn=$(".leftBtn"); var $rightBtn=$(".rightBtn"); var $anchorLis=$(".anchorUl li"); var timer=null; var picIndex=0; $leftBtn.click(function () { if ($imgLis.is(":animated")){ return; } //使用“.eq()”方法选择指定jq对象中对应索引的元素 $imgLis.eq(picIndex).fadeOut(1000); $anchorLis.eq(picIndex).removeClass("anchorSelect") picIndex--; // 设置锚点的选中状态切换 //向左翻页时索引值自减，当减到0时下次点击则从最后一个索引重复循环 if (picIndex<=-1){ picIndex=6; } $imgLis.eq(picIndex).fadeIn(1000); $anchorLis.eq(picIndex).addClass("anchorSelect") }); $rightBtn.click(function () { //使用“animated”属性判断指定元素中是否存在动画运行， //如果有则忽略任何新的触发操作，进而避免“动画积累”问题 // 该方式与“stop()"方式存在一定差别。 if ($imgLis.is(":animated")){ return; } $imgLis.eq(picIndex).fadeOut(1000); $anchorLis.eq(picIndex).removeClass("anchorSelect") picIndex++; if (picIndex>=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); </script> </body> </html>
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()方法的第四个参数用于定义回调函数，可选参数，为动画执行完成时执行的函数。
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jQueryFiles/jquery-1.8.3.js"></script> <style> .div{ width: 100px;height: 100px;background-color: orangered; position: absolute; } </style> </head> <body> <div class="div"></div> <script> $('.div').click(function () { $(this).animate({left:700},2000,"linear") .animate({height:500},1000,"swing") .animate({height: 100,top:400},1000,function () { $(this).css("backgroundColor","skyblue") }); }); </script> </body> </html>
3.stop()方法
用于停止元素动画。
语法：$("选择器") .stop(clearAllAnimation，goToEnd);
该方法有两个参数（都是Boolean）：
第一个参数表示是否清空所有动画，默认为“false”，表示不清除；
第二个参数表示是否立即完成当前动画，默认为“false”，表示不立即完成。
两个参数都可以不写，此时采用默认值。
4.百叶窗案例
① find()，该方法用于搜索指定元素的所有符合条件的后代元素。
语法：$("选择器") .find("后代选择器");
ps：符合条件的后代包括子元素、孙元素等所有后代；
如果要返回所有后代元素，则后代选择器使用“*”。
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jQueryFiles/jquery-1.8.3.js"></script> <style> *{margin: 0;padding: 0;} .container{ width: 912px;height: 780px;border: 1px solid orangered; margin: 0 auto;overflow:hidden;position: relative; } .container ul{list-style: none;cursor: pointer} .container ul li{position: absolute} .cover{ width: 100%;height: 780px;background-color: rgba(255,100,150,.6); position: absolute; } </style> </head> <body> <div class="container"> <ul> <li><div class="cover"></div><img src="Images/Rotation/rotation01.jpg" alt="WEB前端第四十五课——jQuery框架（三）animate、轮播图&百叶窗案例" alt=""></li> <li><div class="cover"></div><img src="Images/Rotation/rotation02.jpg" alt="WEB前端第四十五课——jQuery框架（三）animate、轮播图&百叶窗案例" alt=""></li> <li><div class="cover"></div><img src="Images/Rotation/rotation03.jpg" alt="WEB前端第四十五课——jQuery框架（三）animate、轮播图&百叶窗案例" alt=""></li> <li><div class="cover"></div><img src="Images/Rotation/rotation04.jpg" alt="WEB前端第四十五课——jQuery框架（三）animate、轮播图&百叶窗案例" alt=""></li> <li><div class="cover"></div><img src="Images/Rotation/rotation05.jpg" alt="WEB前端第四十五课——jQuery框架（三）animate、轮播图&百叶窗案例" alt=""></li> <li><div class="cover"></div><img src="Images/Rotation/rotation06.jpg" alt="WEB前端第四十五课——jQuery框架（三）animate、轮播图&百叶窗案例" alt=""></li> </ul> </div> <script> var $picLis=$(".container ul li"); var picIndex=0; for(var i=0;i<$picLis.length;i++){ picIndex=$picLis.eq(i).index(); $picLis.eq(i).css("left",picIndex*152+"px") } $picLis.mouseenter(function () { $picLis.stop(); var selectIndex=$(this).index(); for(var i=0;i<$picLis.length;i++){ picIndex=$picLis.eq(i).index(); if (picIndex<=selectIndex){ $picLis.eq(i).animate({"left":picIndex*78.4+"px"},1000); }else { $picLis.eq(i).animate({"left":(picIndex-1)*78.4+520+"px"},1000); } } $(this).find(".cover").stop(true,true).fadeOut(1000); }).mouseleave(function () { $picLis.stop(); for(var i=0;i<$picLis.length;i++){ picIndex=$picLis.eq(i).index(); $picLis.eq(i).animate({"left":picIndex*152+"px"},1000); $(this).find(".cover").stop(true,true).fadeIn(1000); } }); </script> </body> </html>
