运用了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>
效果如图,可以根据浏览器自动的改变底部遮罩,此为引用的一张雪碧图