js常用样式---持续更新

图片平铺,无论怎么缩小浏览器窗口都始终处于居中状态

/*
		* 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>

js常用样式---持续更新

猜你喜欢