2.一号店首页特效
1 $(function(){
2 //1.客戶服務的顯示和隱藏
3 customlist();
4 //2.商品列表鼠標移入顯示右側的詳細列表
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.商品列表鼠標移入顯示右側的詳細列表
20 function leftNav(){
21 //鼠標移過 和鼠標移出的復合事件
22 $(".leftNav ul li").hover(
23 function(){
24 //添加樣式
25 $(this).find(".fj").addClass("nuw");
26 //顯示對應層的詳細的div
27 $(this).find(".zj").show();
28 },
29 function(){
30 //刪除樣式
31 $(this).find(".fj").removeClass("nuw");
32 //隱藏對應層的詳細div
33 $(this).find(".zj").hide();
34 }
35 );
36 }
37
38 //3.圖片輪播
39 function changeImg(){
40 //定義索引編號
41 var index=0;
42 //定義默認動畫,開始
43 var stop=false;
44 //獲取圖片列表
45 var $imgli=$(".slide_box").children("li");
46 //獲取所有的數字列表
47 var $numli=$(".num").children("li");
48 //數組列表鼠標移過和移出動態效果
49 $numli.mouseover(function(){
50 //動態效果停止
51 stop=true;
52 //獲取當前元素的索引下標
53 index=$numli.index($(this));
54 //該索引的圖片元素淡入
55 $imgli.eq(index).stop(true,true).fadeIn().siblings().fadeOut();
56 //改變當前索引所對應的數字樣式
57 $(this).addClass("active").stop(true,true)
58 .siblings().removeClass("active");
59 }).mouseout(function(){
60 //動畫停止
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 //改變當前索引所對應的數字樣式
72 $numli.eq(index).addClass("active").stop(true,true)
73 .siblings().removeClass("active");
74 },3000);
75 }
76
77 //4.圖書快訊滾動
78 $(function(){
79 function movedown(){
80 //1.定義第一個元素的上邊距
81 var marginTop=0;
82 //2.定義動畫默認是開始
83 var stop=false;
84 //3.定義周期函數
85 var interval=setInterval(function(){
86 //如果動畫停止，下面操作不執行
87 if(stop) return;
88 //設置li標簽的動畫，元素上邊距逐漸減少
89 $("#express").children("li").first().animate(
90 {
91 'margin-top':marginTop--
92 },
93 0,
94 function(){
95 //獲取第一個元素
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 //動畫停止
108 stop=true;
109 }).mouseout(function(){
110 //動畫開始
111 stop=false;
112 });
113
114 }
115 movedown();
116 });
?
轉載于:https://www.cnblogs.com/holly8/p/8387900.html
總結
- 上一篇： 有了电子登机牌还查身份证吗
- 下一篇： 怎么在pe格式化硬盘 PE环境格式化硬盘