首页 > 其他 > 详细

1

时间:2014-03-24 02:25:11      阅读:1567      评论:0      收藏:0      [点我收藏+]

在开发 Web 应用的时候,有些情况需要禁用右键单击功能。使用此代码,jQuery 开发人员可以在网页上禁用鼠标右键点击。代码如下:

1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
    //catch the right-click context menu
    $(document).bind("contextmenu",function(e) {                
        //warning prompt - optional
        alert("No right-clicking!");
 
        //delete the default context menu
        return false;
    });
});

2) 文本缩放

  使用下面的代码,用户可以更具需要增大或者缩放网页中的字体大小,代码如下:

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
$(document).ready(function() {
    //find the current font size
    var originalFontSize = $(‘html‘).css(‘font-size‘);
 
    //Increase the text size
    $(".increaseFont").click(function() {
        var currentFontSize = $(‘html‘).css(‘font-size‘);
        var currentFontSizeNumber = parseFloat(currentFontSize, 10);
 
        var newFontSize = currentFontSizeNumber*1.2;
        $(‘html‘).css(‘font-size‘, newFontSize);
        return false;
    });
 
    //Decrease the Text Size
    $(".decreaseFont").click(function() {
        var currentFontSize = $(‘html‘).css(‘font-size‘);
        var currentFontSizeNum = parseFloat(currentFontSize, 10);
 
        var newFontSize = currentFontSizeNum*0.8;
        $(‘html‘).css(‘font-size‘, newFontSize);
        return false;
    });
 
    // Reset Font Size
    $(".resetFont").click(function(){
    $(‘html‘).css(‘font-size‘, originalFontSize);
  });
});

3) 在新窗口打开链接

  使用这个 jQuery 代码,用户会点击你的网站的任何链接都会在新的窗口中打开。如下:

1
2
3
4
5
$(document).ready(function() {
    //select all anchor tags that have http in the href
    //and apply the target=_blank
    $("a[href^=‘http‘]").attr(‘target‘,‘_blank‘);
});

4) 样式表切换

  你知道网站换肤是怎么做的吗?下面的代码可以帮助你实现样式表切换功能,如下:

1
2
3
4
5
6
$(document).ready(function() {
    $("a.cssSwap").click(function() {
        //swap the link rel attribute with the value in the rel   
        $(‘link[rel=stylesheet]‘).attr(‘href‘ , $(this).attr(‘rel‘));
    });
});

5) 回到顶部

这是现在网站中很常用的回到顶部功能,特别适合页面很长的情况。代码很简单,如下:

1
2
3
4
5
6
7
$(document).ready(function() {
    //when the id="top" link is clicked
    $(‘#top‘).click(function() {
        //scoll the page back to the top
        $(document).scrollTo(0,500);
    }
});

6) 获取鼠标的 X、Y 坐标

  下面的代码可以获取鼠标的 X,Y 坐标,代码如下:

1
2
3
4
$().mousemove(function(e){
    //display the x and y axis values inside the P element
    $(‘p‘).html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});

7) 检测当前鼠标的坐标

  使用下面的代码,能够在任何支持 jQuery 的地方获取当前鼠标的坐标,如下:

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
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
在开发 Web 应用的时候,有些情况需要禁用右键单击功能。使用此代码,jQuery 开发人员可以在网页上禁用鼠标右键点击。代码如下:
  
 
 
 
 
 
 
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
10
 
 
 
$(document).ready(function() {
 
    //catch the right-click context menu
 
    $(document).bind("contextmenu",function(e) {                
 
        //warning prompt - optional
 
        alert("No right-clicking!");
 
  
 
        //delete the default context menu
 
        return false;
 
    });
 
});
 
 
2) 文本缩放
  
  使用下面的代码,用户可以更具需要增大或者缩放网页中的字体大小,代码如下:
  
 
 
 
 
 
 
 
 
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
 
 
 
$(document).ready(function() {
 
    //find the current font size
 
    var originalFontSize = $(‘html‘).css(‘font-size‘);
 
  
 
    //Increase the text size
 
    $(".increaseFont").click(function() {
 
        var currentFontSize = $(‘html‘).css(‘font-size‘);
 
        var currentFontSizeNumber = parseFloat(currentFontSize, 10);
 
  
 
        var newFontSize = currentFontSizeNumber*1.2;
 
        $(‘html‘).css(‘font-size‘, newFontSize);
 
        return false;
 
    });
 
  
 
    //Decrease the Text Size
 
    $(".decreaseFont").click(function() {
 
        var currentFontSize = $(‘html‘).css(‘font-size‘);
 
        var currentFontSizeNum = parseFloat(currentFontSize, 10);
 
  
 
        var newFontSize = currentFontSizeNum*0.8;
 
        $(‘html‘).css(‘font-size‘, newFontSize);
 
        return false;
 
    });
 
  
 
    // Reset Font Size
 
    $(".resetFont").click(function(){
 
    $(‘html‘).css(‘font-size‘, originalFontSize);
 
  });
 
});
 
 
3) 在新窗口打开链接
  
  使用这个 jQuery 代码,用户会点击你的网站的任何链接都会在新的窗口中打开。如下:
  
 
 
 
 
 
 
 
 
1
 
2
 
3
 
4
 
5
 
 
 
$(document).ready(function() {
 
    //select all anchor tags that have http in the href
 
    //and apply the target=_blank
 
    $("a[href^=‘http‘]").attr(‘target‘,‘_blank‘);
 
});
 
 
4) 样式表切换
  
  你知道网站换肤是怎么做的吗?下面的代码可以帮助你实现样式表切换功能,如下:
  
 
 
 
 
 
 
 
 
1
 
2
 
3
 
4
 
5
 
6
 
 
 
$(document).ready(function() {
 
    $("a.cssSwap").click(function() {
 
        //swap the link rel attribute with the value in the rel   
 
        $(‘link[rel=stylesheet]‘).attr(‘href‘ , $(this).attr(‘rel‘));
 
    });
 
});
 
 
5) 回到顶部
  
这是现在网站中很常用的回到顶部功能,特别适合页面很长的情况。代码很简单,如下:
  
 
 
 
 
 
 
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
 
 
$(document).ready(function() {
 
    //when the id="top" link is clicked
 
    $(‘#top‘).click(function() {
 
        //scoll the page back to the top
 
        $(document).scrollTo(0,500);
 
    }
 
});
 
 
6) 获取鼠标的 X、Y 坐标
  
  下面的代码可以获取鼠标的 X,Y 坐标,代码如下:
  
 
 
 
 
 
 
 
 
1
 
2
 
3
 
4
 
 
 
$().mousemove(function(e){
 
    //display the x and y axis values inside the P element
 
    $(‘p‘).html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
 
});
 
 
7) 检测当前鼠标的坐标
  
  使用下面的代码,能够在任何支持 jQuery 的地方获取当前鼠标的坐标,如下:
  
 
 
 
 
 
 
 
 
1
 
2
 
3
 
4
 
 
 
$(document).ready(function() {
 
    $().mousemove(function(e){
 
    $(‘# MouseCoordinates ‘).html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);
 
});
 
 
8) 预加载图片
  
  这个图片预加载片段让你能够快速的预先载入图片,不需要等待。代码如下:
  
 
 
 
 
 
 
 
 
1
 
2
 
3
 
4
 
5
 
 
 
jQuery.preloadImagesInWebPage = function() {
 
    for(var ctr = 0; ctr<arguments.length; ctr++){
 
        jQuery("").attr("src", arguments[ctr]);
 
    }
 
}
 
 
  调用方法:
  
 
 
 
 
 
 
 
 
1
 
 
 
$.preloadImages("image1.gif", "image2.gif", "image3.gif");
 
 
  判断图片是否已加载:
  
 
 
 
 
 
 
 
 
1
 
2
 
3
 
 
 
$(‘#imageObject‘).attr(‘src‘, ‘image1.gif‘).load(function() {
 
    alert(‘The image has been loaded…‘);
 
});

  

?
1
2
3
4
$(document).ready(function() {
    $().mousemove(function(e){
    $(‘# MouseCoordinates ‘).html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);
});

8) 预加载图片

  这个图片预加载片段让你能够快速的预先载入图片,不需要等待。代码如下:

1
2
3
4
5
jQuery.preloadImagesInWebPage = function() {
    for(var ctr = 0; ctr<arguments.length; ctr++){
        jQuery("").attr("src", arguments[ctr]);
    }
}

  调用方法:

1
$.preloadImages("image1.gif", "image2.gif", "image3.gif");

  判断图片是否已加载:

1
2
3
$(‘#imageObject‘).attr(‘src‘, ‘image1.gif‘).load(function() {
    alert(‘The image has been loaded…‘);
});

1,布布扣,bubuko.com

1

原文:http://www.cnblogs.com/silvan01/p/3619997.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!