<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<style>
????????*{
????????????margin:0;
????????????padding:0;
????????}
????????ul{
????????????list-style:?none;
????????}
????????ul?li{
????????????width:200px;
????????????height:?80px;
????????????background:?red;
????????????margin-bottom:?20px;
????????????border:?4px?solid?black;
????????????opacity:?0.3;
????????????filter:?alpha(opacity:30);
????????}
????</style>
????<script>
????????window.onload=function(){
????????????var?Li?=?document.getElementsByTagName("li");
????????????????Li.onmouseover?=?function(){
????????????????????startMove(this,'width',400);
????????????????};
????????????????Li.onmouseout?=?function()?{
????????????????????startMove(this,?'width',?200);
????????????????};
????????????var?timer?=?null;
????????????function?startMove(obj,attr,target){
????????????????????clearInterval(timer);
????????????????????timer?=?setInterval(function(){
????????????????????var?icur?=?0;
????????????????????????if(attr?==?'opacity'){
????????????????????????????icur?=?parseFloat(getStyle(obj,attr))*100;
????????????????????????}else{
????????????????????????????icur?=?parseInt(getStyle(obj,attr));
????????????????????????}
????????????????????var?speed?=?(target?-?icur)/8;
????????????????????????speed?=?speed?>?0???Math.ceil(speed)?:?Math.floor(speed);
????????????????????if(icur?==?target){
????????????????????????clearInterval(timer);
????????????????????}
????????????????????else{
????????????????????????if(attr?==?'opacity'){
????????????????????????????obj.style.filter?==?'alpha(opacity:'+?(icur?+?speed)+')';
????????????????????????????obj.style.opacity?==?(icur?+?speed)/100?;
????????????????????????}else?{
????????????????????????????obj.style[attr]?=?icur?+?speed?+?"px";
????????????????????????}
????????????????????}
????????????????},30)
????????????}
????????????function?getStyle(obj,attr){
????????????????if(obj.currentStyle){
????????????????????return?obj.currentStyle[attr];
????????????????}else{
????????????????????return?getComputedStyle(obj,false)[attr];
????????????????}
????????????}
????????}
????</script>
</head>
<body>
<ul>
????<li></li>
</ul>
</body>
</html>
2015-12-28
可是當我把調用里的'width'該為'opacity'的時候，效果又出不來了。（target已改）
2015-12-26
你好，document.getElementsByTagName(); 獲取的是一組數，所以要像取數組里的元素來取，因此要這么寫：
document.getElementsByTagName("li")[0];望樓主采納！
2015-12-26
var?Li?=?document.getElementsByTagName("li")[0];???????//少了個[0]