蓝梦的博客

吸取知识传播知识让知识充实生活的每一天

日志

关于我

蓝梦

自幼与贫穷为伴,六岁开始学习针线,十岁已经承担家务大半。好不容易进了学校大门,盼到小学毕业。由于生活所迫,只好忍痛离校。又被上山下乡运动抛上了戈壁沙滩。十五年间饱偿了人间疾苦,磨灭理想,透支了健康,也燃尽了青春热能。只有学习的欲望还时隐时现。随着返城大潮,我又回到了故乡,知识的贫乏、生活的重压、疾病的纠缠、琐事的烦恼。重新起步,谈何容易。现在孩子虽已长大,但我依然难以摆脱困境。可喜偏瘫了两年的我,又能行动自如了,我要把有限的时间溶入这网络的大家庭。

文章分类

引用网易博客代码(四)(图片类)

2009-01-12 16:37:23| 分类：代码 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

引用

谜的网易博客代码(四)(图片类)

一、插入背景图片

<TABLE align=center background="背景图" border=0 cellPadding=0 cellSpacing=0 borderColor=#ffff00 width="100%"><TBODY><TR><TD>
内容，文字或图片.....
</TD></TR></TBODY></TABLE>

<TABLE> 的参数设定（常用）：

<table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#CF0000" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">

注解：

width="400"
表格宽度，接受绝对值（如 80）及相对值（如 80%）。
border="1"
表格边框的厚度，不同浏览器有不同的内定值，故请指明。
cellspacing="2"
表格格线的厚度
align="CENTER"
表格的摆放位置（水平），可选值为： left, right, center
valign="TOP".
表格里内容的对齐方式（垂直），可选值为： top, middle, bottom。
background="myweb.gif"
表格的背景图片，与 bgcolor 不要同用。
bgcolor="#0000FF"
表格的底色，与 background 不要同用
bordercolor="#CF0000"
表格边框颜色
bordercolorlight="#00FF00"
表格边框向光部分的颜色
bordercolordark="#00FFFF"
表格边框背光部分的颜色，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。
cols="2"
表格栏位数目，只是让浏览器在下载表格时先画出整个表格而已。

二、在网站上放图片:

<img src="地址"; width="480" height="360">

图片居中代码：

<DIV align=center>代码</DIV>

说明：

将其中的center换为left或者right即为居左或居右

三、图片链接移动代码:

例1：

<marquee scrollamount="1" scrolldelay="60" direction="up" width="200" height="230"><div align="center"><a href="第一个连接网址" target="_blank"><img src="第一张图片地址" width="200" border="0" /></a></div><div align="center"><a href=第二个连接网址 target="_blank"><img src="第二张图片地址" width="200" border="0" /></a></div></marquee>

例2：

<marquee direction=left width=宽度>
<img src="你的图片地址">
<img src="你的图片地址">
<img src="你的图片地址">
<img src="你的图片地址">
</marquee>

例3：

<marquee width=100% behavior=alternate><img src="你的图片"></marquee>

说明：

以次类推，可以加很多张图片，注意要加在最后一个</marquee>前面，就不会丢失移动效果。

四、图片的滤镜效果

1.透明效果:(两种都可) 引用网易博客代码(四)(图片类) - 蓝梦 - 蓝梦的博客

注解：

涉及到的属性:修改数值对应即可
opacity:开始处的透明度
finishOpacity:结束处的透明度
style:0,平均透明 1,线状透明 2,圆形透明 3,菱形透明

2.翻转效果:

(1)左右翻转格式: 引用网易博客代码(四)(图片类) - 蓝梦 - 蓝梦的博客

(2)上下翻转格式: 引用网易博客代码(四)(图片类) - 蓝梦 - 蓝梦的博客

3.变调效果
(1)灰调格式: 引用网易博客代码(四)(图片类) - 蓝梦 - 蓝梦的博客

(2)X光效果: 引用网易博客代码(四)(图片类) - 蓝梦 - 蓝梦的博客

(3)色彩对换: 引用网易博客代码(四)(图片类) - 蓝梦 - 蓝梦的博客

4.边框效果:

(1)发光边框：

说明：

(color为发光颜色代码,strength是发光强度,滤镜宽=图宽+发光强度x2，滤镜高=图高+发光强度x2+10)

(2)投影边框:

说明：

(color为发光颜色代码,direction方向(只能是45度的倍数如:45,90,135,180,225,270,315度),滤镜宽=图宽+25)
濾鏡高=图高40)

(3)阴影边框:

说明：

(color为发光颜色代码,offX水平位移offY垂直位移(可正可负),滤镜宽=图宽+水平位移绝对值+10,滤镜高=图高+垂直位移绝对值+20)

(4)模糊:

说明：

(direction方向(只能是45度的倍数如:45,90,135,180,225,270,315度),滤镜宽=图宽+15,濾鏡高=图高+30)

(5)波形:

说明：

(freq频率(>0)strength振幅强度(>0)lightstrength波峰强度(0~100愈高越黑)phase起始相位(0~100),滤镜宽=图宽+振幅强度x2，滤镜高=图高+振幅强度x2+10)

五、CSS滤镜实现图片特效（模糊倒影+雾化+多层FLASH特效+百叶窗）

1.图片静态倒影代码

引用网易博客代码(四)(图片类) - 蓝梦 - 蓝梦的博客

说明：

修改其中的图片地址和高度宽度即可。

2.给图片加多层FLASH特效代码

说明：

修改代码中的汉字为自己想要的。

3.图片雾化效果

< TD>

4.图片百叶窗特效

说明：

修改代码中的汉字为自己想要的。调整scrollDelay=100 可以调整滑动速度

评论这张

转发至微博

阅读(260)| 评论(4)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_085068087082084069086083081095085086080071085081087074080',
              blogTitle:'引用 网易博客代码(四)(图片类)',
              blogAbstract:'<P\><EM\>引用</EM\></P\>  <BLOCKQUOTE\><A target=\"_blank\" href=\"http://pepshop.blog.163.com/\" \>谜</A\> 的 <A target=\"_blank\" href=\"http://pepshop.blog.163.com/blog/static/410663720069260847964\" \>网易博客代码(四)(图片类)</A\><BR\>  <P\><A target=\"_blank\" rel=\"nofollow\" href=\"http://u.9way.cn/uport/uSgA2113HngToJFTHO4wp\" \><IMG title=\"引用 网易博客代码(四)(图片类) - 蓝梦 - 蓝梦的博客\"  alt=\"引用 网易博客代码(四)(图片类) - 蓝梦 - 蓝梦的博客\"  height=\"50\" src=\"http://u.9way.cn/admin/total/SgA2113HngToJFTHO4wp\"  width=\"468\" border=\"0\" \></A\><BR\><BR\><A target=\"_blank\" rel=\"nofollow\" href=\"http://www.alimama.com/membersvc/rd.do?w=p_10132908&p=&f=http://www.alimama.com/membersvc/promotion/tjyj.htm\" \><IMG title=\"引用 网易博客代码(四)(图片类) - 蓝梦 - 蓝梦的博客\"  alt=\"引用 网易博客代码(四)(图片类) - 蓝梦 - 蓝梦的博客\"  src=\"http://img.alimama.cn/images/adzone/banner_tjyj_468x60.gif\"  border=\"0\" \></A\></P\>  <P\> </P\>  <P align=\"left\" \></P\></BLOCKQUOTE\>',
              blogTag:'it,技巧,技术,教程,设计,网易博客,学习,资料',
              blogUrl:'blog/static/101417194200901243723887',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1317413186691,
              publishTime:1231749443887,
              permalink:'blog/static/101417194200901243723887',
              commentCount:4,
              mainCommentCount:3,
              recommendCount:1,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'自幼与贫穷为伴,六岁开始学习针线,十岁已经承担家务大半。好不容易进了学校大门,盼到小学毕业。由于生活所迫,只好忍痛离校。又被上山下乡运动抛上了戈壁沙滩。十五年间饱偿了人间疾苦,磨灭理想,透支了健康,也燃尽了青春热能。只有学习的欲望还时隐时现。\r\n    随着返城大潮,我又回到了故乡,知识的贫乏、生活的重压、疾病的纠缠、琐事的烦恼。重新起步,谈何容易。\r\n    现在孩子虽已长大,但我依然难以摆脱困境。\r\n    可喜偏瘫了两年的我,又能行动自如了,我要把有限的时间溶入这网络的大家庭。',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/101417194200901243723887">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

蓝梦的博客

导航

日志

引用网易博客代码(四)(图片类)

历史上的今天

最近读者

热度

评论

页脚

蓝梦的博客

导航

日志

引用 网易博客代码(四)(图片类)

历史上的今天

最近读者

热度

评论

页脚

引用网易博客代码(四)(图片类)