JavaScript基础应用 制作无缝滚动图实例与DOM基础知识讲解

在制作无缝滚动图之前需要了解JavaScript里面的offset系列属性设置。

位置、宽高属性:offset系列

offset系列包括以下五项:

offsetParent

offsetWidth

offsetHeight

offsetTop

offsetLeft

offsetWidth是元素的可视宽度,包括元素的边框、水平padding、垂直滚动条、元素本身宽度。

offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)

offsetHeight是元素的可视高度,包括元素的边框、垂直padding、水平滚动条、元素本身高度。

offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)

offsetLeft是返回元素边界左上角顶点相对于offsetParent边界左上角顶点的水平偏移量。

offsetLeft=(offsetParent的padding-left)+(中间元素的offsetWidth)+(当前元素的margin-left)。

offsetTop是返回元素边界左上角顶点相对于offsetParent边界左上角顶点的水平偏移量。

ffsetTop=(offsetParent的padding-top)+(中间元素的offsetHeight)+(当前元素的margin-top)。

offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。

总的来说两条规则:

  1、如果当前元素的父级元素没有进行CSS定位(position为absolute或relative),offsetParent为body。

  2、如果当前元素的父级元素中有CSS定位(position为absolute或relative),offsetParent取最近的那个父级元素。

如何制作无缝滚动图

1、页面的布局:首先,给页面设置一个div,用于装所要滚动的图片,在div里面用li标签装要滚动的多个图片,div的宽度为图片的总宽度。为了给图片使用offset属性,此处的div和ul标签要分别设置相对定位与绝对定位属性,并且要给div设置overflow:hidden属性。li标签里面的图片要设置左浮动属性。

<div id="box">
	<ul>
		<li><img src="img/a1.jpeg" alt="" /></li>
		<li><img src="img/a2.jpeg" alt="" /></li>
		<li><img src="img/a3.jpeg" alt="" /></li>
		<li><img src="img/a4.jpeg" alt="" /></li>
	</ul>
</div>
#box{
	width:740px;
	height:116px;
	position:relative;
	margin:20px;
	border:1px solid #000;
	overflow:hidden;
}
#box ul{
	position:absolute;
	left:0;
	top:0;
}
#box ul li{
	float:left;
}

2、JavaScript代码:首先,要用代码把原来的图片内容增加为两倍,使图片可以循环的滚动。然后使用offsetLeft属性,通过改变图片相对父级div的偏移量,使图片不断移动。当图片的整体宽度超过div的边界后,用offsetLeft属性将图片相对于父级div的偏移量清零,重新循环滚动。为了实现代图片的左右方向滚动,在图片下增加两个p标签,当点击两个p标签时,图片分别向左和向右滚动,给两个p标签分别设置鼠标点击事件,执行事件,使图片相对父级div的偏移量分别为一个负数和一个正数,使图片分别向左右两个方向滚动。代码如下:

<script>
	window.οnlοad=function(){
	var oBox=document.getElementById("box");
	var oUl=oBox.getElementsByTagName("ul")[0];
	var aLi=oUl.getElementsByTagName("li");
	var oLeft=document.getElementById("left");
	var oRight=document.getElementById("right");
	var speed=-1;
	oUl.innerHTML+=oUl.innerHTML;
	oUl.style.width=aLi[0].offsetWidth*aLi.length+"px";
	function move(){
		if(oUl.offsetLeft<-oUl.offsetWidth/2){
		oUl.style.left="0px";
	        }
		if(oUl.offsetLeft>0){
			oUl.style.left=-oUl.offsetWidth/2+"px";
		}
		oUl.style.left=oUl.offsetLeft+speed+"px";
	}
	oLeft.οnclick=function(){
		speed=-1;
	}
	oRight.οnclick=function(){
		speed=2;
	}
	setInterval(move,50);
}
</script>
p{
	width:100px;
	height:40px;
	line-height:40px;
	text-align:center;
	margin-right:10px;
	background:green;
	color:#000;
	float:left;
	margin-left:20px;
}
什么是DOM

DOM是文档对象模型(document object model),当页面被加载时,浏览器会创建页面的文档对象模型。HTML DOM模型被构造为对象的数。各浏览器对DOM的支持情况为:IE 10%;Chrome:60%;Firefox:99%。

查找HTML元素

有三种方法查找HTML元素

1、通过id名查找HTML元素

var oBox.document.getElementById("box");

2、通过标签名查找HTML元素

var aBox=document.getElementsByTagName("div");

3、通过类名查找HTML元素

var oBox=document.getElementsByClassName("box");

IE浏览器不兼容通过类名查找HTML元素

通过DOM,JavaScript可以常见动态的HTML页面。

JavaScript可以改变页面中所有的HTML元素

JavaScript可以改变页面中所有的HTML元素的属性

JavaScript可以改变页面中所有的CSS样式

JavaScript能对页面中所有的事件作出反应

DOM节点

childNodes 通过childNodes可以查找该元素的所有子节点。节点分为两种:元素节点和文本节点。

nodeType 通过nodeType可以返回节点的类型。如果返回nodeType=3,则为文本节点;如果返回nodeType=1,则为元素节点。

children 通过children可以返回该元素的所有元素节点。

parentNode 通过parentNode可以获取该元素的父节点。

首位子节点

firstChild、firstElementChild

lastChild、lastElementChild

在IE环境下,通过firstChild、lastChild可以分别获取元素的首、尾节点;在非IE环境下,通过firstElementChild、lastElementChild可以分别获取元素的首、尾节点。

兄弟节点

nextSibling、nextElementSibling

previousSibling、previousElementSibling

在IE环境下,通过nextSibling、nextElementSibling可以分别获取元素的下一个兄弟节点;在非IE环境下通过previousSibling、previousElementSibling可以分别获取元素的上一个兄弟节点。

通过DOM操作元素属性

获取元素属性:getAttribute()

设置元素属性:setAttribute()

删除元素属性:removeAttribute()









评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值