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

乱世狂刀

剑指九天扬正气,拳立华夏显武威

 
 
 

日志

 
 

装扮博客特效——图片移动  

2006-12-10 20:01:58|  分类: 博客攻略 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

一 图片在叶面浮动代码
<div style=";">
<a href="
www.255000.com/" target="_blank">
<img src="/img/logo.gif" border="0"></a>
</div>

<SCRIPT LANGUAGE="JavaScript">
<!--
var xPos = 20;
var yPos = document.body.clientHeight;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img.style.top = yPos;
function changePos() {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.left = xPos + document.body.scrollLeft;
img.style.top = yPos + document.body.scrollTop;
if (yon) {
yPos = yPos + step;
}
else {
yPos = yPos - step;
}
if (yPos < 0) {
yon = 1;
yPos = 0;
}
if (yPos >= (height - Hoffset)) {
yon = 0;
yPos = (height - Hoffset);
}
if (xon) {
xPos = xPos + step;
}
else {
xPos = xPos - step;
}
if (xPos < 0) {
xon = 1;
xPos = 0;
}
if (xPos >= (width - Woffset)) {
xon = 0;
xPos = (width - Woffset);
}
}
function www_helpor_net() {
img.visibility = "visible";
interval = setInterval('changePos()', delay);
}
www_helpor_net();
//For more,visit:
www.helpor.net
-->
</script>

二 几种简单的图片文字滚动代码

<marquee
<marquee direction=up scrollamount=3 >
文字向上滚。</marquee>
<marquee direction=down scrollamount=3 >
文字下向滚。</marquee>
图片、文字左右移动-代码如下


<marquee width=100% behavior=alternate><img src="http://www.yf13.com/img/logo.gif"></marquee>


<marquee direction="left" scrolldelay="60"> 文字部分</marquee>

IE默认值为60(单位:毫秒)
取值越大,移动越慢(小于60,IE仍默认为60)。

  三 图片滚动代码

<marquee direction=left>
<img src="
http://www.yf13.com/img/logo.gif">
<img src="
http://www.yf13.com/img/logo.gif">
<img src="
http://www.yf13.com/img/logo.gif">
<img src="
http://www.yf13.com/img/logo.gif">
<img src="
http://www.yf13.com/img/logo.gif">
<img src="
http://www.yf13.com/img/logo.gif">
<img src="
http://www.yf13.com/img/logo.gif">
<img src="
http://www.yf13.com/img/logo.gif">
<img src="
http://www.yf13.com/img/logo.gif">
<img src="
http://www.yf13.com/img/logo.gif">
</marquee>
</font>
</table>

四 加入背景音乐代码

<EMBED src=http://www.flamesky.org/raynal-onwer/asoka%20theme..wma.wma hidden=true type=audio/x-ms-wma LOOP="TRUE" AUTOSTART="TRUE"></EMBED>
所用元素:<EMBED></EMBED>
参数:
src:音乐文件的URL;
hidden:=true为不可见,=false反之;
type:指定音频类型;
LOOP:是否循环播放,注意其值置于小角双引号中;
AUTOSTART:是否自动播放,其值同上。

1. rm,ra,ram类型的背景音乐代码:

<embed width="0" height="0" type="audio/x-pn-realaudio-plugin" autostart="true" controls="ControlPanel" src="背景音乐地址">

2. midi,asf,wma,asx类型的背景音乐代码:

<embed autostart="true" loop="-1" controls="ControlPanel" width="0" height="0" src="背景音乐地址">

五 上下移动图片

<center><marquee scrollamount=3 scrolldelay=150 direction=up width=450 height=500 bordercolor="#000000" border="1">
<p align=center><img src="
http://www.yf13.com/img/logo.gif"></p>
</marquee></center>

六 双排彩色跳动文字

<marquee scrollamount=8 direction=right behavior=alternate><b><font color=#7700bb size=5><font color=lime>
<marquee direction=up behavior=alternate width=40 height=200 align="middle">祝</marquee><font color=red>
<marquee direction=up behavior=alternate width=40 height=150>愿</marquee><font color=orange>
<marquee direction=up behavior=alternate width=40 height=200>朋</marquee><font color=fuchsia>
<marquee direction=up behavior=alternate width=40 height=150>友</marquee><font color=olive>
<marquee direction=up behavior=alternate width=40 height=200>们</marquee><font color=green>
<marquee direction=up behavior=alternate width=40 height=150>开</marquee><font color=red>
<marquee direction=up behavior=alternate width=40 height=200>心</marquee><font color=orange>
<marquee direction=up behavior=alternate width=40 height=150>!</marquee><font color=orange></font></b></marquee>

②彩色跳动文字

<center><font face=隶书 color=red size=15>
<marquee direction=up behavior=alternate width=60 height=120>祝</marquee><font color=yellow>
<marquee direction=up behavior=alternate width=60 height=80>愿</marquee><font color=brown>
<marquee direction=up behavior=alternate width=60 height=120>朋</marquee><font color=green>
<marquee direction=up behavior=alternate width=60 height=80>友</marquee><font color=orange>
<marquee direction=up behavior=alternate width=60 height=120>们</marquee><font color=yellow>
<marquee direction=up behavior=alternate width=60 height=80>开</marquee><font color=orange>
<marquee direction=up behavior=alternate width=60 height=120>心</marquee></font></b></marquee></font></center></font></font></font></font></font></font>

七 图片左右移动的代码

<script LANGUAGE="JavaScript"><!--
step = 0;
obj = new Image();
function anim(xp,xk,smer)
{
obj.style.left = x;
x += step*smer;
if (x>=(xk+xp)/2) {
if (smer == 1) step--;
else step++;
}
else {
if (smer == 1) step++;
else step--;
}
if (x >= xk) {
x = xk;
smer = -1;
}
if (x <= xp) {
x = xp;
smer = 1;
}

setTimeout('anim('+xp+','+xk+','+smer+')', 50);
}
function moveLR(objID,movingarea_width,c)
{
if (navigator.appName=="Netscape") window_width = window.innerWidth;
else window_width = document.body.offsetWidth;
obj = document.images[objID];
image_width = obj.width;
x1 = obj.style.left;
x = Number(x1.substring(0,x1.length-2));   // 30px -> 30
if (c == 0) {
if (movingarea_width == 0) {
right_margin = window_width - image_width;
anim(x,right_margin,1);
}
else {
right_margin = x + movingarea_width - image_width;
if (movingarea_width < x + image_width) window.alert("No space for moving!");
else anim(x,right_margin,1);
}
}
else {
if (movingarea_width == 0) right_margin = window_width - image_width;
else {
x = Math.round((window_width-movingarea_width)/2);
right_margin = Math.round((window_width+movingarea_width)/2)-image_width;
}
anim(x,right_margin,1);
}
}
//--></script>
<img src="
http://www.yf13.com/img/logo.gif"
name="picture"
style="; top: 70px; left: 30px;" BORDER="0">
<script LANGUAGE="JavaScript"><!--
setTimeout("moveLR('picture',300,1)",10);
//--></script>

八 文字从背景中飞出来 而且不影响本来的页面

把如下代码加入<body>区域中
<SCRIPT>

// scroller message
var message="欢迎光临javascript2000 请多提意见 记得经常来看看呀 你一定会有收获的 "

// fonts. Add as many fonts as you like.
var messagefont=new Array("Arial Black","Verdana","Impact","Comic Sans MS")

// fontcolors. Add as many fontcolors as you like.
var messagecolor=new Array("red","olive","888888","purple")

// horizontal and vertical position of scroller (pixels)
var positionleft=200
var positiontop=10
</SCRIPT>

<SCRIPT>
var timer
var marginright=0
var i_fadestrength=5
var i_message=0
var i_messagecolor=0
var i_messagefont=0
var step=1
var maxfontsize=220
var fontsizefactor=maxfontsize/100
var content
var textboxwidth=0
var bodywidth=0
message=message.split(" ")


function setmessage() {
if (i_message>=message.length) {i_message=0}
if (i_messagecolor>=messagecolor.length) {i_messagecolor=0}
if (i_messagefont>=messagefont.length) {i_messagefont=0}
content="<nobr><font color="+messagecolor[i_messagecolor]+" face="+messagefont[i_messagefont]+">"+message[i_message]+"</font><nobr>"
textbox.innerHTML=content
i_message++
i_messagecolor++
i_messagefont++
timer=setTimeout("resizemessage()",500)
}

function resizemessage() {
if (i_fadestrength<120) {
textbox.filters.alpha.opacity=Math.floor(100-i_fadestrength)
document.all.textbox.style.fontSize=i_fadestrength*fontsizefactor
document.all.textbox.style.posLeft=positionleft-(Math.floor(i_fadestrength/1.1*fontsizefactor))
document.all.textbox.style.posTop=positiontop
document.all.textbox.style.width=bodywidth-document.all.textbox.style.posLeft-5
document.all.textbox.style.overflowX="hidden"
document.all.textbox.style.visibility="visible"
step+=1.5
i_fadestrength+=step
timer=setTimeout("resizemessage()",50)
}
else {
clearTimeout(timer)
i_fadestrength=0;
step=1;
setmessage()
}
}
if (document.all) {
document.write("<DIV style=';font-family:Verdana;filter:alpha(opacity=0);'></DIV>")
document.write("<DIV style=';'>")
}

if (document.all) {
bodywidth=document.body.clientWidth-5
setmessage()
}

</SCRIPT>

 

一.图片的滤镜效果


准备:插入图片后进入"代码"模式,找到插入的图片代码域,对其进行修改.
找到相应的代码.为:
<IMG src="图片网址">


1.透明效果
格式:
<img src="图片地址" style="filter:Alpha(opacity=100,finishOpacity=0,style=0)">

<div style="filter:Alpha(opacity=100,finishOpacity=0,style=0) ;width:宽;height:高"><img src="图片地址"></div>

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

 

2.翻转效果
左右翻转格式:
<img src="图片地址" style="filter:FlipH">

<div style="filter:FlipH ;width:宽;height:高"><img src="图片地址"></div>
上下翻转格式:
<img src="图片地址" style="filter:FlipV">

<div style="filter:FlipV ;width:宽;height:高"><img src="图片地址"></div>


3.变调效果
灰调格式:
<img src="图片地址" style="filter:Gray">

<div style="filter:Gray ;width:宽;height:高"><img src="图片地址"></div>
X光效果:
<img src="图片地址" style="filter:Xray">

<div style="filter:Xray ;width:宽;height:高"><img src="图片地址"></div>
色彩对换:
<img src="图片地址" style="filter:Invert">

<div style="filter:Invert ;width:宽;height:高"><img src="图片地址"></div>

 

4.边框效果(来自小缘人)
发光:(color为发光颜色代码,strength是发光强度,滤镜宽=图宽+发光强度x2
滤镜高=图高+发光强度x2+10)
<div style="filter:Glow(color=#4A7AC9,strength=15);width:滤镜宽;height:滤镜高" align=center><br><img src="图片地址"></div>

投影:(color为发光颜色代码,direction方向(只能是45度的倍数如:45,90,135,180,225,270,315度),滤镜宽=图宽+25)
濾鏡高=图高40)
<div style="filter:Shadow(color=#4A7AC9,direction=135);width:滤镜宽;height:滤镜高" align=center><br><img src="图片地址"></div>

阴影:(color为发光颜色代码,offX水平位移offY垂直位移(可正可负),滤镜宽=图宽+水平位移绝对值+10,滤镜高=图高+垂直位移绝对值+20)
<div style="filter:Dropshadow(color=#333333,offX=5,offY=5);width:滤镜宽;height:滤镜高" align=center><br><img src="图片地址"></div>

模糊:(direction方向(只能是45度的倍数如:45,90,135,180,225,270,315度),滤镜宽=图宽+15,濾鏡高=图高+30)
<div style="filter:Blur(direction=135);width:滤镜宽;height:滤镜高" align=center><br><img src="图片地址"></div>

波形:(freq频率(>0)strength振幅强度(>0)lightstrength波峰强度(0~100愈高越黑)phase起始相位(0~100),滤镜宽=图宽+振幅强度x2
滤镜高=图高+振幅强度x2+10)
<div style="filter:Wave(freq=7,strength=9,lightstrength=5,phase=5);width:滤镜宽;height:滤镜高" align=center><br><img src="图片地址"></div>

 

文章的背景图代码:

<div style="WIDTH: 109px; HEIGHT: 108px;">
<img height="108px" src="图片链接地址" width="109" align="right">
<div style="float:left; background-color: TRANSPARENT;WIDTH: 109px; HEIGHT: 108px; ">
<br>
<font color="#FF00FF">文字</font>
</div>
在图片左边、右边插入文字:把图片放在文字的左边----------<P><IMG height=201 src="图片连接地址" width=154 align=left border=0><FONT face=Arial> 文字<BR>&nbsp;</FONT><BR clear=left></P>

把图片放在右边-----------------<P><IMG height=201 src="图片连接地址" width=154 align=right  border=0><FONT face=Arial> 文字<BR>&nbsp;</FONT><BR clear=left></P>

 

把挂件贴在博客里

<DIV style="RIGHT: 0px; ; TOP: 200px" align=right><IMG style="FILTER: FlipH" src="你的图片地址" align=right></DIV>
注意的是这个代码是带滤镜效果的,就是说会将图片反过来,如果不想带滤镜,那么将代码里的style="FILTER: FlipH"这段代码去掉就可以.代码里的所有RIGHT是管挂件在左或右的,全改LEFT或RIGHT就可以了.TOP:200PX管上下位置.
使用方法与背景音乐,鼠标的方法一样,控制面版,新建空白版,勾上源代码,复制进去代码,确定.再添加进首页,调整位置!

     

  评论这张
 
阅读(62)| 评论(0)
推荐 转载

历史上的今天

评论

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

页脚

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