2.一号店首页特效
1 $(function(){
2 //1.客戶服務(wù)的顯示和隱藏
3 customlist();
4 //2.商品列表鼠標(biāo)移入顯示右側(cè)的詳細(xì)列表
5 leftNav();
6 //3.圖片輪播
7 changeImg();
8 });
9 //1.客戶的顯示和隱藏
10 function customlist(){
11 $(".ss_list").mouseenter(function(){
12 //從上到下展開至顯示
13 $(".ss_list_bg").slideDown();
14 }).mouseleave(function(){
15 //從下至上收縮至隱藏
16 $(".ss_list_bg").slideUp();
17 });
18 }
19 //2.商品列表鼠標(biāo)移入顯示右側(cè)的詳細(xì)列表
20 function leftNav(){
21 //鼠標(biāo)移過(guò) 和鼠標(biāo)移出的復(fù)合事件
22 $(".leftNav ul li").hover(
23 function(){
24 //添加樣式
25 $(this).find(".fj").addClass("nuw");
26 //顯示對(duì)應(yīng)層的詳細(xì)的div
27 $(this).find(".zj").show();
28 },
29 function(){
30 //刪除樣式
31 $(this).find(".fj").removeClass("nuw");
32 //隱藏對(duì)應(yīng)層的詳細(xì)div
33 $(this).find(".zj").hide();
34 }
35 );
36 }
37
38 //3.圖片輪播
39 function changeImg(){
40 //定義索引編號(hào)
41 var index=0;
42 //定義默認(rèn)動(dòng)畫,開始
43 var stop=false;
44 //獲取圖片列表
45 var $imgli=$(".slide_box").children("li");
46 //獲取所有的數(shù)字列表
47 var $numli=$(".num").children("li");
48 //數(shù)組列表鼠標(biāo)移過(guò)和移出動(dòng)態(tài)效果
49 $numli.mouseover(function(){
50 //動(dòng)態(tài)效果停止
51 stop=true;
52 //獲取當(dāng)前元素的索引下標(biāo)
53 index=$numli.index($(this));
54 //該索引的圖片元素淡入
55 $imgli.eq(index).stop(true,true).fadeIn().siblings().fadeOut();
56 //改變當(dāng)前索引所對(duì)應(yīng)的數(shù)字樣式
57 $(this).addClass("active").stop(true,true)
58 .siblings().removeClass("active");
59 }).mouseout(function(){
60 //動(dòng)畫停止
61 stop=false;
62 });
63 setInterval(function(){
64 if(stop) return;
65 index++;
66 if(index>$imgli.length){
67 index=0;
68 }
69 //該索引的圖片元素淡入
70 $imgli.eq(index).stop(true,true).fadeIn().siblings().fadeOut();
71 //改變當(dāng)前索引所對(duì)應(yīng)的數(shù)字樣式
72 $numli.eq(index).addClass("active").stop(true,true)
73 .siblings().removeClass("active");
74 },3000);
75 }
76
77 //4.圖書快訊滾動(dòng)
78 $(function(){
79 function movedown(){
80 //1.定義第一個(gè)元素的上邊距
81 var marginTop=0;
82 //2.定義動(dòng)畫默認(rèn)是開始
83 var stop=false;
84 //3.定義周期函數(shù)
85 var interval=setInterval(function(){
86 //如果動(dòng)畫停止，下面操作不執(zhí)行
87 if(stop) return;
88 //設(shè)置li標(biāo)簽的動(dòng)畫，元素上邊距逐漸減少
89 $("#express").children("li").first().animate(
90 {
91 'margin-top':marginTop--
92 },
93 0,
94 function(){
95 //獲取第一個(gè)元素
96 var $first=$(this);
97 if(!$first.is(":animated")){30>20
98 if((-marginTop)>$first.height()){
99 $first.css({'margin-top':0}).appendTo($('#express'));
100 marginTop=0;
101 }
102 }
103 }
104 );
105 },50);
106 $("#express").mouseover(function(){
107 //動(dòng)畫停止
108 stop=true;
109 }).mouseout(function(){
110 //動(dòng)畫開始
111 stop=false;
112 });
113
114 }
115 movedown();
116 });
?
轉(zhuǎn)載于:https://www.cnblogs.com/holly8/p/8387900.html
總結(jié)
- 上一篇： 有了电子登机牌还查身份证吗
- 下一篇： Traumland--梦乡--IPA--