CSS中关于:对象.OffsetWidth和对象.Style.width的区别
1.offsetWidth属性可以返回对象的padding+border+width属性值之和
style.width返回值就是定义的width属性值
2.offsetWidth属性仅是可读属性，而style.width是可读写的
3.offsetWidth属性返回值是整数，而style.width的返回值是字符串
4.style.width仅能返回以style方式定义的内部样式表的width属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Exercise</title>
<style media="screen">
* {margin: 0px;padding: 0px;}
#div1{
width: 712px;
height: 108px;
background-color: pink;
margin: 200px auto;
position: relative;
overflow: hidden;
}
#div1 ul {
position: absolute;
}
#div1 ul li {
float: left;
width: 178px;
height: 108px;
list-style: none;}
a{
position:relative;
top:150px;
left: 600px;
}
a:HOVER{
font-size: 50px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var speed = 2;
var oDiv = document.getElementById("div1");
var oUl = document.getElementsByTagName("ul")[0];
var aLi = oUl.getElementsByTagName("li");
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth * aLi.length + "px";
function move() {
if(oUl.offsetLeft < -(oUl.offsetWidth / 2))
{
oUl.style.left = "0";
}
if(oUl.offsetLeft > 0)
{
oUl.style.left = -(oUl.offsetWidth / 2) + "px";
}
oUl.style.left = oUl.offsetLeft + speed + "px";
};
var timer = setInterval(move, 20);
oDiv.onmouseover = function (){
clearInterval(timer);
};
oDiv.onmouseout = function (){
timer = setInterval(move, 20);
};
document.getElementsByTagName("a")[0].onclick = function (){
speed = -2;
};
document.getElementsByTagName("a")[1].onclick = function (){
speed = 2;
};
};
</script>
</head>
<body>
<a href="javasrcipt:;">left</a>
<a href="javasrcipt:;">right</a>
<div id="div1">
<ul>
<li> <img src="./images/1.jpg"></li>
<li> <img src="./images/2.jpg"></li>
<li> <img src="./images/3.jpg"></li>
<li> <img src="./images/4.jpg"></li>
</ul>
</div>
</body>
</html>声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： 关于W3WP.EXE进程的问题
- 下一篇： thinkphp3.2【model模型】
