1) 禁用滑鼠右鍵單擊 jQuery程式員可以使用此代碼在網頁上禁用滑鼠右鍵點擊。12345678910$(document).ready(function() {//catch the right-click context menu$(document).bind("contextmenu",....
1) 禁用滑鼠右鍵單擊
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) 利用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 |
$(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) 在新的Windows打開鏈接
Try this code and increase your site impressions because using this jquery code users will go on new window after clicking on any link of your site. Code is below: -
| 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) Style Sheets Swap
Swap style sheets using this code and the “Style sheets swap” script is below: -
| 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) 回到頂部鏈接
That is very common function you can see on eve site nowadays is ” Back to Top”. This functionality is very useful for long pages for make short in a single click. Visit this code below: -
| 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軸
You can find the values of X and Y coordinator of mouse pointer. Code is blow : -
| 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所支持的任何Web瀏覽器找到當前滑鼠的坐標。代碼如下：
| 1 2 3 4 5 |
$(document).ready(function() {
$().mousemove(function(e)
{
$('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);
});
|
});
8) 在jQuery中預載入圖片
此圖像預載入的腳本有助於非常快速載入圖像或網頁。你不必等待圖像載入。代碼：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 |
jQuery.preloadImagesInWebPage = function()
{
for(var ctr = 0; ctr<arguments.length; ctr++)
{
jQuery("<img alt="">").attr("src", arguments[ctr]);
}
}
To use the above method, you can use the following piece of code:
$.preloadImages("image1.gif", "image2.gif", "image3.gif");
To check whether an image has been loaded, you can use the following piece of code:
$('#imageObject').attr('src', 'image1.gif').load(function() {
alert('The image has been loaded…');
});
|
