【聊代码】第十七集移动标签（之五）

pfm 2022-08-25 发布于广东

展开全文

聊代码（第十七集）移动标签（之五）

从这集开始，介绍一些图片移动的代码。

（十七）图片横向（向左或向右）移动：

代码：＜div align="center"＞＜table align="center" background="http://img7.ph.126.net/bd6zz97pDq4GzNwYklqLAA==/3396277068991311037.gif" bgcolor="#ff0000" border="15" bordercolor="purple" cellpadding="0" cellspacing="10" height="0" style="width:650px;height:5px;" width="400"> ＜tbody> ＜tr> ＜td> ＜table background="" bgcolor="#00ff00" border="6" bordercolor="yellow" cellpadding="0" cellspacing="2" width="650"> ＜tbody> ＜tr> ＜td> ＜table background="http://img4.oldkids.cn/upload/2017/09/30/blog_20170930151949848.gif" border="10" bordercolor="#a00000" height="500" width="710"> ＜tbody> ＜tr> ＜td>＜br /> ＜marquee direction="right" height="400" scrollamount="4" scrolldelay="80" style="height: 400px; width: 690px;" width="690">＜img src="http://image109.360doc.com/DownloadImg/2022/08/2509/250879754_1_2022082509270866.png" />＜/marquee>＜/td> ＜/tr> ＜/tbody> ＜/table> ＜/td> ＜/tr> ＜/tbody> ＜/table> ＜/td> ＜/tr> ＜/tbody> ＜/table> ＜/div>

代码解析：代码中的移动标签是＜marquee direction="right" height="400" scrollamount="4" scrolldelay="80" style="height: 400px; width: 650px;" width="650">＜img src="http://image109.360doc.com/DownloadImg/2022/08/2509/250879754_1_2022082509270866.png" />＜/marquee>其中的style="height: 400px; width: 650px;"是图片的规格属性，它是css样式，属性与属值用冒号连接。height="400"和width="650"，它们的属性与属值之间是用等号连接的，而且数字后面没有px ,它们是移动范围属性。要记住它们的特征，可别搞错呀！因为我们常常要调整移动范围。

（十八）图片纵向（向上或向下）移动：

代码：＜div align="center"> ＜table align="center" background="http://img7.ph.126.net/bd6zz97pDq4GzNwYklqLAA==/3396277068991311037.gif" bgcolor="#ff0000" border="15" bordercolor="purple" cellpadding="0" cellspacing="10" width="550"> ＜tbody> ＜tr> ＜td> ＜table background="" bgcolor="#00ff00" border="6" bordercolor="yellow" cellpadding="0" cellspacing="2" width="650"> ＜tbody> ＜tr> ＜td> ＜table align="center" background="http://img2.oldkids.cn/upload/2017/10/04/blog_20171004190531769.gif" border="0" bordercolordark="#27093b" bordercolorlight="#4e1276" cellpadding="0" cellspacing="0" class="ke-zeroborder" height="450" width="700"> ＜tbody> ＜tr> ＜td width="100%">＜/embed> ＜table> ＜tbody> ＜tr> ＜td>＜marquee direction="up" height="450" scrollamount="3" scrolldelay="100" style="height: 450px; width: 670px;" width="670"> ＜p align="center">＜img height="450" src="http://image109.360doc.com/DownloadImg/2022/08/2509/250879754_2_20220825092708316.png" />＜/p> ＜/marquee>＜/td> ＜td width="35%"> ＜/td> ＜/tr> ＜/tbody> ＜/table> ＜/td> ＜/tr> ＜/tbody> ＜/table> ＜/td> ＜/tr> ＜/tbody> ＜/table> ＜/td> ＜/tr> ＜/tbody> ＜/table> ＜/div>

代码解析：代码中的移动标签是＜marquee direction="up" height="450" scrollamount="3" scrolldelay="100" style="height: 450px; width: 670px;" width="670">＜p align="center">＜img height="450" src="http://image109.360doc.com/DownloadImg/2022/08/2509/250879754_2_20220825092708316.png" />＜/p>＜/marquee>其中的style="height: 450px; width: 670px;"是图片的规格属性，它是css样式，属性与属值用冒号连接。height="450"和width="670"，它们的属性与属值之间是用等号连接的，而且数字后面没有px ,它们是移动范围属性。要记住它们的特征，可别搞错呀！因为我们常常要调整移动范围。

（十九）图片斜向（45º角）移动：

代码：＜div align="center">＜tbody> ＜tr> ＜td> ＜table background="" bgcolor="#00ff00" border="6" bordercolor="yellow" cellpadding="0" cellspacing="2" width="650"> ＜tbody> ＜tr> ＜td> ＜table background="http://img2.oldkids.cn/upload/2017/10/04/blog_20171004143206529.gif" border="10" bordercolor="#a00000" width="710"> ＜tbody> ＜tr> ＜td> ＜div align="center">＜marquee>＜marquee direction="down" height="500" scrollamount="6" style="height: 500px;">＜img src="http://image109.360doc.com/DownloadImg/2022/08/2509/250879754_3_20220825092708675.jpg" />＜/marquee> ＜/marquee>＜/div> ＜/td> ＜/tr> ＜/tbody> ＜/table> ＜/td> ＜/tr> ＜/tbody> ＜/table> ＜/td> ＜/tr> ＜/tbody> ＜/table> ＜/div>

代码解析：这里使用的是向下移动的标签，而在此标签前加了一个＜marquee＞，你知道它是干什么的吗？提醒初学代码的朋友，它不含属性代码并不等于没有属性，我们在前面说过，基本的必须有的属性属值，若未设置，就意味着采用默认的。我们知道，默认的移动方向是left,默认的移动速度是6，因为选取了默认，所以免写，你知道了这些，就明白了为什么前面加个＜marquee＞，图片就能斜向移动了。

（二十）图片飘游（上下左右）移动：