注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

黑玫瑰博客

开放思维磨练一双慧眼,把这世界看远看透再看淡

 
 
 

日志

 
 
关于我

看不清的城市,迷离的心路,到哪里找一个安逸的角落,容得下我的倦意,我有不屈的斗志,却没有称心的器械.我有高尚的灵魂,却不能平伏我欲望的漫延

网易考拉推荐

代码学习6  

2013-05-25 14:02:37|  分类: 代码学习 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

 

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

 

        本节继续学习图片的移动。下面讲解图片的五种移动代码。这五种移动图片代码,都可以制作成小模块使用。要深刻领会代码中的内容,学会应用这些移动图片代码。

        一、相背而行的图片代码:
        代码1:(上下相背)
<marquee direction="up" height="100" width="650">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
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://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
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://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
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://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
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://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
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://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
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://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
</marquee>
<marquee height="100" width="300">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100">
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
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://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee>
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
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://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee>
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="
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://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee>
        代码解析:
      (1)左右摇摆的图片,相邻的两个图片,一个要用移动标签控制,另一个不用移动标签控制。
      (2)左右摇摆的图片,图片规格不宜太大,一般以100px左右为宜。
      (3)移动标签中要设置移动屏幕的宽度与高度,要设置来回走的移动方式。
        作业:
      (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://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://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://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://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg" width="250" height="250"></marquee></marquee>
        代码解析:
      (1)从“右上到左下”的移动图片代码,由移动方向“向下”和“向左”的两个移动标签控制一个图片。两个移动标签中都设置了移动屏幕的宽度和高度;图片标签中应用了css的滤镜样式,设置了图片的宽度与高度。
      (2)两个移动标签中的“移动方向”可以互换,移动速度可以设置也可以不设置,移动屏幕的规格,必须设置。
      (3)图片的规格,不宜过大,以100px至250px为宜。
        作业:
        1、认真阅读代码分析,掌握代码设置要点。
        2、上面讲解的图片的四种移动代码,都是用两个移动标签控制一个图片。代码中图片规格与移动屏幕规格的设置非常重要,如果设置不好,就会出现“图片的某个部分”在移动屏幕中移动的现象。试着改变一下图片规格与移动屏幕规格,看看显示效果,揣摩其中的奥秘。
        3、用上面的四种移动标签,各自发表一篇文章。可以替换图片地址,可以修改移动速度,修改移动屏幕的高度与宽度。图片的宽度与高度,最好与第二个移动标签屏幕的宽度和高度相同;一定要小于第一个移动标签的宽度和高度。

 


  评论这张
 
阅读(218)| 评论(3)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017