为了账号安全,请及时绑定邮箱和手机立即绑定

为什么那个小图片出不来

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{margin:0; padding:0px;}

#ha{ width:1190px;margin:0 auto;}

#pic{width:40px; height:40px; background:url(images/top_bg.png) no-repeat; position:absolute; left:50%; bottom:30px; margin-left:610px; display:none;}

#pic:hover{ background:url(images/top_bg.png) left -40px;}

</style>

<script type="text/javascript">

window.onload = function(){

var opic = document.getElementById("pic");

var cH = document.documentElement.clientHeight;

var timer = null;

var isTop = true;

window.onscroll= function(){

var osTop = document.documentElement.scrollTop || document.body.scrollTop;

if(osTop>=cH){

opic.style.display = "block";

}

else{

opic.style.display = "none";}

if(!isTop){

clearInterval(timer);}

isTop = false;

}

opic.onclick = function(){

timer = setInterval(function(){

var osTop = document.documentElement.scrollTop || document.body.scrollTop;

var speed = Math.floor(-osTop/5);

document.documentElement.scrollTop=document.body.scrollTop=osTop+speed;

isTop = true;

if(osTop == 0){

clearInterval(timer);}},30);

}

}

</script>

</head>


<body>

<div id="ha">

<img src="images/tb_bg.jpg">

<a href="javascript:;" id="pic"></a>

</div>

</body>

</html>


正在回答

举报

0/150
提交
取消
回到顶部效果
  • 参与学习       44211    人
  • 解答问题       206    个

回到顶部网站不可缺少的一部分,用JS实现炫酷拉风的回到顶部效果

进入课程

为什么那个小图片出不来

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信