<style type="text/css">
body,div,span,ul,li{ margin:0; padding:0;}
#div1{
width:200px;
height:200px;
background:#F00;
position:relative;
left:-200px; top:0;
}
#div1 span{ width:20px; height:50px; background-color:#00F; position:absolute; left:200px; top:75px;}
#div2{width:200px; height:200px; background-color:#F00;
filter:alpha(opacity:30);
opacity:0.3;
}
ul,li{list-style:none;}
ul li{width:200px; height:100px; background-color:#FF0; margin-bottom:20px;}
</style>
<script type="text/javascript">
window.onload = function(){
var aLi = document.getElementsByTagName('li');
for(var i = 0; i < aLi.length; i++){
aLi[i].timer=null;
aLi[i].onmouseover = function(){
startMove(this,400);
}
aLi[i].onmouseout = function(){
startMove(this,200);
}
}
}
function startMove(obj,iTarget){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (iTarget - obj.offsetWidth)/8;
speed = speed >0 ? Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth == iTarget){
clearInterval(obj.timer);
}
else{
obj.style.width = obj.offsetWidth + speed + 'px';
}
},30);
}
</script>
</head>
<body>
<!--<div id="div1"><span>分享</span></div>
<div id="div2"></div>-->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>这样写试试：
<script type="text/javascript">
<!--
//-->
</script>XHTML 文档是 XML 的子类型，所以需要遵循 XML 语法规范。
建议使用 HTML 5 而不是 XHTML。
html 的doctype改成 <!doctype html>