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

龙女小曼的三画小屋

漫画、动画、音画。

 
 
 

日志

 
 

图片的移动  

2009-03-21 21:52:45|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

引用

my0081130引用 1. 图片的移动

 


图片移动代码集锦

 

注: 各参数详解:

a)scrollAmount。它表示速度,值越大速度越快。如果没有它,默认为6,建议设为1~3比较好。

b)width和height,表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时候,一定要设height的值。

c)direction。表示滚动的方向,默认为从右向左:←←←。可选的值有right、down、up。滚动方向分别为:right表示→→→,up表示↑,down表示↓。

d)scrollDelay,这也是用来控制速度的,默认为90,值越大,速度越慢。通常scrollDelay是不需要设置的。

e)behavior。用它来控制属性,默认为循环滚动,可选的值有alternate(交替滚动)、slide(幻灯片效果,指的是滚动一次,然后停止滚动)  

                 

 一、向左移动
<marquee><img src=http://img.blog.163.com/photo/6z71GYKIN10ovzjZgivv-A==/2841771364871352261.jpg><br>从右向左移动</marquee>

示例:

引用 1. 图片的移动 - my0081130 - my0081130的博客
从右向左移动

二、向右移动
<marquee direction=right><img src=http://img.blog.163.com/photo/6z71GYKIN10ovzjZgivv-A==/2841771364871352261.jpgwidth=321 height=229><br><font color=0000ff size=3 face=宋体><b>从左向右移动</b></font></marquee>

示例:

引用 1. 图片的移动 - my0081130 - my0081130的博客
从左向右移动

 

三、向上移动
<marquee direction=up scrollamount=5 src=http://img.blog.163.com/photo/6z71GYKIN10ovzjZgivv-A==/2841771364871352261.jpgwidth=321height=229></center></marquee>

示例:

引用 1. 图片的移动 - my0081130 - my0081130的博客

 

四、向下移动
<marquee direction=down scrollamount=5><center><font color=0000ff size=5 face=华文行楷><b>向下移动</b></font><br><img src=http://img.blog.163.com/photo/6z71GYKIN10ovzjZgivv-A==/2841771364871352261.jpg width=321 height=229></marquee>

示例:

向下移动
引用 1. 图片的移动 - my0081130 - my0081130的博客

 

五、来回移动
<marquee width=100% behavior=alternate scrollamount=10><img src=http://img.blog.163.com/photo/6z71GYKIN10ovzjZgivv-A==/2841771364871352261.jpgwidth=321height=229><br><font color=0000ff size=5 face=华文行楷><b>来回移动</b></font></marquee>
示例:

引用 1. 图片的移动 - my0081130 - my0081130的博客
来回移动

 六、上下起伏
<marquee direction=left><marquee behavior=alternate direction=up height=700><img src=http://img.blog.163.com/photo/-91lZ4y9zyvWfEU-6nP--Q==/2881459336587312471.jpg><img src=http://img.blog.163.com/photo/-91lZ4y9zyvWfEU-6nP--Q==/2881459336587312471.jpg><font color=0000ff size=3 face=华文行楷></b></font></marquee></marquee>

示例:

引用 1. 图片的移动 - my0081130 - my0081130的博客引用 1. 图片的移动 - my0081130 - my0081130的博客

 

七、中间向两边移动:

<center><br><marquee width=220 height=50><img src=http://img.blog.163.com/photo/6z71GYKIN10ovzjZgivv-A==/2841771364871352261.jpg width=321height=229><font face=华文彩云 color=#0000ff size=5><br>中间向两边移动</font></marquee><marquee direction=right width=220 height=50><img src= http://img.blog.163.com/photo/6z71GYKIN10ovzjZgivv-A==/2841771364871352261.jpg width=321 height=229><font face=华文彩云 color=#0000ff size=5><br>中间向两边移动<br></marquee></font></center>

示例:


引用 1. 图片的移动 - my0081130 - my0081130的博客
中间向两边移动
引用 1. 图片的移动 - my0081130 - my0081130的博客
中间向两边移动

 八、中间相对上下移动:

代码:

<marquee direction=up onmouseover=this.stop() scrollamount=3 onmouseout=this.start><center><img src=http://img.blog.163.com/photo/6z71GYKIN10ovzjZgivv-A==/2841771364871352261.jpg  width=321></marquee></center><marquee direction=down scrollamount=3><center><div style="width:500;filter:flipv;"><img src="http://img.blog.163.com/photo/6z71GYKIN10ovzjZgivv-A==/2841771364871352261.jpg  " width=321></div></center></marquee>

示例:

引用 1. 图片的移动 - my0081130 - my0081130的博客
引用 1. 图片的移动 - my0081130 - my0081130的博客

 

九.1)贴图:<img src="图片地址">     插入图片的几种方法 代码1<img src="图片地址" width=330 height=250 tyle=filter:Alpha(opacity=100,style=2)>   代码2<IMG src="图片地址" style="FILTER: gray(color=#ffedff)"> 代码3<IMG style="FILTER: xray(color=#ffedff)" src="图片地址">?p><IMG style="FILTER: flipv(color=#ffedff)" src="图片地址">

.缩小图片的代码:

<a href="http://img.blog.163.com/photo/6z71GYKIN10ovzjZgivv-A==/2841771364871352261.jpg  "target="_blank"><img src="http://img.blog.163.com/photo/6z71GYKIN10ovzjZgivv-A==/2841771364871352261.jpg  " width="50" height="50">点击放大</a> 

引用 1. 图片的移动 - my0081130 - my0081130的博客点击放大

十一.多图片左移、右移

 多图片左移

<MARQUEE width=524 height=350><IMG src="http://img.blog.163.com/photo/6z71GYKIN10ovzjZgivv-A==/2841771364871352261.jpg "><IMG src="

http://img.blog.163.com/photo/6z71GYKIN10ovzjZgivv-A==/2841771364871352261.jpg "><IMG src="

http://img.blog.163.com/photo/6z71GYKIN10ovzjZgivv-A==/2841771364871352261.jpg "></MARQUEE>

 

引用 1. 图片的移动 - my0081130 - my0081130的博客引用 1. 图片的移动 - my0081130 - my0081130的博客引用 1. 图片的移动 - my0081130 - my0081130的博客

 

多图片右移

<MARQUEE direction=right width=524 height=350><IMG src="http://img.blog.163.com/photo/6z71GYKIN10ovzjZgivv-A==/2841771364871352261.jpg "><IMG src=" http://img.blog.163.com/photo/6z71GYKIN10ovzjZgivv-A==/2841771364871352261.jpg "></MARQUEE>

 

引用 1. 图片的移动 - my0081130 - my0081130的博客引用 1. 图片的移动 - my0081130 - my0081130的博客

 

十二:图片走走停停的从右向左移动

<MARQUEE scrollAmount=3 behavior=alternate width=100%><MARQUEE scrollAmount=3 width=96%> <IMG src="http://img.blog.163.com/photo/6z71GYKIN10ovzjZgivv-A==/2841771364871352261.jpg"> </MARQUEE></MARQUEE>

 

引用 1. 图片的移动 - my0081130 - my0081130的博客

 

十三:图片连接:

<A href="连接网页地址"><IMG height=92 src="图片URL地址" width=130 border=0></A>

 

  评论这张
 
阅读(270)| 评论(7)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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