详解用backgroundImage解决图片轮播切换
css媒体查询有一个 宽高比很方便,aspect-ratio ,可以直接使用宽/高 来进行页面适配 使用样例如下:
单dom节点实现轮播
利用backgroundImage可以添加多张图片,以及位置偏移实现轮播效果
backgroundImage,图片轮播
创建一个div;并用backgroundImage给div附图片
利用backgroundPosition调节位置
利用css3 transition调节过渡
即可替代简单的图片切换
/**
* 播放图片
*/
function playImage(src) {
if (animaitionFinshed) return;
if (!_imageEl) {
_imageEl = document.createElement('div')
_imageEl.className = `swiper_container`;
_imageEl.style.backgroundImage = `url(${src.url})`;
_imageEl.setAttribute("data-img", src.url);
elContainer.appendChild(_imageEl);
} else {
animaitionFinshed = true;
let width = elContainer.clientWidth, height = elContainer.clientHeight;
let preImage = _imageEl.getAttribute("data-img");
_imageEl.style.backgroundImage = `url(${preImage}),url(${src.url}) `;
_imageEl.style.backgroundPositionX = `center,${width + 20}px`;
setTimeout(() => {
_imageEl.style.transition = "all 0.8s ease";
_imageEl.style.backgroundPositionX = `-${width + 20}px,center`;
}, 0);
setTimeout(() => {
_imageEl.style.transition = "none";
_imageEl.style.backgroundImage = `url(${src.url}) `;
_imageEl.style.backgroundPositionX = `center`;
_imageEl.setAttribute("data-img", src.url)
animaitionFinshed = false;
}, 800)
}
}
注意三点:
1、宽高比一定是比值的形式,不能直接写小数,宽/高
2、在less中直接写宽高比也不会生效,因为less会编译成小数,可以在比值前面加一个 ~ 完美解决
3、避免样式覆盖,最好把大比例的媒体查询写在后面
总结
以上所述是博主给大家介绍的css 媒体查询 aspect-ratio less 使用方法,希望对大家有所帮助