1) 右クリックを無効にする
Web アプリケーションを開発する場合、右クリック機能を無効にする必要がある場合があります。このコードを使用すると、jQuery 開発者は Web ページでのマウスの右クリックを無効にすることができます。コードは次のとおりです。
$(document ).ready(function( ) {
//右クリックのコンテキスト メニューをキャッチします
$(document).bind("contextmenu",function(e) {
//警告プロンプト - オプション
alert("右クリックは禁止です!");
//デフォルトのコンテキスト メニューを削除します
}); 🎜>2) テキストのスケーリング
次のコードを使用すると、ユーザーは必要に応じて Web ページのフォント サイズを拡大またはズームできます。コードは次のとおりです:
。コードをコピーします
//テキストのサイズを大きくします
$(".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
});
//テキスト サイズを小さくします
$(".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
});
$(".resetFont").click (function(){
$('html').css('font-size',originalFontSize);
});
3) 新しいウィンドウでリンクを開く
この jQuery コードを使用すると、ユーザーが Web サイト上でクリックしたリンクは新しいウィンドウで開きます。次のように:
コードをコピー
コードは次のとおりです:
4) スタイルシートの切り替え
Web サイトのスキンの付け方を知っていますか?次のコードは、スタイル シート切り替え関数の実装に役立ちます。
コードをコピー
コードは次のとおりです。 🎜>
$(document).ready(function() {
コードをコピー
コードは次のとおりです:
$(document).ready (function() {
//id="top" リンクがクリックされたとき
$('#top').click(function() {
//ページの先頭に戻る
$(document).scrollTo(0,500); } }); 6) マウスの X、Y 座標を取得します
次のコードはマウスの X、Y 座標を取得できます。コードは次のとおりです:
コードをコピー
コードは次のとおりです:
$().mousemove(function(e){
//P 要素内の x 軸と y 軸の値を表示します
$('p').html ("X 軸 : " e.pageX " | Y 軸 " e.pageY);
コードをコピー
コードは次のとおりです:
$(document).ready(function() {
$().mousemove(function(e){
$('# マウス座標 ').html("X 軸の位置 = " e.pageX " および Y 軸位置 = " e.pageY);
}) ;
8) 画像のプリロード
この画像のプリロード スニペットを使用すると、待たずに画像をすばやくプリロードできます。コードは次のとおりです:
jQuery.preloadImagesInWebPage = function() {
for(var ctr = 0; ctr
jQuery("").attr("src", argument[ctr]);
}
メソッドの呼び出し:
$.preloadImages ("image1.gif", "image2.gif", "image3.gif");
画像がロードされているかどうかを確認します:
$('#imageObject') .attr('src', 'image1.gif ').load(function() {
alert('画像がロードされました...');
}); 🎜>