<!doctype?html>
<html>
?<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
??<title>滑出導航欄</title>
??<style>
body,div,span{
????margin:?0;
????padding:?0;
}
#div1{
????width:?200px;
????height:?200px;
????background:?red;
????position:?relative;
????left:-200px;
????top:200px;
}
#div1?span{
????????width:?20px;
????????height:?50px;
????????background:?blue;
????????position:?absolute;
????????left:?200px;
????????top:75px;
????}
??</style>
?
??<script>
????window.onload=function(){
????????var?v=document.getELementById("div1");
????????v.onmouseover=function(){
????????????star();
????????v.onmouseout=function(){
????????????star1();
????????}????
????????}
????}
????????var?timer=null;
????function?star(){
????????clearInterval(timer);
????????var?v=document.getELementById("div1");
????????timer=setInterval(function(){
????????????if(v.offsetLeft==0){
????????????????clearInterval(timer);
????????????}
????????????else{
????????????????v.style.left=v.offsetLeft+10+"px";
????????????}
????????},30)
????}
????function?star1(){
????????clearInterval(timer);
????????var?v=document.getELementById("div1");
????????timer=setInterval(function(){
????????????if(v.offsetLeft==-200){
????????????????clearInterval(timer);
????????????}
????????????else{
????????????????v.style.left=v.offsetLeft-10+"px";
????????????}
????????},30)
????}
</script>??
??<body>
<div?id="div1">
<span?id="share">分享</span>
</div>
??</body>
??</html>
2016-08-02
兩個錯誤
1.
window.onload=function(){
?????? var v =document.getElementById('div1');
??????? v.onmouseover=function(){
??????????? star();
???????? }
??????? v.onmouseout=function(){
?? ? star1()
?? }
}?
括號問題
2.
var v =document.getElementById('div1');
中的是getElementByld()不是getELementByld();
?l不是L
2016-08-02
首先32，43,55行的document.getElementById(),有問題是ElementById()，L不要大寫還有第34行star();后面少個中括號，38行的中括號去掉，這是兩個事件。
2016-08-02
是你的document.getEL（這里錯了。）ementById("div1");
應該是document.getElementById("div1");
L 大小寫的問題。 ?仔細啊。
推薦你用chrome瀏覽器。它的檢查功能很棒。
加油！