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

日照腾飞的博客

http://blog.163.com/a007xu/edit/

 
 
 

日志

 
 

图片雾化效果代码  

2010-03-08 10:03:05|  分类: 音画制作教程 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

腾飞的日志边框  - a007xu - 腾飞向您问好! 日志分隔线 - 腾飞 - 腾飞的博客 日志分隔线 - 腾飞 - 腾飞的博客 日志分隔线 - 腾飞 - 腾飞的博客 日志分隔线 - 腾飞 - 腾飞的博客 日志分隔线 - 腾飞 - 腾飞的博客 日志分隔线 - 腾飞 - 腾飞的博客腾飞的日志边框  - a007xu - 腾飞向您问好!

  图片雾化效果代码

腾飞的博客 -       腾飞引制

 日志分隔线 - 腾飞 - 腾飞的博客


一、 图片雾化椭圆效果代码:

 <TABLE border=0><TBODY><TR><TD style="FILTER: Alpha(opacity=100,style=2)" background=图片地址 height=80

width=180 ></TD></TR></TOBDY></TBODY></TABLE>

说 明:

 "alpha"设置图片或文字的不透明度。支持参数:opacity、finishOpacity、style、

startX、startY、finishX、finishY、add、direction、strength;"Opacity"起始值,

取值为0~100, 0为透明,100为原图;"Style"1或2或3;"height=80 width=180"

椭圆窗口大小。

 

二、 图片雾化矩形效果代码:

 <TABLE border=0><TBODY><TR><TD style="FILTER: Alpha(opacity=100,style=3)" background=图片地址

height=80 width=180></TD></TR></TOBDY></TBODY></TABLE>

说 明:

 "alpha"设置图片或文字的不透明度。支持参数:opacity、finishOpacity、style、startX、startY、

finishX、finishY、add、direction、strength;"Opacity"起始值,取值为0~100, 0为透明,

100为原图;"Style"1或2或3;"height=80 width=180"是矩形窗口大小。

三、 图片右侧雾化效果代码:

 <TABLE border=0>

<TBODY>

<TR>

<TD style="FILTER: Alpha(opacity=100,style=1)" width=180 background=图片地址 height=60></TD></TR></TOBDY></TBODY></TABLE>

说 明:

 "alpha"设置图片或文字的不透明度。支持参数:opacity、finishOpacity、style、startX、

startY、finishX、finishY、add、direction、strength;"Opacity"起始值,取值为0~100,

0为透明,

100为原图;"Style"1或2或3;"height=60 width=180"椭圆窗口大小。

四、 图片中间雾化效果代码:

 <TABLE border=0><TBODY><TR><TD style="filter:Alpha(Opacity=0,

FinishOpacity=75,Style=2) " background=图片地址 height=80 width=180></TD></TR></TOBDY></TBODY></TABLE>

说 明:

 "alpha"功能是设置图片或文字的不透明度,支持参数:opacity、

finishOpacity、style、startX、startY、finishX、finishY、add、

direction、strength。"Opacity"起始值,取值为0~100,

0为透明,100为原图。"FinishOpacity"目标值。"Style"值取1或2或3。

图片并列效果代码:

 <img src="图片地址" width=70 >

<img src="图片地址" width=70 >

说 明:

 "width=70"是图片的显示宽度,原图显示可以不用此代码。

图片飘浮效果代码:

 

<div id="ad" style="position:absolute">

<a href=您的博客地址 target="_blank">

<img src="图片地址"border="0">

</a></div>

<script>

var x = 50,y = 60

var xin = true, yin = true

var step = 1

var delay = 10

var obj=document.getElementById("ad")

function floatAD() {

var L=T=0

var R= document.body.clientWidth-obj.offsetWidth

var B = document.body.clientHeight-obj.offsetHeight

obj.style.left = x + document.body.scrollLeft

obj.style.top = y + document.body.scrollTop

x = x + step*(xin?1:-1)

if (x < L) { xin = true; x = L}

if (x > R){ xin = false; x = R}

y = y + step*(yin?1:-1)

if (y < T) { yin = true; y = T }

if (y > B) { yin = false; y = B }

}

var itl= setInterval("floatAD()", delay)

obj.onmouseover=function(){clearInterval(itl)}

obj.onmouseout=function(){itl=setInterval("floatAD()", delay)}

</script> 

说 明:

 

把上面的代码放在需要放置广告的页面HTML代码的<body></body>之间。换成是漂浮图片点击后出现的页面,也就是点击后出现的详细的介绍页面。换成是漂浮广告图片的URL地址,最好采用绝对路径。var x = 50,y = 60 //浮动层的初始位置,分别对应层的初始X坐标和Y坐标。

var xin = true, yin = true //判断层的X坐标和Y坐标是否在在控制范围之内,xin为真是层向右移动,否则向左;yin为真是层向下移动,否则向上。var step = 1 //层移动的步长,值越大移动速度越快。var delay = 10 //层移动的时间间隔,单位为毫秒,值越小移动速度越快。

 日志分隔线 - 腾飞 - 腾飞的博客 日志分隔线 - 腾飞 - 腾飞的博客 日志分隔线 - 腾飞 - 腾飞的博客 日志分隔线 - 腾飞 - 腾飞的博客 日志分隔线 - 腾飞 - 腾飞的博客 日志分隔线 - 腾飞 - 腾飞的博客 日志分隔线 - 腾飞 - 腾飞的博客

点击欣赏如下内容:

 点击进入中国戏曲

 点击进入相声小品

 点击进入杂技魔术

 点击进入音画欣赏

 点击进入音乐视听

 点击进入影视歌曲

 点击进入娱乐搞笑

 点击进入动画集锦

 点击进入趣图欣赏

 点击进入博客制作

  评论这张
 
阅读(1035)| 评论(1)
推荐 转载

历史上的今天

评论

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

页脚

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