jQuery中国地图鼠标悬停展开显示区域分店特效

jQuery中国地图鼠标悬停展开显示区域分店特效

这是一款界面十分美观的jQuery中国地图鼠标悬停展开显示区域分店数量代码,鼠标悬停过渡动画效果也非常不错。

使用方法
在页面引入以下jquery-1.7.1.min.js和effects.js文件

1
2
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/effects.js"></script>

CSS样式
在页面引入以下public.css样式文件

1
<link type="text/css" rel="stylesheet" href="css/public.css" />

Html结构
在页面部分引入以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<div class="pageBox page4">    
<div class="map pagenow" data-rel="fadeIn">
<div class="item db">
<img src="images/db.png" />
<div class="area"></div>
<div class="area current"></div>
<div class="info">
  <div class="box">
      <div class="left">
          <h3>东北区</h3>
          <h4>87</h4>
          <h5>东北校区数量</h5>
      </div>
      <i></i>
  </div>
  <span class="round r1 pagenow delay100" data-rel="scaleIn"></span>
  <span class="round r2 pagenow delay200" data-rel="scaleIn"></span>
</div>
</div>
   
<div class="item hb">
<img src="images/hb.png" />
<div class="area"></div>
<div class="area current"></div>
<div class="info">
  <div class="box">
      <div class="left">
          <h3>华北区</h3>
          <h4>98</h4>
          <h5>华北分店数量</h5>
      </div>
      <i></i>
  </div>
  <span class="round r1 pagenow delay300" data-rel="scaleIn"></span>
  <span class="round r3 pagenow delay400" data-rel="scaleIn"></span>
</div>
</div>
   
<div class="item xn">
<img src="images/xn.png" />
<div class="area"></div>
<div class="area current"></div>
<div class="info">
  <div class="box">
      <div class="left">
          <h3>西南区</h3>
          <h4>48</h4>
          <h5>西南分店数量</h5>
      </div>
      <i></i>
  </div>
  <span class="round r1 pagenow delay900" data-rel="scaleIn"></span>
  <span class="round r2 pagenow delay1000" data-rel="scaleIn"></span>
  <span class="round r3 pagenow delay800" data-rel="scaleIn"></span>
</div>
</div>
   
<div class="item xb">
<img src="images/xb.png" />
<div class="area"></div>
<div class="area current"></div>
<div class="info">
  <div class="box">
      <div class="left">
          <h3>西北区</h3>
          <h4>61</h4>
          <h5>西北分店数量</h5>
      </div>
      <i></i>
  </div>
  <span class="round r1 pagenow delay600" data-rel="scaleIn"></span>
  <span class="round r2 pagenow delay500" data-rel="scaleIn"></span>
  <span class="round r3 pagenow delay700" data-rel="scaleIn"></span>
</div>
</div>
   
<div class="item hd">
<img src="images/hd.png" />
<div class="area"></div>
<div class="area current"></div>
<div class="loc">厦门总部</div>
<div class="info">
  <div class="box">
      <div class="left">
          <h3>华东区</h3>
          <h4>189</h4>
          <h5>华东分店数量</h5>
      </div>
      <i></i>
  </div>
  <span class="round r1 pagenow delay1200" data-rel="scaleIn"></span>
  <span class="round r3 pagenow delay1300" data-rel="scaleIn"></span>
</div>
</div>
   
<div class="item hz">
<img src="images/hz.png" />
<div class="area"></div>
<div class="area current"></div>
<div class="info">
  <div class="box">
      <div class="left">
          <h3>华中区</h3>
          <h4>85</h4>
          <h5>华中分店数量</h5>
      </div>
      <i></i>
  </div>
  <span class="round r2 pagenow delay1100" data-rel="scaleIn"></span>
</div>
</div>
   
<div class="item hn">
<img src="images/hn.png" />
<div class="area"></div>
<div class="area current"></div>
<div class="info">
  <div class="box">
      <div class="left">
          <h3>华南区</h3>
          <h4>90</h4>
          <h5>华南分店数量</h5>
      </div>
      <i></i>
  </div>
  <span class="round r2 pagenow delay1400" data-rel="scaleIn"></span>
</div>
</div>
</div>
<div class="world pagenow" data-rel="fadeIn">
<span class="dot"><em>中国</em></span>
</div>
<div class="change pagenow" data-rel="fadeInRight">
<div class="tab">
<ul>
  <li>分店地址:上海</li>
  <li>分店地址:北京</li>
  <li>分店地址:厦门</li>
  <li>分店地址:广州</li>
  <li>分店地址:西安</li>
</ul>
</div>
</div>
</div>

文件信息:

    1

    发表评论