常用的15種Jquery
阿新 • • 發佈：2018-12-30
jQuery裡提供了許多建立互動式網站的方法，在開發Web專案時，開發人員應該好好利用jQuery程式碼，它們不僅能給網站帶來各種動畫、特效，還會提高網站的使用者體驗。
本文收集了15段非常實用的jQuery程式碼片段，你可以直接複製黏貼到程式碼裡，但請開發者注意了，要理解程式碼再使用哦。下面就讓我們一起來享受jQuery程式碼的魅力之處吧。
1.預載入圖片
| 1 2 3 4 5 6 7 8 9 10 11 12 |
(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.preLoadImages("image1.gif", "/path/to/image2.png");
|
2. 讓頁面中的每個元素都適合在移動裝置上展示
| 1 2 3 4 5 6 7 8 9 10 11 |
var scr = document.createElement('script');
document.body.appendChild(scr);
scr.onload = function(){
$('div').attr('class', '').attr('id', '').css({
'margin' :
0,
'padding' :
0,
'width': '100%',
'clear':'both'
});
};
|
3.影象等比例縮放
| 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 |
$(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.返回頁面頂部
| 1 2 3 4 5 6 7 8 |
// 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打造手風琴式的摺疊效果
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
var accordion = {
init: function(){
var $container
= $('#accordion');
$container.find('li:not(:first)
.details').hide();
$container.find('li:first').addClass('active');
$container.on('click','li
a',function(e){
e.preventDefault();
var $this =
$(this).parents('li');
if($this.hasClass('active')){
if($('.details').is(':visible'))
{
|