脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JqueryTips小实验，浏览器滚动条不限制，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 最近做公司的项目有些地方可能需要一些小提示，于是自己建立项目研究tips。在此之前看到过一些别人写的jqueryTips，于是借鉴了一些别人的经验在此基础上我做出了一些改进。
有的同学可能使用过其他一些JqueryTIps的工具，但是我看了那些有些不适合我来使用，所以自己做吧，用的也Happy。
因为有些数据可能过长，会导致设计好的表格样式变形，所以在绑定数据的时候大多数都会设置过长数据省略号显示，但是这就会导致我们查看数据的时候不太方便，htML自带的tITle技能可能已经足够我们使用，但是我觉得样式可能不好看，而且反应有些迟钝。于是做了这个小工具。代码不多。
因为是测试用的，所以我直接在页面上写了这些数据，这些内容大家将就的看一下吧。不要计较这些啊。
以下是测试数据的代码，包括CSS样式。
复制代码
1 <style tyPE="text/css">
2 .tab
3 {
4 width: 1000px;
5 height: 100%;
6 border-collapse: collapse;
7 margin: 0;
8 border: 1px #c0c0c0 solid;
9 table-layout: fixed;
10 }
11 .tab td
12 {
13 height: 20px;
14 border: 1px #C0C0C0 solid;
15 white-space: nowrap; /* 不换行 */
16 overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
17 text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
18 }
19 .tab th
20 {
21 height: 24px;
22 background: url(panel-header-bg.gif) repeat-x left top;
23 line-height: 26px;
24 height: 26px;
25 font-weight: bold;
26 border: 1px #C0C0C0 solid;
27 }
28 </style>
复制代码
复制代码
1 <table class="tab">
2 <thead>
3 <tr>
4 <th style="width: 5%;">
5 编号
6 </th>
7 <th style="width: 10%">
8 姓名
9 </th>
10 <th style="width: 5%">
11 性别
12 </th>
13 <th style="width: 12%">
14 电话
15 </th>
16 <th style="width: 15%">
17 邮箱
18 </th>
19 <th style="width: 15%">
20 地址
21 </th>
22 <th style="width: 10%">
23 学历
24 </th>
25 <th style="width: 8%">
26 婚否
27 </th>
28 <th style="width: 20%">
29 备注
30 </th>
31 </tr>
32 </thead>
33 <tbody>
34 <tr>
35 <td>
36 1
37 </td>
38 <td>
39 Mike11
40 </td>
41 <td>
42 男11
43 </td>
44 <td>
45 1523652256311
46 </td>
47 <td class="tips">
49 </td>
50 <td class="tips">
51 深圳市南山区白石洲上白石102栋11
52 </td>
53 <td>
54 本科11
55 </td>
56 <td>
57 已婚11
58 </td>
59 <td class="tips">
60 时间都去哪儿了时间都去哪儿了11时间都去度假了时间都去度假了吗
61 </td>
62 </tr>
63 <tr>
64 <td>
65 2
66 </td>
67 <td>
68 Mike22
69 </td>
70 <td>
71 男22
72 </td>
73 <td>
74 1523652256322
75 </td>
76 <td class="tips">
77 mikeLoveNike@gmail.com22
78 </td>
79 <td class="tips">
80 深圳市南山区白石洲上白石102栋22时间都去度假了时间都去度假了吗哈哈哈哈
81 </td>
82 <td>
83 本科22
84 </td>
85 <td>
86 已婚22
87 </td>
88 <td class="tips">
89 时间都去哪儿了时间都去哪儿了22时间都去度假了时间都去度假了吗哈哈哈哈
90 </td>
91 </tr>
92 <tr>
93 <td>
94 3
95 </td>
96 <td>
97 Mike33
98 </td>
99 <td>
100 男33
101 </td>
102 <td>
103 1523652256333
104 </td>
105 <td class="tips">
106 mikeLoveNike@gmail.com33
107 </td>
108 <td class="tips">
109 深圳市南山区白石洲上白石102栋33时间都去度假了时间都去度假了吗哈哈哈哈
110 </td>
111 <td>
112 本科33
113 </td>
114 <td>
115 已婚33
116 </td>
117 <td class="tips">
118 时间都去哪儿了时间都去哪儿了33时间都去度假了时间都去度假了吗哈哈哈哈
119 </td>
120 </tr>
121 <tr>
122 <td>
123 4
124 </td>
125 <td>
126 Mike44
127 </td>
128 <td>
129 男44
130 </td>
131 <td>
132 1523652256344
133 </td>
134 <td class="tips">
135 mikeLoveNike@gmail.com44
136 </td>
137 <td class="tips">
138 深圳市南山区白石洲上白石102栋44444时间都去度假了时间都去度假了吗哈哈哈哈
139 </td>
140 <td>
141 本科44
142 </td>
143 <td>
144 已婚44
145 </td>
146 <td class="tips">
147 时间都去哪儿了时间都去哪儿了44时间都去度假了时间都去度假了吗哈哈哈哈
148 </td>
149 </tr>
150 <tr>
151 <td>
152 5
153 </td>
154 <td>
155 Mike55
156 </td>
157 <td>
158 男55
159 </td>
160 <td>
161 1523652256355
162 </td>
163 <td class="tips">
164 mikeLoveNike@gmail.com55
165 </td>
166 <td class="tips">
167 深圳市南山区白石洲上白石102栋55
168 </td>
169 <td>
170 本科11
171 </td>
172 <td>
173 已婚11
174 </td>
175 <td class="tips">
176 时间都去哪儿了时间都去哪儿了55时间都去度假了时间都去度假了吗
177 </td>
178 </tr>
179 <tr>
180 <td>
181 6
182 </td>
183 <td>
184 Mike66
185 </td>
186 <td>
187 男66
188 </td>
189 <td>
190 1523652256366
191 </td>
192 <td class="tips">
193 mikeLoveNike@gmail.com77
194 </td>
195 <td class="tips">
196 深圳市南山区白石洲上白石102栋77时间都去度假了时间都去度假了吗哈哈哈哈
197 </td>
198 <td>
199 本科77
200 </td>
201 <td>
202 已婚77
203 </td>
204 <td class="tips">
205 时间都去哪儿了时间都去哪儿了77时间都去度假了时间都去度假了吗哈哈哈哈
206 </td>
207 </tr>
208 <tr>
209 <td>
210 8
211 </td>
212 <td>
213 Mike88
214 </td>
215 <td>
216 男88
217 </td>
218 <td>
219 1523652256388
220 </td>
221 <td class="tips">
222 mikeLoveNike@gmail.com88
223 </td>
224 <td class="tips">
225 深圳市南山区白石洲上白石102栋88时间都去度假了时间都去度假了吗哈哈哈哈
226 </td>
227 <td>
228 本科88
229 </td>
230 <td>
231 已婚88
232 </td>
233 <td class="tips">
234 时间都去哪儿了时间都去哪儿了88时间都去度假了时间都去度假了吗哈哈哈哈
235 </td>
236 </tr>
237 <tr>
238 <td>
239 9
240 </td>
241 <td>
242 Mike99
243 </td>
244 <td>
245 男99
246 </td>
247 <td>
248 1523652256399
249 </td>
250 <td class="tips">
251 mikeLoveNike@gmail.com99
252 </td>
253 <td class="tips">
254 深圳市南山区白石洲上白石102栋999999时间都去度假了时间都去度假了吗哈哈哈哈
255 </td>
256 <td>
257 本科99
258 </td>
259 <td>
260 已婚99
261 </td>
262 <td class="tips">
263 时间都去哪儿了时间都去哪儿了99时间都去度假了时间都去度假了吗哈哈哈哈
264 </td>
265 </tr>
266 <tr>
267 <td>
268 10
269 </td>
270 <td>
271 Mike1010
272 </td>
273 <td class="tips">
274 男1010
275 </td>
276 <td class="tips">
277 152365225631010
278 </td>
279 <td class="tips">
280 mikeLoveNike@gmail.com1010
281 </td>
282 <td class="tips">
283 深圳市南山区白石洲上白石102栋1010
284 </td>
285 <td>
286 本科1010
287 </td>
288 <td>
289 已婚1010
290 </td>
291 <td class="tips">
292 时间都去哪儿了时间都去哪儿了1010时间都去度假了时间都去度假了吗
293 </td>
294 </tr>
295 <tr>
296 <td>
297 11
298 </td>
299 <td>
300 Mike1111
301 </td>
302 <td class="tips">
303 男1111
304 </td>
305 <td class="tips">
306 152365225631111
307 </td>
308 <td class="tips">
309 mikeLoveNike@gmail.com1111
310 </td>
311 <td class="tips">
312 深圳市南山区白石洲上白石102栋1111时间都去度假了时间都去度假了吗哈哈哈哈
313 </td>
314 <td>
315 本科1111
316 </td>
317 <td>
318 已婚1111
319 </td>
320 <td class="tips">
321 时间都去哪儿了时间都去哪儿了1111时间都去度假了时间都去度假了吗哈哈哈哈
322 </td>
323 </tr>
324 <tr>
325 <td>
326 12
327 </td>
328 <td>
329 Mike1212
330 </td>
331 <td class="tips">
332 男1212
333 </td>
334 <td class="tips">
335 152365225631212
336 </td>
337 <td class="tips">
338 mikeLoveNike@gmail.com1212
339 </td>
340 <td class="tips">
341 深圳市南山区白石洲上白石102栋1212时间都去度假了时间都去度假了吗哈哈哈哈
342 </td>
343 <td>
344 本科1212
345 </td>
346 <td>
347 已婚1212
348 </td>
349 <td class="tips">
350 时间都去哪儿了时间都去哪儿了1212时间都去度假了时间都去度假了吗哈哈哈哈
351 </td>
352 </tr>
353 <tr>
354 <td>
355 13
356 </td>
357 <td>
358 Mike1313
359 </td>
360 <td class="tips">
361 男1313
362 </td>
363 <td class="tips">
364 152365225631313
365 </td>
366 <td class="tips">
367 mikeLoveNike@gmail.com1313
368 </td>
369 <td class="tips">
370 深圳市南山区白石洲上白石102栋131313131313时间都去度假了时间都去度假了吗哈哈哈哈
371 </td>
372 <td>
373 本科1313
374 </td>
375 <td>
376 已婚1313
377 </td>
378 <td class="tips">
379 时间都去哪儿了时间都去哪儿了1313时间都去度假了时间都去度假了吗哈哈哈哈
380 </td>
381 </tr>
382 </tbody>
383 </table>
复制代码
以上是要准备的，除此之外还需要准备一个Jquery库。这个很好找吧。
刚刚开始做的时候，遇到一个很棘手的问题，就是tip显示的时候遇到浏览器边框就会伸出去，然后你鼠标移动之后又根本看不着，好吧，这跟我们的需求很不符合了。于是我在判断tip的位置的时候做一个判断，这个判断是根据你页面宽度和tip的宽度来觉得的。看以下代码：
1 VAR windowWidth = $(window).width();//浏览器宽度
2 var tooltipWidth = $("#tooltip").width();//tipp宽度
3 if (windowWidth - e.clientX - 5 < tooltipWidth) {//判断提示是否会被隐藏
使用浏览器的当前宽度，减去鼠标当前位置，可以得到鼠标当前距离浏览器的宽度。再与tipp的宽度对比。
这样在我鼠标移动的时候可以知道tip显示的地方是否会在浏览器的边缘了。然后根据这样的判断，可以讲tip的右边距设置成固定值，这样你移动鼠标都不会对tip产生影响了，但是当你鼠标移动到其他地方的时候又将重新计算。
然后看一下给tip定位的代码：
复制代码
if (windowWidth - e.clientX - 5 < tooltipWidth) {//判断提示是否会被隐藏
$("#tooltip").css({
"top": (e.clientY + 5) + "px",
"right": "5px"
})
}
else {
$("#tooltip").css({
"top": (e.clientY + 5) + "px",
"left": (e.clientX + 5) + "px"
})
}
}).mouSEMove(function (e) {
var windowWidth = $(window).width();
var tooltipWidth = $("#tooltip").width();
if (windowWidth - e.clientX - 5 < tooltipWidth) {//判断提示是否会被隐藏
$("#tooltip").css({
"top": (e.clientY + 5) + "px",
"right": "5px"
})
}
else {
$("#tooltip").css({
"top": (e.clientY + 5) + "px",
"left": (e.clientX + 5) + "px"
})
}
复制代码
这里之前我一直都很迷糊，因为有两个属性在Jquery里面。pageX，Y和clientX，Y。做了许久都有一个问题困扰。就是当浏览器中数据太多了，出现了滚动条之后，pageX，Y已经不能准确定位了。于是另辟一条路。
我GOOGLE了一下css定位相关的内容。开始我一直使用的absolute，绝对定位，相对page的。后来我使用的是fixed，相对于浏览器的可见页面。这样就好办了。继续看看代码：
复制代码
1 var toolTip = "<p id='tooltip'>" + $(this).text() + "</p>";
2 $("body").append(toolTip);
3 $("#tooltip").css({
4 "position": "fixed",//这里使用fixed相对于浏览器可见页面定位
5 "padding": "5px",
6 "background": "#F0F0E8",
7 "white-space": "nowrap",//让p内的文字内容部换行
8 "border": "1px gray solid"
9 }).show(200);
复制代码
好了代码很简单，接下来看看效果如何吧。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-JqueryTips小实验，浏览器滚动条不限制全部内容，希望文章能够帮你解决javascript代码实例教程-JqueryTips小实验，浏览器滚动条不限制所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。