根據不同屏幕寬度取不同大小的圖片
- 拿到屏幕的寬度
- 與一個值比較，判斷是不大屏還是小屏
- 拿到對象，給對象挷定數據 ps html屬性 data-xxx- 可以存儲數據 三目運算：可根據比較值取不同數據
- 監聽屏幕寬度的方法
function resize() {
// 獲取屏幕寬度
var windowWidth = $(window).width();
// 判斷屏幕屬于大還是小
var isSmallScreen = windowWidth < 768;
// 根據大小為界面上的每一張輪播圖設置背景
// $('#main_ad > .carousel-inner > .item') // 獲取到的是一個DOM數組（多個元素）
$('#main_ad > .carousel-inner > .item').each(function(i, item) {
// 因為拿到是DOM對象 需要轉換
var $item = $(item);
var imgSrc = $item.data(isSmallScreen ? 'image-xs' : 'image-lg')
// jQuery方式
// $element.data()
// 是一個函數 ，專門用于取元素上的自定義屬性（data-abc）
// 函數的參數是我們要取得屬性名稱（abc）
// $element.attr('data-abc')
// JS中的寫法
// element.dataset['abc']
// element.getAttribute('data-abc')
// element.setAttribute('data-abc','')
// 設置背景圖片
$item.css('backgroundImage', 'url("' + imgSrc + '")');
//
// 因為我們需要小圖時 尺寸等比例變化，所以小圖時我們使用img方式
if (isSmallScreen) {
$item.html('');
} else {
$item.empty();
}
});
}
// $(window).on('resize', resize);
// // 讓window對象立即觸發一下resize
// $(window).trigger('resize');
$(window).on('resize', resize).trigger('resize');
});
