急需大神讲解这个问题!!!(红色的为不懂得地方)

x独孤求败x 2016-06-23 10:39:12
<!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>
...全文
143 4 打赏 收藏 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
qq_34897965 2016-06-24
  • 打赏
  • 举报
回复
var d1Childs = d1.getElementsByTagName("*"); 表示获取d1下所有的子元素 *是通配符,即匹配所有 divleft为数组,存放d1Childs中所有class名为left的元素
csucaicai 2016-06-24
  • 打赏
  • 举报
回复
1.第一个 var d1 = document.getElementById("d1"); 获取id为d1的dom元素 var d1Childs = d1.getElementsByTagName("*");d1下边的所有元素 2.第二处 if(d1Childs[i].className == "left") divLeft.push(d1Childs[i]); } 如果d1下边的任意一个元素的class为letf,那么将该元素放到divLeft的数组中 3.第三处 leftValue = parseInt(getStyle(d1,"left")); if(leftValue > -divLeft[0].offsetWidth) leftValue为d1的绝对定位,相距浏览器左边的绝对距离 divLeft[0].offsetWidth为第一个含有class='left'的元素的宽度,此宽度是当前元素在浏览器中的宽度
x独孤求败x 2016-06-24
  • 打赏
  • 举报
回复
谢谢大神指点
x独孤求败x 2016-06-23
  • 打赏
  • 举报
回复
getElementByTagName中的*是啥意思,还有divleft到底是为了实现啥的,求大神解释

87,984

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧