当我试图将图像移动到中心时,浏览器可以显示错误,无法读取属性宽度为null。我试图将屏幕的宽度除以2我无法理解为什么会出现错误。
var mobile = document.getElementById("mobile");
var monitor = document.getElementById("monitor");
var tab = document.getElementById("tab");
var header = document.getElementById("header");
var position = (screen.width - monitor.width)/2;
monitor.style.left = position+"px;";
function initScroll(){
if(window.pageYOffset >500){
mobile.style.left = "300px";
tab.style.right = "250px";
header.style.height = "60px";
header.style.fontSize = "25px";
}else{
header.style.height = "60px";
header.style.fontSize = "25px";
mobile.style.left = "0px";
tab.style.right = "0px";
}
}
window.addEventListener("scroll",initScroll);
*{padding: 0;margin: 0;font-family:arial;}
#header{height:100px;background-color: #354458;font-size: 40px;color:#fff; text-align:center;line-height:2.5;
position:fixed; width:100%;z-index:20;
-moz-transition: 2s height, 2s font-size;
-o-transition: 2s height, 2s font-size;
-webkit-transition: 2s height, 2s font-size;
transition: 2s height, 2s font-size;
}
#banner{background: #3a9ad9;height:400px;position:fixed;width:100%;
top:100px;font-size:50px; text-align: center; color
:#fff;z-index:10;
}
#banner > * {
margin-top:30px;
}
#content{
top:500px;
position:relative;
height:1000px;
padding-top:200px;
background-color: #fff;
z-index:15;
}
#mobile{
position: absolute;
left: 0;
z-index: 15;
top: 470px;
-moz-transition: 2s left;
-o-transition: 2s left;
-webkit-transition: 2s left;
transition: 2s left;
}
#monitar{position: relative;}
#tab{
position: absolute;
right: 0;
z-index: 15;
top: 385px;
-moz-transition: 2s right;
-o-transition: 2s right;
-webkit-transition: 2s right;
transition: 2s right;
}
<html>
<head>
<title>Java script Scroller</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<script src="./js/custom.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">Header</div>
<div id="banner">
<h1>My Animation</h1>
<h2>First collapsable header</h2>
<h3>Apurva Kinkar</h3>
</div>
<div id="content">
<img id="mobile" src="./img/1.jpg" />
<img id="monitar" src="./img/2.png" />
<img id="tab" src="./img/3.jpg" />
</div>
</div>
</body>
</html>
答案 0 :(得分:1)
您的<img>
声明中出现拼写错误,必须为monitor
而不是monitar
<img id="monitar" src="./img/2.png" />
将此更改为,
<img id="monitor" src="./img/2.png" />
希望这有帮助!
答案 1 :(得分:0)
首先,您的图片ID拼写错误。
更改: -
<img id="monitar" src="./img/2.png" />
到
<img id="monitor" src="./img/2.png" />
更改此设置后,您仍会收到相同的错误。这是因为,当你的js代码运行时,img元素仍然没有添加到DOM中。 为此,使javascript代码在document.ready函数上运行(当带有id&#34;监视器&#34;的img存在于DOM中时)。
这是使用jQuery的document.ready()函数的working example。
如果您不想使用jQuery,也可以使用this example。