首页 > Web开发 > 详细

8 个很有用的 jQuery 技巧(转)

时间:2014-03-11 16:26:03      阅读:582      评论:0      收藏:0      [点我收藏+]

http://www.oschina.net/question/12_145472

一个基于web的标签设计,打印工具,超diao

http://www.oschina.net/question/170775_145011

 

1) 禁用鼠标右键点击

If you want to save your sites information from users, developers should use this code for disable Right clicking functionality. Using this code, jquery programmers can deactivate right clicking on web pages. Here are the code below: -

bubuko.com,布布扣
$(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;
    });
});
bubuko.com,布布扣

2) 更改文本字体大小

Using this code, users can re-size(increase and decrease) the text of websites. Users can increase and decrease fonts according to their requirement. Code is here: -

bubuko.com,布布扣
$(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);
  });
});
bubuko.com,布布扣

 

3) 在新窗口打开链接

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: -

bubuko.com,布布扣
$(document).ready(function() {
    //select all anchor tags that have http in the href
    //and apply the target=_blank
    $("a[href^=‘http‘]").attr(‘target‘,‘_blank‘);
});
bubuko.com,布布扣

4) CSS 样式切换

Swap style sheets using this code and the “Style sheets swap” script  is below: -

bubuko.com,布布扣
$(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‘)); 
    }); 
});
bubuko.com,布布扣

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: -

bubuko.com,布布扣
$(document).ready(function() {
    //when the id="top" link is clicked
    $(‘#top‘).click(function() {
        //scoll the page back to the top
        $(document).scrollTo(0,500);
    }

});
bubuko.com,布布扣

6) 获取鼠标指针当前的坐标

You can find the values of X and Y coordinator of mouse pointer. Code is blow : -

bubuko.com,布布扣
$().mousemove(function(e){
    //display the x and y axis values inside the P element
    $(‘p‘).html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});
bubuko.com,布布扣

 

7) 检测当前鼠标的坐标

Using this script, you can find the current mouse coordinates in the any web browser supported jquery. Code is below: -

bubuko.com,布布扣
$(document).ready(function() {
  $().mousemove(function(e)
  {
  $(‘# MouseCoordinates ‘).html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);
});
bubuko.com,布布扣

 

8) 预加载图片

this image preloading script helps to load image or web page very quickly. You not need wait to image load. The code is below:

bubuko.com,布布扣
jQuery.preloadImagesInWebPage = function() 
{
     for(var ctr = 0; ctr<arguments.length; ctr++)
{
jQuery("").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…‘);
});
bubuko.com,布布扣

8 个很有用的 jQuery 技巧(转),布布扣,bubuko.com

8 个很有用的 jQuery 技巧(转)

原文:http://www.cnblogs.com/wangjunwei/p/3593639.html

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