卡尼尔美业(武汉)科技有限公司-代码入门教程(13)
你的位置:卡尼尔美业(武汉)科技有限公司 > 资质荣誉 > 代码入门教程(13)
代码入门教程(13)
发布日期:2022-08-17 01:29    点击次数:125

图片

第  二  章   标  签  应  用第十一节 移动图片(3)

图片

 本节继续学习图片的移动。下面讲解图片的五种移动代码。这五种移动图片代码,都可以制作成小模块使用。要深刻领会代码中的内容,学会应用这些移动图片代码。一、相背而行的图片代码:代码1:(上下相背)<marquee direction="up" height="100" width="650"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee><marquee direction="down" height="100" width="650"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee>代码解析:1、“上下相背而行”的图片代码,由“向上”和“向下”移动的两个移动标签分别控制六个小图片,移动标签中都设置了移动屏幕的高度和宽度。2、各个移动标签中小图片的总宽度,一般不能超过670px,如果超过了670px,小图片就不在同一行显示了。3、去掉上面移动标签中的“移动屏幕高度和宽度”,看看又是什么效果?想想为什么?(答案:移动屏幕的高度和宽度,是系统默认的高度和宽度了。宽度没有多大的变化,高度变大了。)代码2:(左右相背)<marquee height="100" width="300"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee><marquee direction="right" height="100" width="300"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee>代码解析:1、“左右相背而行”的图片代码,由“向左”和“向右”移动的两个移动标签分别控制六个小图片,移动标签中都设置了移动屏幕的高度和宽度。2、“左右相背而行”的图片代码,必须设置移动屏幕的高度和宽度。各个移动标签中小图片的总宽度,一般不能超过335px,如果超过了335px,小图片就不在同一行显示了。3、“左右相背而行”的图片代码,两个移动标签的位置不可调换。4、去掉上面移动标签中的“移动屏幕高度和宽度”,看看又是什么效果?想想为什么?(答案:移动屏幕的高度和宽度,是系统默认的高度和宽度了。宽度没有多大的变化,高度变为200px了。向左移动的小图片和向右移动的小图片分为两行显示了。)

图片

二、相对而行的图片代码:代码1:(上下相对而行)<marquee direction="down" height="100" width="650"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee><marquee direction="up" height="100" width="650"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee>代码解析:(1)“上下相对而行的图片代码”由“向下”和“向上”移动的两个移动标签分别控制六个小图片,移动标签中都设置了移动屏幕的高度和宽度。(2)各个移动标签中小图片的总宽度,一般不能超过670px,如果超过了670px,小图片就不在同一行显示了。        ( 3)去掉上面移动标签中的“移动屏幕高度和宽度”,看看又是什么效果?想想为什么?(答案:移动屏幕的高度和宽度,是系统默认的高度和宽度了。宽度没有多大的变化,高度变大了。)代码2:(左右相对而行)<marquee direction="right" height="100" width="300"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee><marquee height="100" width="300"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee>代码解析:         (1)“左右相对而行”的图片代码,由“向右”和“向左”移动的两个移动标签分别控制六个小图片,移动标签中都设置了移动屏幕的高度和宽度。(2)“左右相对而行”的图片代码,必须设置移动屏幕的高度和宽度。各个移动标签中小图片的总宽度,一般不能超过335px,如果超过了335px,小图片就不在同一行显示了。(3) “左右相对而行”的图片代码, 余姚地图两个移动标签的位置不可调换。(4)去掉上面移动标签中的“移动屏幕高度和宽度”,看看又是什么效果?想想为什么?(答案:移动屏幕的高度和宽度,是系统默认的高度和宽度了。宽度没有多大的变化,高度变为200px了。向左移动的小图片和向右移动的小图片分为两行显示了。)三、左右摇摆的图片代码:<marquee height="90" behavior="alternate" width="170"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_10.jpg" height="90"><marquee height="90" behavior="alternate" width="170"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_10.jpg" height="90"><marquee height="90" behavior="alternate" width="170"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee>代码解析:(1)左右摇摆的图片,相邻的两个图片,一个要用移动标签控制,另一个不用移动标签控制。(2)左右摇摆的图片,图片规格不宜太大,一般以100px左右为宜。(3)移动标签中要设置移动屏幕的宽度与高度,要设置来回走的移动方式。作业:(1)认真阅读代码解析,理解上面讲解的各种移动图片代码设置要点。(2)用上面讲解的五种移动图片代码,各制作一篇文章并观察其效果。

图片

图片

图片

2012年 1 1月 2 日于北京

图片

图片

图片

图片

图片

图片

第  二  章   标  签  应  用第十二节   移动图片(4)

图片

本节继续学习图片的移动。下面讲解图片的四种移动代码,这四种移动代码一般都是使用一个图片,不使用多个图片。1、从左下到右上移动的图片代码:<marquee bgColor="#6495ed" direction="up" height="480" width="480" scrollAmount="5"><marquee direction="right" height="250" width="100%" scrollAmount="5"><img style="filter: alpha(opacity=100,style=2);" src="http://www.360doc.cn/article/http://image48.360doc.com/DownloadImg/2012/01/1219/20707724_7" width="250" height="250"></marquee></marquee>代码解析:(1)从“左下到右上”移动的图片代码,由移动方向“向上”和“向右”的两个移动标签控制一个图片。两个移动标签中都设置了移动屏幕的宽度和高度;图片标签中应用了css的滤镜样式,资质荣誉设置了图片的宽度与高度。(2)两个移动标签中的“移动方向”可以互换,移动速度可以设置也可以不设置,移动屏幕的规格,必须设置。(3)图片的规格,不宜过大,以100px至250px为宜。(4)图片标签代码注释:<图片标签 css样式=“滤镜:设置透明度(透明度=100,样式=2)”>。透明度默认的范围是从0 到 100,他们其实是百分比的形式,1到0之间的任何值都表示该元素的透明程度。也就是说,0代表完全透明,100代表完全不透明。2、从右下到左上移动的图片代码:<marquee bgColor="#6495ed" direction="up" height="480" width="480" scrollAmount="5"><marquee height="250" width="100%" scrollAmount="5"><img style="filter: alpha(opacity=100,style=2);" src="http://www.360doc.cn/article/http://image48.360doc.com/DownloadImg/2012/01/1219/20707724_7" width="250" height="250"></marquee></marquee>代码解析:(1)从“右下到左上”的移动图片代码,由移动方向“向上”和“向左”的两个移动标签控制一个图片。两个移动标签中都设置了移动屏幕的宽度和高度;图片标签中应用了css的滤镜样式,设置了图片的宽度与高度。(2)两个移动标签中的“移动方向”可以互换,移动速度可以设置也可以不设置,移动屏幕的规格,必须设置。(3)图片的规格,不宜过大,以100px至250px为宜。(4)图片标签代码注释:<图片标签 css样式=“滤镜:设置透明度(透明度=100,样式=2)”>。透明度默认的范围是从0 到 100,他们其实是百分比的形式,1到0之间的任何值都表示该元素的透明程度。也就是说,0代表完全透明,100代表完全不透明。

图片

图片

图片

图片

3、从左上到右下移动的图片代码:<marquee direction="down" height="480" width="480" scrollAmount="5"><marquee direction="right" height="250" width="100%" scrollAmount="5"><img src="http://www.360doc.cn/article/http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg" width="250" height="250"></marquee></marquee>代码解析:(1)从“左上到右下”的移动图片代码,由移动方向“向下”和“向右”的两个移动标签控制一个图片。两个移动标签中都设置了移动屏幕的宽度和高度;图片标签中应用了css的滤镜样式,设置了图片的宽度与高度。(2)两个移动标签中的“移动方向”可以互换,移动速度可以设置也可以不设置,移动屏幕的规格,必须设置。(3)图片的规格,不宜过大,以100px至250px为宜。4、从右上到左下移动的图片代码:<marquee bgColor="#6495ed" direction="down" height="480" width="480" scrollAmount="5"><marquee height="250" width="100%" scrollAmount="5"><img style="filter: alpha(opacity=100,style=2);" src="http://www.360doc.cn/article/http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg" width="250" height="250"></marquee></marquee>代码解析:       (1)从“右上到左下”的移动图片代码,由移动方向“向下”和“向左”的两个移动标签控制一个图片。两个移动标签中都设置了移动屏幕的宽度和高度;图片标签中应用了css的滤镜样式,设置了图片的宽度与高度。(2)两个移动标签中的“移动方向”可以互换,移动速度可以设置也可以不设置,移动屏幕的规格,必须设置。(3)图片的规格,不宜过大,以100px至250px为宜。作业:1、认真阅读代码分析,掌握代码设置要点。2、上面讲解的图片的四种移动代码,都是用两个移动标签控制一个图片。代码中图片规格与移动屏幕规格的设置非常重要,如果设置不好,就会出现“图片的某个部分”在移动屏幕中移动的现象。试着改变一下图片规格与移动屏幕规格,看看显示效果,揣摩其中的奥秘。3、用上面的四种移动标签,各自发表一篇文章。可以替换图片地址,可以修改移动速度,修改移动屏幕的高度与宽度。图片的宽度与高度,最好与第二个移动标签屏幕的宽度和高度相同;一定要小于第一个移动标签的宽度和高度。代码入门教程(1)代码入门教程(2)代码入门教程(3)代码入门教程(4)代码入门教程(5)代码入门教程(6)代码入门教程(7)代码入门教程(8)代码入门教程(9)代码入门教程(10)代码入门教程(11)代码入门教程(12)

图片

2012年 1 1月2 日于北京

相关资讯