底部菜单1

运用了transform
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>我是可移动的  </title>
	<style type="text/css">
		*{margin: 0px; padding: 0px;}
		#foot{
		    bottom: 0px;
			position: absolute;
    z-index: 3002;
    overflow: visible;
    opacity: 1;
    cursor: default;
    pointer-events: none;
    background-image: url(../img/ui.png);
    background-repeat: repeat-x;
  /*   background: url(../img/ui.png) repeat-x ;*/
    
    width: 70px;
    height: 149px;
    background-position: 0px -140px;
   /* background-size: 1000px 400px;27.3986*/
  /*  transform: translateZ(1e+12px) translate(0px, 0px) translate(-35px, -74.5px) scale(13.9992, 1) translate(35px, 74.5px) translate(0px, 74.5px) rotate(0deg) translate(0px, -74.5px);*/
  /*  overflow:hidden;*/

}
		 
	</style>
	<script type="text/javascript">
	window.onresize = LoadMenu;
	function LoadMenu(){
		var winWidth = 0;
			var winHeight = 0;
			//获取窗口宽度
			if (window.innerWidth){
				// console.log(1);
				 winWidth = window.innerWidth;}
			else if ((document.body) && (document.body.clientWidth))
				winWidth = document.body.clientWidth;
			//获取窗口高度
			if (window.innerHeight)
				winHeight = window.innerHeight;
			else if ((document.body) && (document.body.clientHeight))
				winHeight = document.body.clientHeight;
				//通过深入Document内部对body进行检测，获取窗口大小
			if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
			{
				winHeight = document.documentElement.clientHeight;
				winWidth = document.documentElement.clientWidth;
			}
			 var i =  27.3986/1918*winWidth;
			 console.log(i);
			// alert(winWidth +"  "+ winHeight);

		document.getElementById("foot").style.transform = "translateZ(1e+12px) translate(0px, 0px) translate(-35px, -74.5px) scale("+i+", 1) translate(35px, 74.5px) translate(0px, 74.5px) rotate(0deg) translate(0px, -74.5px)";
	}
	window.onload = LoadMenu;
	//	alert(Iwidth);		  
		
	//	console.log(Iwidth +"搞事"+ IHeight);
	 	//在此进行动态设置样式
	 


    //封装“滚动函数”
    var s = document.title.split('');
    function loop() {
        s.push(s[0]);//在数组的最后一位推入第一位；
        s.shift();//删除第一位；
        document.title = s.join('');//拼成字符串再赋值给tittle；
    }
    setInterval(loop, 500);//开定时器，实现“滚动效果”
	
 	//封装“滚动函数”
	</script>
</head>
<body>
 
	<div id="foot" ></div>
</body>
</html>
效果如图，可以根据浏览器自动的改变底部遮罩，此为引用的一张雪碧图
猜你喜欢
