发新帖  新投票  回帖 
3459个阅读者,16条回复 | 打印 | 订阅 | 收藏
花花86

发表时间:2006-11-11 15:50

[原创]HTML+TIME教程编写



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



第一次知道TIME技术是看了沐月乘风大哥的帖子,觉得那些动画挺好看的,可人家给的都是可用的代码,而不是教你怎么做,会用又怎么样呢?自己还是不会变化,为此自己就在网络上搜HTML+TIME,不过百度搜到的差不多都是相同的一些做好的代码,中国人就是资源共享做的好,呵呵~~~~~

最后只能求助GOOGLE搜外国的,乱七八糟的给我搜到了一些资料,一句句的用翻译软件翻译过来,够辛苦的^_^

在这里结合个人的参捂,打算写一些关于HTML+TIME的教程出来,由于个人水平有限,也是个菜鸟,里面一定有很多错误,希望大家能指正.希望和我一样的菜鸟看了能有所帮助,高手看了能指点下在下^_^

第一节:

HTML+TIME,是由Microsoft公司开发的东西, 我们用的HTML+TIME (2.0),如果不是在IE5.5以上的浏览器,不能正常看,不过我想大家的IE应该都在6以上了吧?呵呵^_^~

为了吸引大家首先来说些它的优点:

①比JS脚本容易理解,容易自如运用。

②可以按照自己的想象用简单的代码实现复杂的效果。

首先我要声明一点就是我这里讲的不是照论坛UBB代码格式,而是按照HTML网页模式~

开始拉:

首先你的代码头文件必须包含以下代码:






























下面就让我们来看一个简单的例子,大家请看效果

:

这个的代码是:











大家一起来学习HTML+TIME


















这个比前面多了什么,不就多了红色部分的2行?这里让我来解释下.首先ID表示名字,譬如我叫蛋蛋,然后你可以叫蛋蛋去干什么譬如蛋蛋去打球,就是蛋蛋.打球,那我这里也就可以这么来写了,image1.begin,表示图像一开始的意思,就是确定个对象然后让它干什么,接下来的是图片的绝对地址就不用多了吧?然后整句STYLE就是对图片的绝对定位,关于绝对定位的具体理解请大家看我另外的帖子,CLASS表示类型,譬如这个是关于时间的,既然关于时间的,当然有显示和结束咯,begin表示开始,end表示结束, begin="0" end="4"表示0秒开始,4秒消失的意思,就这么简单一个按时间分布显示的动画就出来拉~

题外话:当然这个不仅仅适用于图片,还适用于表格,层等某些各类标签,大家可以尝试下哦

这是第一个教程,希望大家看了给我点意见,如果大家觉得还行我将继续出下去




----------------------------------------------
本人致力于音画代码的开发与教学,我的目标是:让每一个喜欢音画的人都能在愉快的氛围中快乐学习音画,轻松成为音画制作高手,用我的汗水打造你的成功
http://www.52zt.cn
 
花花86

回复时间:2006-11-11 15:51
第二课


这节我们讲解了图片按照时间的变化,这节让我们来讲解下图片的运动

试想下我们要表现这么个效果,让图片在网页的0.0坐标在页面打开后10秒后显示,然后移动,大家都应该知道MARQUEE这个标签属性是用来设置移动的,但是如果用这个属性来达到斜角45度的移动,大家认为能办到吗?至少我是不知道该怎么来编写,现在让我来讲下用TIME技术是如何达到的

老样子给大家看移动效果:点击

再给代码:






大家一起来学习HTML+TIME

















大家可以看到这次效果的产生是因为红色部分的代码,至于第一部分我已经介绍过了,这里介绍第二部分的代码:标记是用来移动图片表格等要素的,targetElement表示目标单元,用来表示待会作用到哪个对象上,可能这个有点面向对象的概念吧,大家可以搜下这方面的资料,这里我就不展开了from="0,100" to="300,300"表示图片从0.0坐标移动到300.300坐标上.接着讲解dur="3",表示运动的速度,fill="hold"表示是否固定在原位置,大家可以看演示例子的效果,可以看到一个固定在最后位置一个返回了起先位置,就是是否设置了fill="hold" 而产生的效果




----------------------------------------------
本人致力于音画代码的开发与教学,我的目标是:让每一个喜欢音画的人都能在愉快的氛围中快乐学习音画,轻松成为音画制作高手,用我的汗水打造你的成功
http://www.52zt.cn
 
花花86

回复时间:2006-11-11 15:52
第三课

上节讲解了位置的变化,那这节就让我来讲下颜色的变化,其实动画也无外乎颜色位置形状的各种变化组合出各类效果罢了,主要看的还是个人的灵感撒

老规矩:先给例子:点击

对了在这里我说一句就是大家千万别复制代码了事,一定要自己编写过才有印象,从这节开始我将屏蔽右键的复制功能,当然大家会说我还可以看源代码嘛,如果真这样那我就要加密网页咯,养成一个好习惯真的很重要

代码:

**** 本内容跟帖回复才可浏览 *****

这里大家可以看到有3个效果,一个是字体逐渐显示为红色然后固定为红色,一个是显示为蓝色后然后恢复成原来的原色,最后一个是变为绿色后逐渐退回原来的颜色,其实三个效果也就多了红色部分部分的代码:标记连续性地变化文字或者背景的颜色。attributeName表示的是属性名字,譬如这里是color,autoreverse表示自动回转,如这里产生绿色再回转到黑色的效果




----------------------------------------------
本人致力于音画代码的开发与教学,我的目标是:让每一个喜欢音画的人都能在愉快的氛围中快乐学习音画,轻松成为音画制作高手,用我的汗水打造你的成功
http://www.52zt.cn
 
花花86

回复时间:2006-11-11 15:54
晕啊,怎么出来的是效果,而不是代码,郁闷,对不住大家了,要不大家去我每日更新的TIME分页看看,HTML+TIME学习网址,点击进入




----------------------------------------------
本人致力于音画代码的开发与教学,我的目标是:让每一个喜欢音画的人都能在愉快的氛围中快乐学习音画,轻松成为音画制作高手,用我的汗水打造你的成功
http://www.52zt.cn
 
半糖的爱情

回复时间:2006-11-12 16:37
   看不到!!
  
  
  




----------------------------------------------
事能知足,心常惬,人到无求品自高.
 
花花86

回复时间:2006-11-12 21:56
不好意思,我也不知道为何代码会出不来,其他论坛可以的,你点这个地址看吧~,教程主页http://time.xiaoyaor.com




----------------------------------------------
本人致力于音画代码的开发与教学,我的目标是:让每一个喜欢音画的人都能在愉快的氛围中快乐学习音画,轻松成为音画制作高手,用我的汗水打造你的成功
http://www.52zt.cn
 
梦的梦想

回复时间:2006-11-13 12:43

以下是引用花花86在2006-11-12 21:56:00的发言:
不好意思,我也不知道为何代码会出不来,其他论坛可以的,你点这个地址看吧~,教程主页http://time.xiaoyaor.com


梦想问好
谢谢




----------------------------------------------
清晨的相识

正午的相知

午后的相许

傍晚的相守
 
宠儿
原创音画组

回复时间:2006-11-16 11:18

以下是引用花花86在2006-11-11 15:54:00的发言:
晕啊,怎么出来的是效果,而不是代码,郁闷,对不住大家了,要不大家去我每日更新的TIME分页看看,HTML+TIME学习网址,点击进入


要帖代码出来,要用原代码才可以哦,这样只能看到效果的。

 
宠儿
原创音画组

回复时间:2006-11-16 11:19
谢谢你的教程。

 
一口闲钟

回复时间:2006-11-20 15:20
偶也是菜鸟,楼主辛苦了,就是什么都看不倒

 
织梦小筑

回复时间:2008-8-17 18:17
偶也是菜鸟,楼主辛苦了

 
没有印象

回复时间:2010-7-6 13:24
http://time.xiaoyaor.com 打不开了,哪有多张图片循环切换的代码。作者声明:本帖为本人原创,未经本人和华声论坛许可,不得转载

 
阿兰得龙2011

回复时间:2010-7-7 01:06
看不到效果图啊!!咋回事儿。

 
静荷听雨

回复时间:2010-8-9 19:23
虽没看到,但是很感谢楼主的付出

 
yf90824

回复时间:2011-11-4 22:49
顶了

 
霓裳羽翼

回复时间:2011-12-26 21:47
看着有点晕,不太明白。

 
霓裳羽翼

回复时间:2011-12-26 21:48
谢谢楼主的付出。

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


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



Processed in 0.032768 s, 8 q - 无图精简版,sitemap,