急需大神讲解这个问题!!!(红色的为不懂得地方)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style>
#d1{
width:150px;
position:absolute;
left:-120px;
top:100px;
}
.left
{
width:120px;
float:left;
font-size:13px;
border-top:1px solid #6943CE;
}
.left ul
{
list-style-type:none;
margin:0px;
padding:0px;
}
.left ul li
{
border:1px solid #6943CE;
margin-top:-1px;
padding:4px;
width:120px;
text-align:center;
}
.right
{
width:20px;
float:left;
background-color:#1688D7;
text-align:center;
padding:25px 5px 25px 5px;
font-size:14px;
color:#fff;
}
</style>
<script type="text/javascript">
function getStyle(obj,name)
{
if(obj.currentStyle)
{
// alert("ie "+obj.currentStyle[name]);
return obj.currentStyle[name]
}else
{
// alert("fire "+getComputedStyle(obj,false)[name]);
return getComputedStyle(obj,false)[name]
}
}
var timer ;
var timer2 ;
function moveRight(){
clearInterval(timer2);
var d1 = document.getElementById("d1");
var speed = 10;
timer = setInterval(function(){
leftValue = parseInt(getStyle(d1,"left"));
if(leftValue < 0){
d1.style['left'] = leftValue + speed + "px";
// alert(d1.style['left']);
}else{
clearInterval(timer);
}
},50);
}
function moveLeft(){
clearInterval(timer);
var d1 = document.getElementById("d1");
var d1Childs = d1.getElementsByTagName("*");
var divLeft = [];
for( var i = 0 ;i < d1Childs.length ; i++){
if(d1Childs[i].className == "left")
divLeft.push(d1Childs[i]);
}
var speed = -20;
timer2 = setInterval(function(){
leftValue = parseInt(getStyle(d1,"left"));
if(leftValue > -divLeft[0].offsetWidth){
d1.style['left'] = leftValue + speed + "px";
// alert(d1.style['left']);
}else{
clearInterval(timer2);
}
},50);
}
</script>
</head>
<body>
<div id="d1" onMouseOver="moveRight();" onMouseOut="moveLeft();">
<div class="left">
<ul>
<li>白日依山尽</li>
<li>黄河入海流</li>
<li>欲穷千里目</li>
<li>更上一层楼</li>
<li>野火烧不尽</li>
<li>春风吹又生</li>
</ul>
</div>
<div class="right">
站内导航菜单
</div>
</div>
</body>
</html>