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

俊哥的家

分享美丽·品味经典·学会生活·自娱自乐-------我的网上天地...我的资料库

 
 
 

日志

 
 
关于我

原则上不喝酒,基本上不抽烟,一般情况下不怕老婆,但坚决不锻炼身体。最恨背叛和赌博,最爱善良和忠诚。最想建一个个人网页,最怕建网页的编程。最信奉生活的理想就是为了理想的生活。

网易考拉推荐

文字图片特效制作  

2013-05-03 16:09:29|  分类: 建博技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

一.圆形柔化代码

<img src="图片地址.jpg" style="filter:alpha(opacity=100, finishOpacity=0,style=2)">

效果图

请欣赏 文字图片滚动 特效制作 - 喻子義 - 喻子义家园

二.图片雾化

<P align=center><TABLE border=0>
<TBODY>
<TR>
<TD style="FILTER: Alpha(opacity=100,style=2)"
width=420(图片宽度) background=(图片地址) height=296(图片高度)></TD></TR></TOBDY></TBODY></TABLE></P>

效果图

 

三.左右 逐渐显示

  <center><MARQUEE scrollAmount=3 direction=right width=400 height=234><MARQUEE scrollAmount=3 width=280 height=234><DIV align=center><IMG src="图片地址"></DIV></MARQUEE></MARQUEE>

 效果图

请欣赏 文字图片滚动 特效制作 - 喻子義 - 喻子义家园

 四.上下逐渐显示
<MARQUEE scrollAmount=3 direction=up behavior=alternate height=250><MARQUEE scrollAmount=3 direction=up height=234><DIV align=center><IMG src="图片地址"></DIV></MARQUEE></MARQUEE>   
效果图

请欣赏 文字图片滚动 特效制作 - 喻子義 - 喻子义家园

 

 

五.添加背景代码  

<div align=center><TABLE style='BACKGROUND-REPEAT:no-repeat; background-position:center center' background=图片地址  width=265  height=360 ><TBODY><TR><TD style='filter:Glow(strength=12,color=#4A7AC9) ;' align='center' valign='middle'><font style='font-size:9pt;' color=#00ff00>以下内容请自己编辑:这是第1行<br>这是第2行<br>这是第3行<br>这是第4行<br>这是第5行<br>这是第6行<br>这是第7行<br>这是第8行<br><img src=小图片地址></font></TD></TR></TBODY></TABLE></div>

效果图

以下内容请自己编辑:这是第1行
这是第2行
这是第3行
这是第4行
这是第5行
这是第6行
这是第7行
这是第8行
请欣赏 文字图片滚动 特效制作 - 喻子義 - 喻子义家园

 

 

六、制作滚动的图片

首先新建一个模块,然后在模块中复制粘贴入以下代码:

<marquee direction=left scrollamount=4>
<img src="图片地址1" height=150>
</marquee>

图片新窗口链接:

<MARQUEE scrollAmount=2>

<A href=http://blog.sina.com.cn/u/1767073051 target=_blank><IMG height=300 src="图片地址" border=0></A>

</marquee>

注:1,图片地址处替换为你想要展示的图片的地址,即“http://……………….jpg”图片文件地址

2,height代表图片的高度,建议把所有的图片调整为相等的高度。

3,scrollamount代表图片移动的速度,值越大移动越快。如果没有它,默认为6,建议设为1~3比较好。

  4,direction代表移动的方式,等号后面可以为left(自右向左)、right(自左向右)、up(自下向上)、down(自上向下)。

5,color=#000066 代表颜色size=3>代表文字大小

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

(一)、向左移动

向左移动代码:

代码
<marquee><img src="http://img9.ph.126.net/WrN_jzH8-YATuVvHvicFqA==/1320962065720381599.jpg"
<br>从右向左移动</marquee>

 

 示例:

  常用基本博客代码解释 - 鳕鯡鮩鲒 - 鳕鲱鮩鲒的博客
从右向左移动

 

 

(二)、向右移动

向右移动代码:

代码
<marquee direction=right><img src="http://img9.ph.126.net/WrN_jzH8-YATuVvHvicFqA==/1320962065720381599.jpg"
width=90 height=30><br><font color=0000ff size=3 face=宋体><b>从左向右移动</b></font></marquee>


示例 常用基本博客代码解释 - 鳕鯡鮩鲒 - 鳕鲱鮩鲒的博客
从左向右移动

 

 

(三)、向上移动

向上移动代码:

代码
<MARQUEE scrollAmount=2 direction=up>
<CENTER><FONT face=华文行楷 color=#0000ff size=5><B>向上移动</B></FONT><BR><IMG style="WIDTH: 162px; HEIGHT: 180px" height=30 src="http://img9.ph.126.net/WrN_jzH8-YATuVvHvicFqA==/1320962065720381599.jpg"
width=90></CENTER></MARQUEE>


示例
向上移动
常用基本博客代码解释 - 鳕鯡鮩鲒 - 鳕鲱鮩鲒的博客

 

 

 

 

 

 

 (四)、向下移动

向下移动代码:

代码
<marquee direction=down scrollamount=5><center><font color=0000ff size=5 face=华文行楷><b>向下移动</b></font><br><img src="http://img9.ph.126.net/WrN_jzH8-YATuVvHvicFqA==/1320962065720381599.jpg"
width=290 height=430></marquee>


示例
向下移动
常用基本博客代码解释 - 鳕鯡鮩鲒 - 鳕鲱鮩鲒的博客

 

 (五)、来回移动

来回移动代码:

代码
<marquee width=100% behavior=alternate scrollamount=10><img src="http://img9.ph.126.net/WrN_jzH8-YATuVvHvicFqA==/1320962065720381599.jpg"
width=290 height=430><br><font color=0000ff size=5 face=华文行楷><b>来回移动</b></font></marquee>


示例

常用基本博客代码解释 - 鳕鯡鮩鲒 - 鳕鲱鮩鲒的博客
来回移动

 (六)、上下起伏

上下起伏代码:

代码
<MARQUEE>
<MARQUEE direction=up behavior=alternate height=100><IMG id=image_operate_82011292325774312 src="http://img5.ph.126.net/9cGLEjdj9iuxtT_AdfaGNQ==/576460752304386215.gif
"><FONT color=#ed1c24>鳕鲱鮩鲒欢迎你<FONT face=华文行楷 size=3></B></FONT></FONT></MARQUEE></MARQUEE>
<MARQUEE>
<MARQUEE direction=up behavior=alternate height=100><IMG id=image_operate_23571292325990656 src="http://img5.ph.126.net/9cGLEjdj9iuxtT_AdfaGNQ==/576460752304386215.gif
"><FONT color=#22b14c>鳕鲱鮩鲒欢迎你<FONT face=华文行楷 size=3></B></FONT></FONT></MARQUEE></MARQUEE>

 

示例

常用基本博客代码解释 - 鳕鯡鮩鲒 - 鳕鲱鮩鲒的博客鳕鲱鮩鲒欢迎你

常用基本博客代码解释 - 鳕鯡鮩鲒 - 鳕鲱鮩鲒的博客鳕鲱鮩鲒欢迎你

 

注: 各参数详解:

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(幻灯片效果,指的是滚动一次,然后停止滚动)


 

★亲爱的朋友:您随手推荐本博文及点击博文右边或下方【推广信息及图片】的举手之劳,将为本博提供不竭的动力源泉,您也将欣赏到更多更精彩的内容!

【音画盛宴】2011年精美国庆花坛(图片集锦)俊哥的博客(读天下文,交天下友)


  评论这张
 
阅读(170)| 评论(6)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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