jQuery源码笔记（四、持续更新）【爱创课堂专业做前端】

一、 间歇模型

我们想让轮播图显示3张图片，我们的编程思路是使用定时器，我们想要使图片每2000ms更换一次，然后完成动画的时间是600ms，那么定时器的时间应该是它们的加和，所以应该是2600ms

var idx = 0;

setInterval(function(){

idx++;

$("#unit").animate({“top”:-90 * idx},500);

},2500);

拉动的策略就是右按钮的策略：

setInterval(function(){

idx ++;

$unit.animate({“top”: -90 * idx} , 500,function(){

// 验证

if(idx > $unit.children().length / 3 - 2){

idx = 0;

$unit.css(“top”,0);

}

});

}, 2500);

二、 手风琴效果

分析：

我们定义手风琴图的宽为900px, 里面有5张图片，每一张的图片的间隔应该是180px

当鼠标移入图片的时候， 当前图片展开（560px）, 剩余的四张图片压缩，每一张图片的间隔应该是85px

DOM结构：

1

2

3

• 

• 4

• 

• 5

• 

• 6

• 

• 7

• 

• 8

  9

  1.1 普通效果
  1 // 添加鼠标移入事件

  2 $no0.mouseenter(function() {

  3 // 防流氓

  4 $(“li”).stop(true);

  5 $no1.animate({“left”: 560}, 500);

  6 $no2.animate({“left”: 560 + 85}, 500);

  7 $no3.animate({“left”: 560 + 85 * 2}, 500);

  8 $no4.animate({“left”: 560 + 85 * 3}, 500);

  9 })

  10

  11 $no1.mouseenter(function() {

  12 // 防流氓

  13 $(“li”).stop(true);

  14 $no1.animate({“left”: 85}, 500);

  15 $no2.animate({“left”: 560 + 85}, 500);

  16 $no3.animate({“left”: 560 + 85 * 2}, 500);

  17 $no4.animate({“left”: 560 + 85 * 3}, 500);

  18 })

  19

  20 // 添加鼠标离开事件

  21 $box.mouseleave(function() {

  22 // 防流氓

  23 $(“li”).stop(true);

  24 $no1.animate({“left”: 180}, 500);

  25 $no2.animate({“left”: 180 * 2}, 500);

  26 $no3.animate({“left”: 180 * 3}, 500);

  27 $no4.animate({“left”: 180 * 4}, 500);

  28 })

  1.2 蒙版效果
  布局：

  29

  30

  31

• 32

  33

  34

  35

• 36

  37

  38

  39

• 40

  41

  42

  43

• 44

  45

  46

  47

• 48

  49

  50

  51

  52

  53

  交互效果：

  54 // 获取元素

  55 var $carousel = $("#carousel");

  56 // 所有li添加鼠标进入事件

  57 $(“li”).mouseenter(function(){

  58 // 信号量保存触发事件的对象序号

  59 var idx = $(this).index();

  60 $(“li”).stop(true);

  61

  62 // 当图片小于等于idx。往左移动85 * n

  63 $(“li:lt(” + (idx + 1) + “)”).each(function(i){

  64 // console.log(i);

  65 $(this).animate({“left” : 85 * i},500);

  66 });

  67

  68 // 当图片序号大于idx,往右移动

  69 $(“li:gt(” + idx + “)”).each(function(i){

  70 // console.log(i);

  71 $(this).animate({“left” : 560 + 85 * (idx + i)},500);

  72 });

  73

  74 // 对应的蒙版消失

  75 $(this).children(".mask").stop(true).fadeOut();

  76 // 其他Li蒙版还存在

  77 $(this).siblings().children(".mask").stop(true).fadeIn();

  78 });

  79

  80 // 鼠标离开。所有元素恢复原状

  81 $carousel.mouseleave(function(){

  82 $(“li”).stop(true);

  83 $(“li”).each(function(i){

  84 $(this).animate({“left” : 180 * i},500);

  85 });

  86 // 所有添加蒙版

  87 $(".mask").stop(true).fadeIn();

  88 });
  

  1.3、数组思维
  将相同类型的元素或者对象存放在数组中，通过下标得到任何一项。

  10 // 信号量

  11 // 信号量表示哪一队加分A对应0 B对应1

  12 var idx = 0;

  13

  14 // 将分数的数值保存在数组中

  15 var scoreArr = [0,0];

  16

  17 // 将显示分数的对象保存在数组中

  18 var h2Arr = [KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲fenshua"),("#fenshub")];

  19

  20 // 判断是哪一队加分

  21 $(".dui").click(function(){

  22 idx = $(this).index();

  23 });

  24

  25 // btn1点击事件

  26 $("#btn1").click(function(){

  27 // idx对应的scoreArr加分

  28 scoreArr[idx] += 1;

  29 // 将分数体现在元素身上

  30 h2Arr[idx].html(scoreArr[idx]);

  31 });

  32

  33 $("#btn2").click(function(){

  34 scoreArr[idx] += 2;

  35 h2Arr[idx].html(scoreArr[idx]);

  36 });