图片平铺,无论怎么缩小浏览器窗口都始终处于居中状态
/*
* 1.当视口调整时( window.onresize() )动态改变背景图的位置(img.backgroundPositionX),
向左侧移动的距离 = (设计图最大宽度 - 视口宽度)/2
让其使用位于元素的中心处
2.当视口宽度(viewPortWidth)小于 UI 实际图最小宽度(minWidth)时,不再调整背景图位置
3.由于上述逻辑具有通用性,可以封装成一个 function(),以便后续项目使用
* */
//1.获取当前视口的大小
var viewWidth = document.documentElement.clientWidth;
//2.图片的大小
var bgimgWidth = 1920;
//3.让图片始终保持居中
var positionX = (1920-viewWidth)/2;
var dom = document.querySelector(".bgimg"); //获取平铺图片的div
dom.style.backgroundPositionX = -positionX + 'px';
//4.绑定 事件
window.onresize = function(){
var viewWidth = document.documentElement.clientWidth;
var positionX = (1920-viewWidth)/2;
//当显示窗口小于1000px时 图片不在处于居中状态
if (viewWidth<1000){
return;
}
var dom = document.querySelector(".bgimg");
dom.style.backgroundPositionX = -positionX + 'px';
}
这样写不利于项目的维护,代码繁琐 所以将其封装成一个函数 代码如下项目可直接使用
//1.获取当前视口的大小
var viewWidth = document.documentElement.clientWidth;
//2.图片的大小
var bgimgWidth = 1920;
//3.让图片始终保持居中
var dom = document.querySelector(".bgimg");
changeCenter(1920,viewWidth,1000,dom);
//4.绑定事件 onresize 事件会在窗口或框架被调整大小时发生。
window.onresize = function(){
var viewWidth = document.documentElement.clientWidth;
changeCenter(1920,viewWidth,1000,dom);
}
/*
* bgimgWidth 图片原始大小
* viewWidth 当前窗口大小
* viewMinWidth 最小大小
*dom dom对象
* */
function changeCenter (bgimgWidth,viewWidth,viewMinWidth,dom){
if (viewWidth<viewMinWidth){
return;
}
var positionX = (bgimgWidth-viewWidth)/2;
dom.style.backgroundPositionX = -positionX + 'px';
}
鼠标划上 图片逐渐变大
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border: #000 solid 1px;
margin: 50px auto;
overflow: hidden;
}
div img{
cursor: pointer;
transition: all 0.6s;
}
div img:hover{
transform: scale(1.4);
}
</style>
</head>
<body>
<div>
<img src="img/focus.png" />
</div>
</body>
</html>