发新帖  新投票  回帖 
6468个阅读者,20条回复 | 打印 | 订阅 | 收藏
蒂芬妮

发表时间:2009-5-8 16:15

[原创]-- 学习用代码做翻书效果



蒂芬妮 发表在 教程交流 华声论坛 http://bbs.voc.com.cn/forum-163-1.html







[本帖最后由 蒂芬妮 于 2011-4-16 15:58 编辑]


本帖最近评分记录
婷有独钟   2009-5-8 19:23  金钱  +5   好帖!
婷有独钟   2009-5-8 19:23  魅力  +5   好帖!
 
蒂芬妮

回复时间:2009-5-8 16:33
翻书的代码如下:




<HTML><HEAD><TITLE>用代码做翻书效果</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>BODY {
FONT-WEIGHT: bold; FONT-SIZE: 14pt; MARGIN: 10px 10px 10px 420px; COLOR: #ffffff; FONT-FAMILY: Comic Sans MS; BACKGROUND-COLOR: #ffffff
}
.cube {
BORDER-RIGHT: #ada5cc 1pt solid; BORDER-TOP: #ada5cc 1pt solid; Z-INDEX: -1; FILTER: light(enabled=1); LEFT: -10000px; BORDER-LEFT: #ada5cc 1pt solid; BORDER-BOTTOM: #ada5cc 1pt solid; POSITION: absolute; TOP: 0px
}
</STYLE>

<META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD>
<BODY onload=zyva()>
<SPAN
id=plaatjes><IMG class=cube src="1.gif">
<IMG
class=cube src="2.gif">
<IMG
class=cube src="3.gif">
<IMG
class=cube src="4.gif">
<IMG
class=cube src="5.gif">
<IMG
class=cube src="6.gif">
<IMG
class=cube src="7.gif">
<IMG
class=cube src="8.gif">
<IMG class=cube
src="9.gif">
<IMG class=cube
src="10.gif"> </SPAN>
<SCRIPT language=JavaScript>
with (document.body) {
nx=offsetWidth
ny=offsetHeight
scroll="yes"
}

obj=0;
Haut=400;
Larg=400;
pt=0;
Nbi=0;
z=0
w1=0;
w2=0;
l1=0;
l2=0;
h1=0;
t1=0;
z=0

function mov() {
if(pt%2==0){
i1=obj[pt]
i2=obj[(pt+2)%Nbi]

i1.style.width=w1
i1.style.left=l1+Larg
i1.style.height=h1
if(!z){
z=1
i1.style.top=t1
i1.style.zIndex=2
}

i2.style.width=Larg
i2.style.left=l1+Larg-1
i2.style.height=Haut
i2.style.top=t1
i2.style.zIndex=1
}

else{
i2=obj[pt]
i1=obj[(Nbi+pt-2)%Nbi]

i2.style.width=w2
i2.style.left=l1+w1
i2.style.height=h1
i2.style.top=t1
if(!z){
z=1
i2.style.zIndex=pt+1
i1.style.zIndex=pt
}
}
w1+=-2
w2+=+2
lu1=w1*150/h1
lu2=w2*150/h1
i1.filters(0).Clear()
i1.filters(0).addAmbient (255,255,255,lu1)
i2.filters(0).Clear()
i2.filters(0).addAmbient (255,255,255,lu2)
if(w1<=0){
pt=(pt+1)%Nbi ;w1=w2;w2=0;
i1.style.left=-1000
if(pt%2==0)i1.style.zIndex=-2
z=0
}
}

function zyva() {
obj=plaatjes.all.tags("IMG")
Nbi=obj.length
h1=Haut
t1=10
w1=Larg
l1=10
w2=0
l2=Larg+l1
setTimeout('setInterval("mov()",1)',64)
}
</SCRIPT>
</BODY></HTML>


 
指尖鸢尾

回复时间:2009-5-8 16:41

 
蒂芬妮

回复时间:2009-5-8 16:55
以上是翻书特效音画的制作代码,其中有的部分需要替换:

1 图片地址部分 src="1.gif" 代表你制作的图片的地址,分别用1、2.。。。。。。N来表示,有几张就放几张。

2 Haut=400;Larg=400; 部分为每张图片的宽度和高度尺寸,需要根据自己的情况调整。


朋友们在制作图片结束后,首先需要把自己的图片先上传得到网址,然后替换到特效音画代码中去,调整好尺寸,并将自己的代码另存为一个txt文件,上传后再得到一个

网址。比如我这个翻书的txt 文件的网址是:( http://webftp.bbs.hnol.net/xuetang/DFN/txt/Yncaihua.txt)

可外链上传TXT文件和图片的免费空间,可以参考这里:http://bbs.voc.com.cn/topic-1871569-1-1.html

以下是发帖的代码:



<DIV style="WIDTH: 1000px; POSITION: relative; TOP: 0px; center: -175px"><IFRAME marginWidth=0 marginHeight=0 src="http://webftp.bbs.hnol.net/xuetang/DFN/txt/Yncaihua.txt" frameBorder=0 width=1000 scrolling=no height=500></IFRAME></DIV>
<DIV></DIV><BR><BR>

[本帖最后由 蒂芬妮 于 2010-10-18 07:16 编辑]

 
成绩思寒

回复时间:2009-5-8 17:14
谢谢分享,有时间做一帖试试。




----------------------------------------------
三十年后,如果世界上还有坚持这个词,希望它属于我;三十年后,如果世界上还有感动这个词,希望它属于你。
 
婷有独钟

回复时间:2009-5-8 19:22
很不错的翻书效果!谢谢蒂芬妮分享!




----------------------------------------------
曾经沧海难为水,除却巫山不是云。取次花丛懒回顾,半缘修道半缘君。
 
蒂芬妮

回复时间:2009-5-9 18:46
谢谢婷婷版主的鼓励!

送你一束花,愿你像花一样美丽漂亮!!


 
子柔妹妹
原创音画组

回复时间:2009-5-9 22:33
很不错的教程!谢谢分享!




----------------------------------------------
【盈盈之水 脉脉不语】
 
就怕温柔

回复时间:2009-5-23 22:37
谢谢分享!

 
abc心雨

回复时间:2009-5-27 15:57
欣赏

 
smary

回复时间:2009-6-18 06:38
蒂芬妮 太棒了

 
落雨123

回复时间:2009-11-8 11:11
谢谢拉 收获不小

 
栀子

回复时间:2009-11-8 12:43
很不错的教程!谢谢 蒂芬妮!

 
轻柳

回复时间:2010-1-4 14:27
好教材!谢谢!

 
shob

回复时间:2010-1-5 15:46

 
雪域彩虹

回复时间:2010-9-18 23:16
很好的教程, 改天也做个看看

 
33855181

回复时间:2010-10-5 20:59
我怎么做不出来

 
春雨细风

回复时间:2010-10-11 15:15
谢谢好的教程 ,拷贝下来等有空做着试试

 
静荷听雨

回复时间:2010-10-13 21:32
有空一定要好好学学代码

 
蒂芬妮

回复时间:2010-10-18 07:20
以前的链接地址失效,所以重新编辑一下、换了链接地址~~

 
发新帖 新投票
 回帖
查看积分策略说明快速回复主题
你的用户名: 密码:   免费注册(只要30秒)


启用 Html 代码
使用个人签名
(请您文明上网理性发言!并遵守相关规定
   



Processed in 0.028244 s, 9 q - 无图精简版,sitemap,