摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>navigation導(dǎo)航</title> <script type="text/javascript" src="
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>navigation導(dǎo)航</title>
<script type="text/javascript" src="static/jQuery/jquery-3.4.1.js"></script>
<link rel="stylesheet" type="text/css" href="static/font-awesome-4.7.0/css/font-awesome.min.css">
<style type="text/css">
*{padding:0px;margin:0px;}
.main_nav{margin:200px auto;width:1290px;height:50px;}
.heading{width:150px;height:50px;float:left;line-height:50px;text-align:center;border:1px solid #9D60FC;}
.sp{height:50px;display:inline-block;}
.clear{clear:both;}
.btn{width:200px;height:100px;border:none;background:coral;position:absolute;top:40px;left:600px;}
.bb{color:pink;}
p{position:absolute;top:150px;left:600px;font-size:20px;}
</style>
</head>
<body>
<div>
<div>
<button>改變背景</button>
</div>
<div>
<p></p>
</div>
<div>
<div><i class="fa fa-home"></i> 首頁</div>
<div><i class="fa fa-newspaper-o"></i> 新聞?lì)^條</div>
<div><i class="fa fa-television"></i> 熱播好劇</div>
<div><i class="fa fa-video-camera"></i> 最新電影</div>
<div><i class="fa fa-heartbeat"></i> 娛樂八卦</div>
<div><i class="fa fa-folder-open-o"></i> 熱門小說</div>
<div><i class="fa fa-plus-square"></i> 健康醫(yī)療</div>
<div><i class="fa fa-soccer-ball-o"></i> 熱門游戲</div>
</div>
<div>
當(dāng)前鼠標(biāo)的位置：<span></span>
</div>
<div></div>
</div>
<script type="text/javascript">
// $(document).ready(function(){})
$(function(){
$('.btn').click(function(){
$('body').css('background','#ccc');
$('.heading').css({'font-size':'15spx','font-weight':'bold'});
$('.btn').click(function(){
$('.btn').fadeTo(1000,0.5);
})
// $('.btn').click(function(){
// $('.btn').fadeTo(1000,1);
// })
$('.btn').click(function(){
$('.heading').toggleClass('bb');
})
$('.heading').animate({
left:'400px',
//使用預(yù)定義的值 show hide toggle
height:'toggle'
},1000);
$('p').html('<h3>歡迎來到中國(guó)電影網(wǎng)</h3>');//html可以設(shè)置html標(biāo)簽
$(document).mouseover(function(aa){
$('span').text('x: '+aa.pageX+'y: '+aa.pageY);
})
})
})
</script>
</body>
</html>
批改老師：天蓬老師批改時(shí)間：2019-07-31 14:14:18
老師總結(jié)：這種切換, 實(shí)際上就是主體的變換, 在執(zhí)行過程中, 要始終注意this的變化