代码特效教程之（移动特效+歌词同步）
<HTML xmlns:v = "urn:schemas-microsoft-com:vml" xmlns:t =
"urn:schemas-microsoft-com:time"><HEAD><TITLE>【婷儿音画】祖国你好</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META http-equiv=Content-Style-Type content=text/css>
<META content="MSHTML 6.00.2800.1561" name=GENERATOR>
<META http-equiv=imagetoolbar content=no>
<STYLE>.time {
BEHAVIOR: url(#default#time2)
}
t\\:* {
BEHAVIOR: url(#default#time2)
}
v\\:* {
BEHAVIOR: url(#default#VML)
}
</STYLE>
</HEAD>
<BODY id=body1 bgColor=#000000 background=bj.jpg scroll=no>
<IMG src="c.jpg" style="position:absolute; LEFT:0; top:0;" width="1000" height="570">
<?import namespace=t urn="urn:schemas-microsoft-com:time" implementation="#default#time2" declareNamespace/>
<t:SEQ repeatCount="indefinite">
<t:MEDIA style="FILTER: alpha;LEFT:0;TOP:56;WIDTH:1000; POSITION: absolute;HEIGHT:457" src=01.jpg dur="10" fill="transition" timeContainer="par">
<t:TRANSITIONFILTER from="0" to="1" type="progid XImageTransform.Microsoft.Strips(motion='rightdown')" dur="5">
</t:TRANSITIONFILTER>
</t:MEDIA>
<t:MEDIA style="FILTER: alpha;LEFT:0;TOP:56;WIDTH:1000; POSITION: absolute;HEIGHT:457" src=02.jpg dur="10" fill="transition" timeContainer="par">
<t:TRANSITIONFILTER from="0" to="1" type="progidXImageTransform.Microsoft.Zigzag(sProperties)" dur="5">
</t:TRANSITIONFILTER>
</t:MEDIA>
<t:MEDIA style="FILTER: alpha;LEFT:0;TOP:56;WIDTH:1000; POSITION: absolute;HEIGHT:457" src=03.jpg dur="10" fill="transition" timeContainer="par">
<t:TRANSITIONFILTER from="0" to="1" type="progidXImageTransform.Microsoft.Blinds(sProperties)" dur="5">
</t:TRANSITIONFILTER>
</t:MEDIA>
<t:MEDIA style="FILTER: alpha;LEFT:0;TOP:56;WIDTH:1000; POSITION: absolute;HEIGHT:457" src=04.jpg dur="10" fill="transition" timeContainer="par">
<t:TRANSITIONFILTER from="0" to="1" type="progidXImageTransform.Microsoft.GradientWipe(sProperties)" dur="5">
</t:TRANSITIONFILTER>
</t:MEDIA>
<t:MEDIA style="FILTER: alpha;LEFT:0;TOP:56;WIDTH:1000; POSITION: absolute;HEIGHT:457" src=05.jpg dur="10" fill="transition" timeContainer="par">
<t:TRANSITIONFILTER from="0" to="1" type="progidXImageTransform.Microsoft.Pixelate(sProperties)" dur="5">
</t:TRANSITIONFILTER>
</t:MEDIA>
<t:MEDIA style="FILTER: alpha;LEFT:0;TOP:56;WIDTH:1000; POSITION: absolute;HEIGHT:457" src=06.jpg dur="10" fill="transition" timeContainer="par">
<t:TRANSITIONFILTER from="0" to="1" type="progidXImageTransform.Microsoft.RandomBars(sProperties)" dur="5">
</t:TRANSITIONFILTER>
</t:MEDIA>
<t:MEDIA style="FILTER: alpha;LEFT:0;TOP:56;WIDTH:1000; POSITION: absolute;HEIGHT:457" src=02.jpg dur="10" fill="transition" timeContainer="par">
<t:TRANSITIONFILTER from="0" to="1" type="progidXImageTransform.Microsoft.Spiral(SProperties)" dur="5">
</t:TRANSITIONFILTER>
</t:MEDIA>
<t:MEDIA style="FILTER: alpha;LEFT:0;TOP:56;WIDTH:1000; POSITION: absolute;HEIGHT:457" src=01.jpg dur="10" fill="transition" timeContainer="par">
<t:TRANSITIONFILTER from="0" to="1" type="progidXImageTransform.Microsoft.Zigzag(sProperties)" dur="5">
</t:TRANSITIONFILTER>
</t:MEDIA>
<t:MEDIA style="FILTER: alpha;LEFT:0;TOP:56;WIDTH:1000; POSITION: absolute;HEIGHT:457" src=04.jpg dur="10" fill="transition" timeContainer="par">
<t:TRANSITIONFILTER from="0" to="1" type="progidXImageTransform.Microsoft.Zigzag(sProperties)" dur="5">
</t:TRANSITIONFILTER>
</t:MEDIA>
<t:MEDIA style="FILTER: alpha;LEFT:0;TOP:56;WIDTH:1000; POSITION: absolute;HEIGHT:457" src=03.jpg dur="10" fill="transition" timeContainer="par">
<t:TRANSITIONFILTER from="0" to="1" type="progidXImageTransform.Microsoft.Blinds(sProperties)" dur="5">
</t:TRANSITIONFILTER>
</t:MEDIA>
<t:MEDIA style="FILTER: alpha;LEFT:0;TOP:56;WIDTH:1000; POSITION: absolute;HEIGHT:457" src=06.jpg dur="10" fill="transition" timeContainer="par">
<t:TRANSITIONFILTER from="0" to="1" type="progid:DXImageTransform.Microsoft.GradientWipe(sProperties)" dur="5">
</t:TRANSITIONFILTER>
</t:MEDIA>
<t:MEDIA style="FILTER: alpha;LEFT:0;TOP:56;WIDTH:1000; POSITION: absolute;HEIGHT:457" src=05.jpg dur="10" fill="transition" timeContainer="par">
<t:TRANSITIONFILTER from="0" to="1" type="progid:DXImageTransform.Microsoft.Pixelate(sProperties)" dur="5">
</t:TRANSITIONFILTER>
</t:MEDIA>
<t:MEDIA style="FILTER: alpha;LEFT:0;TOP:56;WIDTH:1000; POSITION: absolute;HEIGHT:457" src=01.jpg dur="10" fill="transition" timeContainer="par">
<t:TRANSITIONFILTER from="0" to="1" type="progid:DXImageTransform.Microsoft.RandomBars(sProperties)" dur="5">
</t:TRANSITIONFILTER>
</t:MEDIA>
<t:MEDIA style="FILTER: alpha;LEFT:0;TOP:56;WIDTH:1000; POSITION: absolute;HEIGHT:457" src=03.jpg dur="10" fill="transition" timeContainer="par">
<t:TRANSITIONFILTER from="0" to="1" type="progid:DXImageTransform.Microsoft.Spiral(SProperties)" dur="5">
</t:TRANSITIONFILTER>
</t:MEDIA>
</t:SEQ>
<img class=time id="03" src="a.png" style="width:1000; height:570; position:absolute; LEFT:0; top:0; " begin="0">
<t:animateMotion id="am1" targetElement="03" from="0,0" to="-1024,0" begin="45" dur="20" autoreverse="1" repeatcount="1" fill="hold" />
<img class=time id="04" src="b.png" style="width:1000; height:570; position:absolute; left:0; top:0; " begin="0">
<t:animateMotion id="am1" targetElement="04" from="0,0" to="1024,0" begin="45" dur="20" autoreverse="1" repeatcount="1" fill="hold" />
<img class=time id="01" src="d.jpg" style="WIDTH:1000; height:570; position:absolute; LEFT:0; top:0; " begin="0">
<t:animateMotion id="am1" targetElement="01" from="0,0" to="0,-570" begin="30" dur="15" autoreverse="1" repeatcount="1" fill="hold" />
<img class=time id="02" src="c.jpg" style="WIDTH:1000; height:570; position:absolute; LEFT:0; top:0; " begin="0">
<t:animateMotion id="am1" targetElement="02" from="0,0" to="0,570" begin="10" dur="15" autoreverse="1" repeatcount="1" fill="hold" />
<img class=time id="02" src="e.png" style="width:1000; height:570; position:absolute; LEFT:0; top:0; " begin="0">
<t:animateMotion id="am1" targetElement="02" from="0,0" to="0,0" begin="" dur="" autoreverse="1" repeatcount="1" fill="hold" />
<t:transitionFilter id="Stretch1" targetElement="05" type="progid:DXImageTransform.Microsoft.RandomBars(sProperties)" mode="IN" begin="16" dur="1" autoreverse="false" repeatcount="1" />
</body>
</html>
<HTML xmlns:v>
<STYLE>v\\:* {
BEHAVIOR: url(#default#VML)
}
v\\:textpath {
FONT-SIZE: 18px; FONT-FAMILY: 楷体_gb2312; v-text-align: left
}
</STYLE>
<XMP id=xLyric style="DISPLAY: none">
[ar:张也]
[ti:祖国你好]
[al:]
[t_time 03:27)]
[by:fyes]
[offset:0]
[00:00.00]歌曲:祖国你好
[00:08.24]演唱:张也
[00:15.04]祖国你好 祖国你好
[00:19.23]你的儿女都在为你祈祷
[00:22.74]愿你家家快乐人人幸福
[00:26.51]甜蜜蜜的好日子欢欢笑笑
[00:30.23]祖国你好 祖国你好
[00:34.12]我们都生活在你的怀抱
[00:37.88]愿你岁岁平安事事如意
[00:41.69]喜洋洋的好年景热热闹闹
[00:45.51]你好祖国 祖国你好
[00:53.13]天涯海角歌声起
[00:57.11]中华大地龙腾虎跃
[01:01.11]你好祖国 祖国你好
[01:08.47]天南地北共祝愿
[01:12.27]祖国明天更美好
[01:15.87]祖国明天更美好
[01:31.29]祖国你好 祖国你好
[01:35.30]你的儿女都在为你祈祷
[01:39.17]愿你家家快乐人人幸福
[01:42.79]甜蜜蜜的好日子欢欢笑笑
[01:46.64]祖国你好 祖国你好
[01:50.51]我们都生活在你的怀抱
[01:54.30]愿你岁岁平安事事如意
[01:58.01]喜洋洋的好年景热热闹闹
[02:01.82]你好祖国 祖国你好
[02:09.30]天涯海角歌声起
[02:13.25]中华大地龙腾虎跃
[02:17.20]你好祖国 祖国你好
[02:24.54]天南地北共祝愿
[02:28.53]祖国明天更美好
[02:32.47]祖国明天更美好
[02:36.37]你好祖国 祖国你好
[02:43.33]天涯海角歌声起
[02:47.43]中华大地龙腾虎跃
[02:51.34]你好祖国 祖国你好
[02:59.02]天南地北共祝愿
[03:02.93]祖国明天更美好
[03:06.51]祖国明天更美好
[03:08.94]祖国明天更美好
[03:10.24]婷儿祝福音画界的所有朋友
[03:11.24]国庆快乐全家幸福
</XMP>
<SCRIPT>
window.onerror=function(){return false}
start()
function start(){
browser_ini()
timer_ini()
emv_ini()
lrc.setData(oo("xLyric").innerHTML)
lrc.write("歌曲载入中，请耐心等待...","l")
emv.play("zgnh.mp3")
}
function emv_ini(){
var l
window.emv={}
lrc_ini()
l="<div id=bxEmv style=position:absolute;left:330;top:100;width:550;height:460>"
l+="<div style=position:absolute;left:0;top:0;width:550;height:460;></div>"
l+="<div id=bxEmvScreen style=position:absolute;overflow:hidden;left:29;top:6;width:500;height:460;>"
l+="</div>"
l+="</div>"
l+="<object classid=clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95 id=mplayer width=200 height=200 style=display:none></object>"
insHtm(document.body,l)
emv.play=function(url){oo("mplayer").FileName=url;oo("mplayer").Play()}
emv.time=function(){
var mPos=mplayer.CurrentPosition,n=lrc.i
var n1,o,len,w,per,n0,n1
n1=n<lrc.arr.length-1?lrc.arr[n+1].slice(0,"|")*1:9999
if(n1<mPos){
lrc.i++
n++
if(n==0)
lrc.write(lrc.arr[n].slice("|"),"l")
if(n<lrc.arr.length-1)
lrc.write(lrc.arr[n+1].slice("|"),n%2==1?"l":"r")
}
if(n>=0){
n0=lrc.arr[n].slice(0,"|")
n1=lrc.arr.length>n+1?lrc.arr[n+1].slice(0,"|"):4
o=oo("bxCaption_"+(n%2==0?"l":"r")+"_cover")
len=o.time!=""?o.time*1:n1-n0
per=(mPos-n0)/len
for(i=0.001;i<1;i+=0.001){
per1=lrc.getRealPos(o,i)
if(per1>=per)
break
}
o.style.width=o.width*i
}
}
timer.add("emv.time()")
}
function lrc_ini(){
window.lrc={}
lrc.wordPer=function(str,pos){
return str.slice(0,pos).replace(/[^\\x00-\\xff]/g," ").length/str.replace(/[^\\x00-\\xff]/g," ").length
}
lrc.setData=function(str){
var l,a,i,ad,n,j
str=str.replace(/\\|/g,"").replace(/\\r\\n/g,"\\n")
str=str.replace(/\\[(\\d\\d)\\\\d\\d)\\.(\\d\\d)\\]/g,function($0,$1,$2,$3){return ($1*60+$2*1+$3/100)+"|"})
a=str.split("\\n")
lrc.arr=new Array()
for(i=0;i<a.length;i++){
ad=a.split("|")
for(j=1;j<ad.length;j++){
lrc.arr.add(ad[j-1]+"|"+ad[ad.length-1])
}
}
lrc.i=-1
sortIndex=0
sortDir=1
lrc.arr.sort(sortFoo)
}
lrc.getRealPos=function(obj,pos){
var a=obj.path,zoom=obj.zoom,pos1=pos*zoom
var a,i,ad
for(i=0;i<a.length;i++){
ad=a
if(pos<=ad[0])
continue
if(pos>ad[0]&&pos<=ad[1])
pos1+=(zoom*ad[2]-zoom)*(pos-ad[0])
else{
pos1+=(zoom*ad[2]-zoom)*(ad[1]-ad[0])
}
}
return pos1
}
lrc.write=function(str,pos){
var word=str,style=""
var x,y,l,w,w1,o,a,i,ad
if(/^\\<.+\\>/.test(str)){
word=str.slice(">")
style=str.slice(1).slice(0,">")
}
w=word.replace(/[^\\x00-\\xff]/g," ").length*13+2
if(pos=="l"){
x=30
y=310
}
else{
x=320-w
y=340
}
l="<div id=bxCaption_"+pos+" style='position:absolute;left:"+x+";top:"+y+";width:"+w+";height:26;overflow:hidden'>"
l+="<v:curve to=600,1 strokecolor=green strokeweight=2 style=position:absolute;top:14>"
l+="<v:path textpathok=t /><v:textpath on=t string='"+word+"' /></v:curve>"
l+="<v:curve to=600,1 strokecolor=#FFFAFA fillcolor=white strokeweight=1 style=position:absolute;top:14>"
l+="<v:path textpathok=t /><v:textpath on=t string='"+word+"' /></v:curve>"
l+="</div>"
l+="<div id=bxCaption_"+pos+"_cover width="+w+" style=position:absolute;left:"+x+";top:"+y+";width:0;height:32;overflow:hidden>"
l+="<v:curve to=600,1 strokecolor=#FFFAFA strokeweight=3 style=position:absolute;top:14>"
l+="<v:path textpathok=t /><v:textpath on=t string='"+word+"' /></v:curve>"
l+="<v:curve to=600,1 strokecolor=#FF0000 fillcolor=#FF0000 strokeweight=1 style=position:absolute;top:14>"
l+="<v:path textpathok=t /><v:textpath on=t string='"+word+"' /></v:curve>"
l+="</div>"
odel("bxCaption_"+pos)
odel("bxCaption_"+pos+"_cover")
insHtm("bxEmvScreen",l)
o=oo("bxCaption_"+pos+"_cover")
o.time=style.get("time")
o.path=new Array()
len1=1
a=style.split(";")
for(i=0;i<a.length;i++){
if(!/(\\d+)\\d+)/.test(a))
continue
if(/(\\d+)-(\\d+)\\d+)/.test(a)){
ad=/(\\d+)-(\\d+)\\d+)/.exec(a)
ad[0]=lrc.wordPer(word,ad[1]-1)
ad[1]=lrc.wordPer(word,ad[2]*1)
ad[2]=ad[3]
}
else{
ad=/(\\d+).+)/.exec(a)
ad[0]=lrc.wordPer(word,ad[1]-1)
ad[1]=lrc.wordPer(word,ad[1]*1)
}
len1+=(ad[1]-ad[0])*(ad[2]-1)
o.path.add(ad)
}
o.zoom=1/len1
}
}
function browser_ini(){
window.isIE=navigator.userAgent.indexOf("IE")>0
window.isIE5=navigator.userAgent.indexOf("IE 5.0")>0
String.prototype.trim=function(){return this.replace(/(^[\\s]*)|([\\s]*$)/g,"")}
String.prototype.inc=function(s1,s2){if(s2==null){s2=","};return (s2+this+s2).indexOf(s2+s1+s2)>-1?true:false}
String.prototype._slice="".slice
String.prototype.slice=function(n1,n2){var v,b1=typeof(n1)=="number",b2=typeof(n2)=="number";if(!b1||typeof(n2)=="string"){v=eval("this._slice("+(b1?n1:this.indexOf(n1)+(n2==null?1:0)+(this.indexOf(n1)==-1?this.length:0))+(n2==null?""b2?n2this.indexOf(n2)==-1?"":","+this.indexOf(n2))))+")")}else{v=isIE5&&n1<0&&n2==null?this._slice(this.length-1):eval("this._slice(n1"+(n2==null?"":","+n2)+")")}return v}
String.prototype.get=function(str,def){if(this.inc(str,";"))return 1;var a=this.match(new RegExp("(^|;)"+str+":[^;]*"));return a==null||str==""?(def==null?"":def):a[0].replace(";","").slice(str.length+1)}
Array.prototype.add=function(key){this[this.length]=key}
window.oo=function(obj){return typeof(obj)=="string"?document.getElementById(obj) bj}
window.insHtm=function(op,html,inEnd){op=oo(op);if(isIE){op.insertAdjacentHTML(inEnd==null?"beforeend":"afterbegin",html)}else{var r=op.ownerDocument.createRange();r.setStartBefore(op);eval("op."+(inEnd==null?"appendChild":"insertBefore")+"(r.createContextualFragment(html),op.firstChild)");}}
window.odel=function(obj){if(oo(obj)!=null){oo(obj).parentNode.removeChild(oo(obj))}}
if(!isIE){
HTMLElement.prototype.contains=function(node){if(!node)return false;do if(node==this){return true}while(node=node.parentNode){return false}}
Event.prototype.__defineGetter__("srcElement",function(){var node=this.target;while(node.nodeType!=1){node=node.parentNode}return node})
Event.prototype.__defineGetter__("toElement",function(){return this.relatedTarget})
}
}
function timer_ini(){
window.timer={}
timer.handle=null
timer.queue=""
timer.i=0
timer.add=function(key){if(!timer.queue.inc(key,";")){timer.queue+=key+";"}}
timer.del=function(key){timer.queue=move.queue.replace(key+";","")}
timer.inv=function(){
window.clearTimeout(timer.handle)
eval(timer.queue)
timer.i++
timer.handle=window.setTimeout("timer.inv()",10)
}
timer.inv()
}
function sortFoo(v1,v2){
var s1=v1.split("|")[sortIndex],s2=v2.split("|")[sortIndex]
if(!isNaN(s1)&&!isNaN(s2)){
s1*=1
s2*=1
}
return (s1==s2?0s1>s2?1:-1))*sortDir
}
</SCRIPT>
<EMBED style="LEFT: 0px; WIDTH: 500px; POSITION: absolute; TOP: 10px; HEIGHT: 300px" align=right src=yanhua.swf width=500 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>
<EMBED style="LEFT: 500px; WIDTH: 500px; POSITION: absolute; TOP: 20px; HEIGHT: 300px" align=right src=yanhua.swf width=500 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>
这个帖子做好了一张红色背景图片（100×100），
一张变换时的背景图片c.jpg(1000×570),
6张循环变换的图片01～06.jpg（1000×457），
2张分别向左和向右移动的图片a.png和b.png（1000×570），
2张分别向上和向下移动的图片c.jpg和d.jpg（1000×570）,把它们放在一个文件夹中，
复制一个HTML网页文件和所用的音乐文件，和图片放在一起，如下图：
现在用记事本打开HTML网页文件，
把上面我给的代码全部复制/粘帖进去，根据自己所作图片的大小、
变换图片和移动图片的位置，再调整一下具体的定位数据：
调整好以后，保存！回到帖子文件夹，打开HTML网页文件，
就可以在自己电脑上浏览效果了！
如果效果不理想，就修改一下相关的定位数据，
保存后刷新网页再浏览，直到满意为止！
最后，我们要把它上传到自己的空间，复制空间帖地址，
再用发空间帖的方法发到论坛就好了！ |
01i = P01.getElementsByTagName("img")[0];