fadeIn fadeOut 淡入 淡出 返回顶部

Original 2019-05-08 15:33:47 186
abstract:<!DOCTYPE html><html> <head>   <meta charset="UTF-8" />   <meta name="viewport" content="width=device-width, initial-scale=

<!DOCTYPE html>

<html>

 <head> 

  <meta charset="UTF-8" /> 

  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

  <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 

  <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.css"/>

  <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> 

  <title>作业</title> 

   <style type="text/css">

   *{margin: 0;padding: 0;}

body{background-color: #ccc;;}

.head{height: 40px;width: 100%;background-color: red;position: fixed;;top: 0;}

#tips{position: fixed;bottom: 10px;right: 20px;}

#tips p{cursor: pointer;padding: 10px;margin-top: 5px;background-color: yellow;border-radius: 8px;color: #000;}

</style> 

<script type="text/javascript">

$(function(){

$('#toUp').fadeOut(1000)

$(window).on('scroll',function(){  //或者 $(window).scroll(fnuction(){...})


var Hg=$(window).scrollTop();

if(Hg>50){

$('#toUp').fadeIn(1000)

}else{

$('#toUp').fadeOut(1000)

}

})

})

</script>

 </head> 

<body> 

<div id="body">

<div></div>

<div id="tips">

<p><i class="fa fa-caret-square-o-up"></i></p>

<p><i class="fa fa-check-square"></i></p>

<p id="toUp"><i class="fa fa-hand-stop-o"></i></p>

</div>

</div>  

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

 </body>

</html>


Correcting teacher:查无此人Correction time:2019-05-09 14:08:46
Teacher's summary:完成的不错。js和jq语句结束后,增加;号。继续加油。

Release Notes

Popular Entries