标签：width 背景 html 代码 dex alt swipe 屏幕 背景图
今天遇到了全屏翻滚的网站首页，自然客户要求图片不能大量变形，于是，我通过写两个不同的类（每个类里面的background-images属性值URL不同），在页面里面通过jq判断屏幕大小，添加和删除自定义类。
jq代码如下：
$(function () {
//判断是否宽屏
var winWide = window.screen.width;
var wideScreen = false;
if (winWide <= 1199) {//1199及以下分辨率
$(".swiper-wrapper > div:nth-of-type(1)").removeClass(‘slide1‘).addClass(‘slide1-phone‘);
$(".swiper-wrapper > div:nth-of-type(2)").removeClass(‘slide2‘).addClass(‘slide2-phone‘);
$(".swiper-wrapper > div:nth-of-type(3)").removeClass(‘slide3‘).addClass(‘slide3-phone‘);
} else {
$(".swiper-wrapper > div:nth-of-type(1)").addClass(‘slide1‘).removeClass(‘slide1-phone‘);
$(".swiper-wrapper > div:nth-of-type(2)").addClass(‘slide2‘).removeClass(‘slide2-phone‘);
$(".swiper-wrapper > div:nth-of-type(3)").addClass(‘slide3‘).removeClass(‘slide3-phone‘);
wideScreen = true; //是宽屏
}
})
css代码如下：
.slide1{
background-image: url(../images/index-bg1.jpg);
background-size: cover;
}
.slide1-phone {
background-image: url(../images/mb-p1-bc.jpg);
background-size: cover;
}
.slide2{
background-image: url(../images/index-bg2.png);
background-size: cover;
text-align: center;
}
.slide2-phone {
background-image: url(../images/mb-p2-bc.jpg);
background-size: cover;
}
.slide3{
background-image: url(../images/index-bg3.jpg);
background-size: cover;
}
.slide3-phone {
background-image: url(../images/mb-p3-bc.jpg);
background-size: cover;
}
HTML代码如下：
标签：width 背景 html 代码 dex alt swipe 屏幕 背景图
原文地址：http://www.cnblogs.com/candy-Yao/p/7487983.html
