window
作者:
洛洛kkkkkk | 来源:发表于
2017-04-18 19:50 被阅读0次<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window</title>
<style type="text/css">
body{
height: 3000px;
}
.toTop{
width: 50px;
height: 50px;
background-color: gray;
color: white;
line-height: 50px;
text-align: center;
transform: rotate(-90deg);
position: fixed;
right: 100px;
bottom: 100px;
display: none;
}
.textDiv{
width: 100px;
font-size: 40px;
}
</style>
</head>
<body>
<div class="toTop">-></div>
<div class="textDiv">大肯德基奥数傀儡的航空路撒就打开了撒娇看来大家撒看来大家撒开了大家快来撒大家快来撒打卡上</div>
</body>
<script type="text/javascript">
var toTop=document.querySelector(".toTop");
window.onload = function () {
console.log("页面加载完毕");
// document.write("123");
}
//页面滑动的时候执行
window.onscroll = function () {
console.log("页面滑动了"+document.body.scrollTop);
if(document.body.scrollTop>=600){
toTop.style.display="block";
}else{
toTop.style.display="none";
}
}
toTop.onclick=function () {
document.body.scrollTop=0;
}
//窗口大小发生变化的时候执行的方法
window.onresize=function () {
console.log(document.body.clientWidth);
}
</script>
</html>
本文标题:window
本文链接:https://www.haomeiwen.com/subject/yweqzttx.html
网友评论