【原】背景图片定位横向移动（代码教程）

春天没来 2018-01-04

展开全文

背景图片定位横向移动（代码教程）

背景图片定位横向移动，也是一种效果很美的网页！本节教程我给大家分析讲解一下这种网页的制作方法。

先设置一个表格，然后在表格中放入几个宽度、高度、移动方向、移动速度等属性相同的移动标签。每一个移动标签控制一个表格，表格中设置定位的背景图片。

我们先来看看我举例的网页代码与其显示效果：

<tbody>

<tr>

<td>

<tbody>

<tr>

<td>

<tbody>

<tr>

<td>

<tbody>

<tr>

<td>

<tbody>

<tr>

<td>

<tbody>

<tr>

<td>

<tbody>

<tr>

<td>

<tbody>

<tr>

<td>

<tbody>

<tr>

在总表格中，我设置了一些属性：css样式：四条边框线的颜色、宽度、样式、相对定位的居上值与居左值。表格的标题、表格的间距与边距、表格的宽度与高度、表格的背景颜色。

总表格中放入了八个移动标签。为了说明时方便起见，我们不妨把这八个移动标签依照从左到右的顺序分别称为：移动屏幕1，移动屏幕2，移动屏幕3，移动屏幕4，移动屏幕5，移动屏幕6，移动屏幕7，移动屏幕8。

每一个移动屏幕控制着一个分表格。同样为了说明时方便起见，我们不妨把这六个表格也依照自上而下的顺序分别称为：表格1，表格2，表格3，表格4，表格5，表格6，表格7，表格8。

每一个移动标签中都设置了移动屏幕的边框线宽度、样式与颜色，绝对定位的居左值与居上值，移动屏幕的宽度与高度，移动屏幕的标题，移动方向，移动速度，两次移动之间的间隔时间，移动屏幕的间距与边距。

移动屏幕控制的分表格中，都设置了背景图片定位的居左值与居上值，表格的宽度与高度，边框线宽度，表格的标题与背景图片。

当然了，以上这些设置，你都可以增减欧！

下面我重点讲解几个问题：

一、各个移动屏幕中，绝对定位的居上值与居左值如何设置？

说到定位，就得懂得定位的参考点。无论绝对定位，还是背景图片的定位，都有个定位参考点。

定位参考点，就是指你要应用的图片或者其它内容的左上角的顶点要与网页中的哪一点相重合。

本文中，我在总表格中已经设置了css的相对定位样式，那么，绝对定位的参考点就是表格的左上角顶点。如果总表格中不设置css的相对定位样式，那么，绝对定位的参考点就是网页的左上角顶点。

那么，8个移动屏幕我是怎样设置的呢？为什么要那样设置？

8个移动屏幕的居上值，我都设置为2px。居左值，8个移动屏幕从左到右分别设置为：2px，122px，242px，362px，482px，602px，722px，842px。

这就是说，移动屏幕1的左上角顶点，与总表格中居左2px居上2px的那一点重合。移动屏幕的高度为496px，宽度为100px。

移动屏幕2的左上角顶点，与总表格中居左122px居上2px的那一点重合。移动屏幕的高度为496px，宽度为100px。

移动屏幕3的左上角顶点，与总表格中居左242px居上2px的那一点重合。移动屏幕的高度为496px，宽度为100px。

……

从设置中大家可以看出，每两个相邻移动屏幕之间的居左值的差为120px。

为什么要这样设置呢？

每个移动屏幕的宽度为100px,每两个移动屏幕之间有上一个移动屏幕的右边框线3px，下一个移动屏幕的左边框线3px。每两个移动屏幕之间的居左值的差设置为120px，这就保证了每两个移动屏幕之间有14px的空白距离。如果两个移动屏幕连在一起了，效果就不美观了。

二、各个分表格中，背景图片如何定位呢？

背景图片的定位，要与移动屏幕相配合。移动屏幕中的居左值设置为多少px，它所控制的表格中背景图片的居左值就设置为负的多少px，只有这样才能够保证各个移动屏幕中背景图片正常衔接，源源不断地向右滚动。

8个移动标签所控制的8个表格中背景图片的定位，居上值都为：-2px。居左值，从左到右依次为：-2px，-122px，-242px，-362px，-482px，-602px，722px，842px。

三、背景图片规格与背景图片定位的关系：

大家要清楚，移动标签控制的表格的高度与宽度，也就是定位的背景图片的高度与宽度。所以，如果想让背景图片完整地显示，完整地滚动，这里的高度与宽度就应该与背景图片的规格一致。

四、几个高度值的设置：

各个移动屏幕的高度，各个分表格的高度，都应与背景图片的高度相一致，都设置为：496px。

总表格的高度怎样设置呢？

因为移动屏幕有3px的边框线，上下两条边框线就是6px;总表格有3px的边框线，上下两条边框线就是6px。第一个移动屏幕的位置居上2px，因此，总表格的下方也应该空出2px，才能够对称。所以，总表格的宽度应该设置为：496＋6＋4＝512（px）。

五、几个宽度值的设置：

几个移动屏幕的宽度都设置为100px,几个分表格的宽度都要与背景图片的宽度相同，设置为750px，这样，完整的背景图片才能够在各个移动屏幕中源源不断地向右滚动。

总表格的宽度值怎样设置？

这是个关键问题，要计算一下欧！

每个移动屏幕的宽度为100px,加上左右两边各3px的边框线就是106px。

移动屏幕1居左2px，移动屏幕2居左122px，这两个居左值之间相差120px。移动屏幕的宽度为100px，再加上第一个移动屏幕的右边框线3px,第二个移动屏幕的左边框线3px，一共为106px，由此可知，两个移动屏幕之间的空白距离为120－106＝14px。8个移动屏幕之间有7个间隔，14×7＝98px。

总表格的边框线为3px，左右两条边框线一共为6px。

第一个移动屏幕居左2px，为了对称，第八个移动屏幕右面也应该空出2px。

因此，总表格的宽度＝8个移动屏幕的宽度（含边框线）＋7个间隔的宽度＋2个总表格的边框线宽度＋第一个移动屏幕的居左值的2倍＝106 ×8＋14×7＋3×2＋2×2＝956（px）

朋友们，你弄懂了没有？可谓牵一发而动全身欧！如果你想制作这种网页，不能只换个背景图片就了事。

好了！你也试试吧！比照我撰写的这篇教程，反复多试几次，我相信你一定会成功的！

“春天没来”编撰

2018年1月5日于北京

背景图片定位竖向移动