-4
我正在構建這些網站：www.watersandstudio.com/test（是一個測試），我想知道爲什麼我的效果不啓動（我有一個particles.js和投資組合部分）Jquery的效果不起作用
它們只在您調整瀏覽器窗口大小時纔會運行。 （我與所有瀏覽器進行測試）提前
感謝
Particle.js
particlesJS("particles-js", {
"particles": {
"number": {
"value": 100,
"density": {
"enable": true,
"value_area":1000
}
},
"color": {
"value": ["#aa73ff", "#f8c210", "#83d238", "#33b1f8"]
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#fff"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.6,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 2,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 120,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": false
},
"resize": true
},
"modes": {
"grab": {
"distance": 140,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": false
});
組合JS（這裏是代碼）
$(window).on("load resize", function() {
$('#loader-overlay').fadeOut('slow', function() {
$(this).remove();
});
var $container2 = $('.isotope'),
colWidth = function() {
var w = $container2.width(),
columnNum = 1,
columnWidth = 0;
if ($('#even-grid').length > 0) {
if (w > 1040) {
columnNum = 4;
} else if (w > 850) {
columnNum = 4;
} else if (w > 768) {
columnNum = 2;
} else if (w > 480) {
columnNum = 2;
} else if (w > 300) {
columnNum = 1;
}
} else if ($('#masonry-grid-3').length > 0) {
if (w > 1040) {
columnNum = 3;
} else if (w > 850) {
columnNum = 3;
} else if (w > 768) {
columnNum = 2;
} else if (w > 480) {
columnNum = 2;
} else if (w > 300) {
columnNum = 1;
}
} else if ($('#masonry-grid-4').length > 0) {
if (w > 1040) {
columnNum = 4;
} else if (w > 850) {
columnNum = 4;
} else if (w > 768) {
columnNum = 2;
} else if (w > 480) {
columnNum = 2;
} else if (w > 300) {
columnNum = 1;
}
} else if ($('#even-grid-5').length > 0) {
if (w > 1040) {
columnNum = 5;
} else if (w > 850) {
columnNum = 5;
} else if (w > 768) {
columnNum = 4;
} else if (w > 480) {
columnNum = 2;
} else if (w > 300) {
columnNum = 1;
}
} else if ($('#even-grid-3').length > 0) {
if (w > 1040) {
columnNum = 3;
} else if (w > 850) {
columnNum = 3;
} else if (w > 768) {
columnNum = 2;
} else if (w > 480) {
columnNum = 2;
} else if (w > 300) {
columnNum = 1;
}
} else if ($('#masonry-grid-5').length > 0) {
if (w > 1040) {
columnNum = 5;
} else if (w > 850) {
columnNum = 5;
} else if (w > 768) {
columnNum = 4;
} else if (w > 480) {
columnNum = 2;
} else if (w > 300) {
columnNum = 1;
}
}
columnWidth = Math.floor(w/columnNum);
//Default item width and height
$container2.find('.item-img').each(function() {
var $item = $(this),
width = columnWidth,
height = columnWidth;
$item.css({
width: width,
height: height
});
});
//2x width item width and height
$container2.find('.width2').each(function() {
var $item = $(this),
width = columnWidth * 2,
height = columnWidth;
if (w <= 480) {
width = columnWidth;
}
$item.css({
width: width,
height: height
});
});
//2x height item width and height
$container2.find('.height2').each(function() {
var $item = $(this),
width = columnWidth,
height = columnWidth * 2;
$item.css({
width: width,
height: height
});
});
//2x item width and height
$container2.find('.width2.height2').each(function() {
var $item = $(this),
width = columnWidth * 2,
height = columnWidth * 2;
$item.css({
width: width,
height: height
});
});
return columnWidth;
},
$container2 = $('.isotope').isotope({
resizable: true,
itemSelector: '.item-img',
masonry: {
columnWidth: colWidth(),
gutterWidth: 10
}
});
/*
Portfolio Filter using Isotope
*/
$('.gallery-filter').on('click', 'li', function() {
$('.gallery-filter li').removeClass('active');
$(this).addClass('active');
var filterValue = $(this).attr('data-filter');
$container2.isotope({
filter: filterValue
});
});
});
請在您的問題中添加代碼以獲得更好的幫助。 –
查看源代碼，粘貼時間太長。 – Reverter
你包含jquery/js文件嗎？ –