好烦啊怎么什么效果都没觉得没写错啊TT-慕课网

首页课程实战体系课手记专栏慕课教程

好烦啊怎么什么效果都没觉得没写错啊TT

来源：1-3 实例JS+DOM

啊啊啊啊123

2016-07-07 10:22

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<meta charset="utf-8">

<title>DOM</title>

<link href="css/main.css" rel="stylesheet"type="text/css" />

<script src="js/dom.js" type="text/javascript"></script>

</head>

<body>

<div id="box">

<img src="img/QQ截图20160707085954.jpg" alt="tel" title="TEL" />

<img src="img/QQ截图20160707085954.jpg" alt="tel" title="TEL" />

<img src="img/QQ截图20160707085954.jpg" alt="tel" title="TEL" />

<img src="img/QQ截图20160707085954.jpg" alt="tel" title="TEL" />

</div>

</body>

</html>

CSS

/* CSS Document */

#box{ height:450px; margin:0 auto; border:red solid 2px; overflow:hidden; position:relative;}

#box img{ position:absolute; left:0; display:block; border-left:#CCCCCC solid 1px;}

JS

window.onload=function(){

var box=document.getElementById('box');

var imgs=box.getElementsByTagName('img');

var imgwidth=imgs[0].offsetwidth;

var exposewidth=160;

var boxwidth=imgwidth+(imgs.length-1)*exposewidth;

box.style.width=boxwidth+'px';

for(var i=1,len=imgs.length;i<len;i++){

imgs[i].style.left=imgwidth+exposewidth*(i-1)+'px';

}

};

总宽度没变化图片也没法全出来

写回答关注

2回答

聆Q

2016-07-07 13:43:18

已采纳
很小的错误
```
var imgwidth = imgs[0].offsetWidth;
```
offsetWidth你写错了而已。
2 0

聆Q 回复啊啊啊啊12...

没关系~

2016-07-07 16:20:28

共 2 条回复 >
HelloNEON

2016-07-07 10:52:58

图片没有刷出来只能说明路径错误。html文件是在所有文件的外部吗？

1 0

啊啊啊啊12...

图没刷出来是因为我用是我截下来的图，你试的时候自己用自己的图 img标签里的链接改成你机子上的图

2016-07-07 11:49:55

共 1 条回复 >

DOM探索之基础详解篇

要知道前端大牛都是从精通DOM开始的，全面讲解DOM的基础知识

98368 学习 · 251 问题

相似问题

为什么判断element.nodeType==Node.ElEMENT_NODE 没有效果？

回答 1

为什么我写的那个滑动门事件没有效果

回答 5

为什么没有图片铺开的效果

回答 3

为什么没有图片铺开的效果？

回答 2

fn()是怎么回事啊？？

回答 1

打开慕课网App查看更多内容