我有一個在網站上顯示新聞的javascript函數。目前在轉盤上顯示12個項目,在每個轉盤幻燈片上顯示6個項目。用javascript創建媒體查詢
當屏幕尺寸達到768px時,我想更改此設置,因此每張幻燈片上只有3個項目。有沒有可能做這樣的JavaScript這樣的媒體查詢?
在下面的代碼中,'items'是文章總數,'breakpoint'是一張幻燈片上的數量。然後我已經把additems函數顯示在頁面上顯示文章的方式。
$.fn.InitLatestNews = function(opts) {
var config = $.extend({}, {
'data' : [],
'items' : 12,
'breakpoint' : 6
}, opts);
var navIndex = 1;
function AddItems(obj) {
var htmlstring = '';
var json = config.data;
var itemNumber;
if(config.items < json.length)
itemNumber = config.items;
else
itemNumber = json.length;
htmlstring += '<ul class="latestNews_list">';
for(var i = 0; i < itemNumber; i++) {
if (i > 0) {
if((i + 1) % config.breakpoint === 1) {
navIndex++;
}
}
if(navIndex === 1)
htmlstring += '<li data-html="page-' + navIndex + '">';
else
htmlstring += '<li class="hidden" data-html="page-' + navIndex + '">';
htmlstring += '<div class="ln_image">';
htmlstring += '<a href="' + json[i].url + '"></a>';
if(json[i].imageUrl) {
htmlstring += '<img class="ln_main_img" src="' + json[i].imageUrl + '" alt="' + json[i].title + '">';
htmlstring += '<div class="ln_read_overlay">';
htmlstring += '<div class="ln_overlay_inner">';
htmlstring += '<img src="/stylesheet/medway2014/magnifierglass.png">';
htmlstring += '<p>Read Article</p>';
htmlstring += '</div>';
htmlstring += '</div>';
}
htmlstring += '</div>';
htmlstring += '<div class="ln_info">';
htmlstring += '<a href="' + json[i].url + '"><h2>' + json[i].title + '</h2></a>';
htmlstring += '<p>' + json[i].leader + '</p>';
htmlstring += '</div>';
htmlstring += '</li>';
}
htmlstring += '</ul>';
obj.html(htmlstring);
}
您是否嘗試過使用CSS @media screen和(min-width:...)? –