摘要：<!DOCTYPE html><html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equ
<!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" />
<title>animtae</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
#obj{width: 100px;height: 100px;background-color: red;display: block;position: fixed;}
</style>
</head>
<body>
<!--
動畫語法
$(selector).animate({params},speed,fn);
停止動畫語法
$(selector).stop(stopAll,goToEnd)
-->
<div id="obj">頁面廣告</div>
<script type="text/javascript">
var hg,wh,offwh,offhg,left;
//鼠標移上動畫停止
$('#obj').on('mouseover',function(){
$(this).stop();
})
//鼠標移除時 不知道怎么寫
$('#obj').on('mouseleave',function(){
// $(this).
/* $("#obj").stop().animate({
'left':offwh,
'top':offhg,
},5000,'swing',fun1);//當向下結束時，調用向上移動的函數(shù)*/
})
function fun(){
$("#obj").stop().animate({
'left':offwh,
'top':offhg,
},5000,'swing',fun1);//當向下結束時，調用向上移動的函數(shù)
}
function fun1(){
$("#obj").stop().animate({
'left':'0px',
'top':'0px',
},10000,'swing',fun);//當向上結束時，調用向下移動的函數(shù)
}
$(function(){
hg=document.documentElement.clientHeight;
wh=document.documentElement.clientWidth;
offwh=(wh-100)+'px';
offhg=(hg-100)+'px';
setTimeout("fun()",2000);
})
</script>
</body>
</html>
批改老師：查無此人批改時間：2019-05-16 09:24:52
老師總結：完成的不錯。jq比js簡單很多，多練習。繼續(xù)加油。