代碼運行無效果,麻煩幫忙看一下。
<!DOCTYPE html>
<html>
<head>
?<meta charset="UTF-8">
?<title>Document</title>
?<style type="text/css">
??*{margin:0;padding: 0}
??ul{list-style: none;height: 50px;border-bottom: 5px solid #f60;padding-left: 30px}
??li{float: left;margin-top: 20px}
??a{display:block; height:30px;text-align:center; line-height:30px; width:120px; margin-bottom:1px;color:#333;text-decoration:none; background-color: #ccc}
??.on,a:hover{color:red;height: 30px;line-height: 30px;background-color: black;}
?</style>
?<script>
??window.onload=function(){
???var aA=document.getElementsByTagName('a');
???for(var i=0;i<aA.length;i++)
????aA[i].onmounseover=function(){
?????var This=this;
?????setInterval(function(){
??????This.style.width=This.offsetWidth+8+"px";?????},30)
????}
??}?</script>
</head>
<body>
?<ul >
??<li><a href="#">課程</a></li>
??<li><a href="#">職業(yè)路徑</a></li>
??<li><a href="#">實戰(zhàn)</a></li>
??<li><a href="#">原文</a></li>
??<li><a href="#">手記</a></li>
?</ul>
</body>
</html>
2017-02-12
不好意思,剛打錯了,應該寫成onmouseover
2017-02-12
你寫的onmounseover多了一個應該寫成?onmouseove,還有for循環(huán)后面少了一個{}
2017-02-12
window.onload = function() {
var aA = document.getElementsByTagName('a');
for(var i = 0; i < aA.length; i++) {
aA[i].onmouseover = function() {
var This = this;
clearInterval(This.time);
This.time = setInterval(function() {
This.style.width = This.offsetWidth + 8 + "px";
if(This.offsetWidth >= 160) {
clearInterval(This.time);
}
}, 30)
}
aA[i].onmouseout = function() {
clearInterval(this.time);
var This = this;
this.time = setInterval(function() {
This.style.width = This.offsetWidth - 8 + "px";
if(This.offsetWidth <= 120) {
This.style.width = '120px';
clearInterval(This.time);
}
}, 30)
}
}
}
-----------------------------------試試這個代碼