当前位置:编程学习 > JAVA >>

15个jQuery代码片段(转载)

1.预加载图片
 
 
[javascript]
(function($) {  
  var cache = [];  
  // Arguments are image paths relative to the current page.   
  $.preLoadImages = function() {  
    var args_len = arguments.length;  
    for (var i = args_len; i--;) {  
      var cacheImage = document.createElement('img');  
      cacheImage.src = arguments[i];  
      cache.push(cacheImage);  
    }  
  }  
})(jQuery)  
 
(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)2. 让页面中的每个元素都适合在移动设备上展示
 
 
 
[javascript] 
var scr = document.createElement('script');  
scr.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js');  
document.body.appendChild(scr);  
scr.onload = function(){  
    $('div').attr('class', '').attr('id', '').css({  
        'margin' : 0,  
        'padding' : 0,  
        'width': '100%',  
        'clear':'both'  
    });  
};  
 
var scr = document.createElement('script');
scr.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js');
document.body.appendChild(scr);
scr.onload = function(){
    $('div').attr('class', '').attr('id', '').css({
        'margin' : 0,
        'padding' : 0,
        'width': '100%',
        'clear':'both'
    });
};3.图像等比例缩放
 
 
[javascript]
$(window).bind("load", function() {  
      
// IMAGE RESIZE   
    $('#product_cat_list img').each(function() {  
        var maxWidth = 120;  
        var maxHeight = 120;  
        var ratio = 0;  
        var width = $(this).width();  
        var height = $(this).height();  
        if(width > maxWidth){  
            ratio = maxWidth / width;  
            $(this).css("width", maxWidth);  
            $(this).css("height", height * ratio);  
            height = height * ratio;  
        }  
        var width = $(this).width();  
        var height = $(this).height();  
        if(height > maxHeight){  
            ratio = maxHeight / height;  
            $(this).css("height", maxHeight);  
            $(this).css("width", width * ratio);  
            width = width * ratio;  
        }  
    });  
      
//$("#contentpage img").show();   
      
// IMAGE RESIZE   
});  
 
$(window).bind("load", function() {
    
// IMAGE RESIZE
    $('#product_cat_list img').each(function() {
        var maxWidth = 120;
        var maxHeight = 120;
        var ratio = 0;
        var width = $(this).width();
        var height = $(this).height();
        if(width > maxWidth){
            ratio = maxWidth / width;
            $(this).css("width", maxWidth);
            $(this).css("height", height * ratio);
            height = height * ratio;
        }
        var width = $(this).width();
        var height = $(this).height();
        if(height > maxHeight){
            ratio = maxHeight / height;
            $(this).css("height", maxHeight);
            $(this).css("width", width * ratio);
            width = width * ratio;
        }
    });
    
//$("#contentpage img").show();
    
// IMAGE RESIZE
});4.返回页面顶部
[javascript] 
// Back To Top   
$(document).ready(function(){  
  $('.top').click(function() {   
     $(document).scrollTo(0,500);   
  });  
});  
//Create a link defined with the class .top   
<a href="#" class="top">Back To Top</a>  
 
// Back To Top
$(document).ready(function(){
  $('.top').click(function() { 
     $(document).scrollTo(0,500); 
  });
});
//Create a link defined with the class .top
<a href="#" class="top">Back To Top</a>5.使用jQuery打造手风琴式的折叠效果
[javascript] 
var accordion = {  
     init: function(){  
           var $container = $('#accordion');  
           $container.find('li:not(:first) .details').hide();  
    &nb
补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,