jQuery开发平台黑色通栏导航代码

jQuery开发平台黑色通栏导航代码

jquery模仿腾讯ai网站二级下拉黑色通栏导航代码。

使用方法

在头部引入JS文件。

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

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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<div class="mod-header">
<div class="cat">
<div class="cat-box" data-cat="engine">
<div class="layout">
<div class="cat-group">
<h3 class="cat-tit"><div class="cat-ico"><i class="ico-lan"></i></div>自然语言处理</h3>
<ul class="cat-list">
<li class="cat-item">
<div class="cat-item-main">
<span>基础文本分析</span>
</div>
<div class="cat-item-sub">
<div class="cat-item-row">
<a href="#participle">分词/词性</a>
<a href="#proper">专有名词</a>
<a href="#synonym">同义词</a>
</div>
</div>
</li>
<li class="cat-item">
<div class="cat-item-main">
<span>语义解析</span>
</div>
<div class="cat-item-sub">
<div class="cat-item-row">
<a href="#">意图/成分<i class="cat-tag is-beta"></i></a>
</div>
</div>
</li>
<li class="cat-item">
<div class="cat-item-main">
<a href="#">情感分析</a>
</div>
</li>
<li class="cat-item">
<div class="cat-item-main">
<span>机器翻译</span>
</div>
<div class="cat-item-sub">
<div class="cat-item-row">
<a href="#">文本翻译</a>
<a href="#">图片翻译<i class="cat-tag is-new"></i></a>
<a href="#">语音翻译<i class="cat-tag is-new"></i></a>
</div>
</div>
</li>
<li class="cat-item">
<div class="cat-item-main">
<a href="#">智能闲聊<i class="cat-tag is-hot"></i></a>
</div>
</li>
</ul>
</div>
<div class="cat-group">
<h3 class="cat-tit"><div class="cat-ico"><i class="ico-image"></i></div>计算机视觉</h3>
<ul class="cat-list">
<li class="cat-item">
<div class="cat-item-main">
<span>OCR<i class="cat-tag is-hot"></i></span>
</div>
<div class="cat-item-sub">
<div class="cat-item-row">
<a href="#identify">身份证识别</a>
<a href="#card">名片识别</a>
<a href="#driverregistration">行驶证/驾驶证识别</a>
</div>
<div class="cat-item-row">
<a href="#businesslicense">营业执照识别</a>
<a href="#creditcard">银行卡识别</a>
<a href="#common">通用识别</a>
</div>
</div>
</li>
<li class="cat-item">
<div class="cat-item-main">
<span>人脸识别</span>
</div>
<div class="cat-item-sub">
<div class="cat-item-row">
<a href="#detect">人脸分析</a>
<a href="#multiface">多人脸检测<i class="cat-tag is-new"></i></a>
<a href="#compare">人脸对比</a>
<a href="#search">人脸搜索</a>
</div>
<div class="cat-item-row">
<a href="#shape">五官定位</a>
<a href="javascript:void(0);" class="disabled">人脸核身(即将开放)</a>
</div>
</div>
</li>
<li class="cat-item">
<div class="cat-item-main">
<span>图片识别</span>
</div>
<div class="cat-item-sub">
<div class="cat-item-row">
<a href="#scene">物体/场景识别<i class="cat-tag is-beta"></i></a>
<a href="#tag">图片标签识别</a>
<a href="#express">看图说话</a>
</div>
<div class="cat-item-row">
<a href="#fuzzy">模糊图片识别</a>
<a href="#food">美食图片识别</a>
<a href="#plants">花草识别<i class="cat-tag is-hot"></i></a>
</div>
<div class="cat-item-row">
<a href="#cars">车辆识别<i class="cat-tag is-new"></i></a>
</div>
</div>
</li>
<li class="cat-item">
<div class="cat-item-main">
<span>图片特效<i class="cat-tag is-new"></i></span>
</div>
<div class="cat-item-sub">
<div class="cat-item-row">
<a href="#">人脸融合</a>
<a href="#">滤镜</a>
<a href="#">人脸美妆</a>
</div>
<div class="cat-item-row">
<a href="#">人脸变妆</a>
<a href="#">大头贴</a>
<a href="#">颜龄检测</a>
</div>
</div>
</li>
<li class="cat-item">
<div class="cat-item-main">
<a href="#">智能鉴黄</a>
</div>
</li>
<li class="cat-item">
<div class="cat-item-main">
<a href="#">暴恐识别</a>
</div>
</li>
</ul>
</div>
<div class="cat-group">
<h3 class="cat-tit"><div class="cat-ico"><i class="ico-voice"></i></div>智能语音</h3>
<ul class="cat-list">
<li class="cat-item">
<div class="cat-item-main">
<span>语音识别</span>
</div>
<div class="cat-item-sub">
<div class="cat-item-row">
<a href="#">语音识别</a>
<a href="#">长语音识别<i class="cat-tag is-new"></i></a>
<a href="#">关键词检索<i class="cat-tag is-new"></i></a>
</div>
</div>
</li>
<li class="cat-item">
<div class="cat-item-main">
<a href="#">语音合成<i class="cat-tag is-new"></i></a>
</div>
</li>
<li class="cat-item">
<div class="cat-item-main">
<span>语音唤醒(即将开放)</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="layout clearfix">
<a href="" class="mod-header-logo"></a>
<div class="mod-header-nav">
<ul id="jmod-header-nav">
<li id="nav-header-serv" class="top-cat hassub" data-cat="engine">
<h2><a href="javascript:void(0);">技术引擎</a><i class="top-cat-arrow"></i></h2>
</li>
<li id="nav-header-accelerator" class="top-cat"><h2><a href="#">AI加速器</a></h2></li>
<li id="nav-header-info" class="top-cat"><h2><a href="#">资讯动态</a></h2></li>
<li id="nav-header-hr" class="top-cat"><h2><a href="#">AI在腾讯</a></h2></li>
<li id="nav-header-join" class="top-cat"><h2><a href="#">加入我们</a></h2></li>
<li id="nav-header-doc" class="top-cat"><h2><a href="#">文档中心</a></h2></li>
</ul>
<i class="jmod-nav-slider slider hidden" style="transform: translateX(0px);"></i>
</div>
<div class="mod-header-user">
<a href="#" target="_blank" class="try jmod-header-try" rel="noopener noreferrer">控制台</a>
<a href="#" target="_blank" class="console jmod-header-console hidden" rel="noopener noreferrer">控制台</a>
</div>
</div>
</div>
<div class="banner jmod_banner">
<div class="ban cur" style="background-color:#1e1f21;background-image:url('自定义Banner图片地址');height: 62px;">
</div>
</div>
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论