技术文章 | Technical articles

jQuery源码笔记(四、持续更新)

一、 间歇模型

 

图片1.png 

 

我们想让轮播图显示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);

 

 

二、 手风琴效果

图片2.png 

分析:

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

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

 

DOM结构:

<div id="box">

<ul>

 <li><img src="images/0.jpg" alt=""></li>

 <li><img src="images/1.jpg" alt=""></li>

 <li><img src="images/2.jpg" alt=""></li>

 <li><img src="images/3.jpg" alt=""></li>

 <li><img src="images/4.jpg" alt=""></li>

</ul>

</div>

 

1.1 普通效果

// 添加鼠标移入事件

$no0.mouseenter(function() {

// 防流氓

$("li").stop(true);

$no1.animate({"left": 560}, 500);

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

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

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

})

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 <div id="carousel">

30  <ul>

31   <li>

32    <div></div>

33    <img src="images/0.jpg" alt="">

34   </li>

35   <li>

36    <div></div>

37    <img src="images/1.jpg" alt="">

38   </li>

39   <li>

40    <div></div>

41    <img src="images/2.jpg" alt="">

42   </li>

43   <li>

44    <div></div>

45    <img src="images/3.jpg" alt="">

46   </li>

47   <li>

48    <div></div>

49    <img src="images/4.jpg" alt="">

50   </li>

51  </ul>

52 </div>

 

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 });

图片3.png

1.3、数组思维

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

10 // 信号量

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

12 var idx = 0;

13 

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

15 var scoreArr = [0,0];

16 

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

18 var h2Arr = [$("#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 });

 

 

关注微信公众号“icketang”,获取最新前端资讯,学习资料  

微信个人号二维码.jpg
完整笔记、web前端视频教程
,请添加微信“haomei0452”免费领取 


B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战


QQ图片20190401143635.jpg


上一篇文章: jQuery源码笔记(三、持续更新)
下一篇文章: IT培训靠谱吗?

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>