查看: 3240|回复: 14

[教程] HTML+TIME学习笔记(四)

[复制链接]

该用户从未签到

鲜花(0) 鸡蛋(0)
发表于 2008-8-7 14:21 | 显示全部楼层 |阅读模式

第四课

上节讲解了颜色的变化,那这节就让我来讲下形状的变化。

先来看看例子:

点击看效果

接下来看代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>黄莺语柳 紫燕归梁</TITLE>
<STYLE type="text/css">
<!--
.time{ behavior:url(#default#time2); }
-->
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>

<img id="t1" src="http://roger01rao.ik8.com/htmlntime/jiaocheng/05a.jpg" style="width:0; height:0; position:absolute; left:0; top:0;">
<t:animate id="large1" targetElement="t1" attributeName="width" from="0" to="500" begin="1" dur="3" fill="hold" />
<t:animate id="large2" targetElement="t1" attributeName="height" from="0" to="398" begin="large1.begin" dur="3" fill="hold" />


</BODY>
</HTML>

效果描述:就是让这个图片从0.0位置逐渐变化到500.398坐标。

这里与前面代码不同的无非就是<t:animate/>标记,这个标记是用来连续性变化图像大小的,其他属性前面都讲过了,这里只是重复应用罢了。

这里我给大家留个作业:这里的形状变化是从左上角开始到右下脚的,如何做到从中间逐渐放大到两边呢?希望大家能做这个练习,并发表在回复里。

该用户从未签到

鲜花(0) 鸡蛋(0)
发表于 2008-8-7 16:53 | 显示全部楼层
等有时间来交作业!

签到天数: 425 天

[LV.9]以坛为家II

鲜花(0) 鸡蛋(0)
发表于 2008-8-7 17:57 | 显示全部楼层
我先学习,然后交作业。

该用户从未签到

鲜花(0) 鸡蛋(0)
发表于 2008-8-8 01:12 | 显示全部楼层

交作业

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">
<HTML XMLNS:t=\"urn:schemas-microsoft-com:time\">
<HEAD>
<META http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\">
<META http-equiv=\"Content-Style-Type\" content=\"text/css\">
<TITLE>黄莺语柳 紫燕归梁</TITLE>
<STYLE type=\"text/css\">
<!--
.time{ behavior:url(#default#time2); }
-->
</STYLE>
<?IMPORT namespace=\"t\" implementation=\"#default#time2\">
</HEAD>
<BODY>
<img id=\"t1\" src=\"http://roger01rao.ik8.com/htmlntime/jiaocheng/05a.jpg\" style=\"width:0; height:0; position:absolute; left:500; top:400;\">
<t:animate id=\"large1\" targetElement=\"t1\" attributeName=\"width\" from=\"0\" to=\"500\" begin=\"1\" dur=\"3\" fill=\"hold\" />
<t:animate id=\"large2\" targetElement=\"t1\" attributeName=\"height\" from=\"0\" to=\"398\" begin=\"large1.begin\" dur=\"3\" fill=\"hold\" />
</BODY>
</HTML>


该用户从未签到

鲜花(0) 鸡蛋(0)
发表于 2008-8-8 01:18 | 显示全部楼层
试验了作业好象图片停留时间短了点,位置不够居中,麻烦老师看看需要修改什么?

签到天数: 9 天

[LV.3]偶尔看看II

鲜花(0) 鸡蛋(0)
发表于 2008-8-8 17:41 | 显示全部楼层
先学习!!!!!!!!

签到天数: 9 天

[LV.3]偶尔看看II

鲜花(0) 鸡蛋(0)
发表于 2008-8-8 22:37 | 显示全部楼层
留个脚印,有时间来学习

该用户从未签到

鲜花(0) 鸡蛋(0)
发表于 2008-10-2 22:10 | 显示全部楼层

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">
<HTML XMLNS:t=\"urn:schemas-microsoft-com:time\">
<HEAD>
<META http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\">
<META http-equiv=\"Content-Style-Type\" content=\"text/css\">
<TITLE>水若寒来学习~</TITLE>
<STYLE type=\"text/css\">
<!--
.time{ behavior:url(#default#time2); }
-->
</STYLE>
<?IMPORT namespace=\"t\" implementation=\"#default#time2\">
</HEAD>
<BODY>

<img id=\"t1\" src=\"http://roger01rao.ik8.com/htmlntime/jiaocheng/05a.jpg\" style=\"width:0; height:0; position:absolute;

left:500; top:398;\">
<t:animate id=\"large1\" targetElement=\"t1\" attributeName=\"width\" from=\"0\" to=\"500\" begin=\"1\" dur=\"3\" fill=\"hold\" />
<t:animate id=\"large2\" targetElement=\"t1\" attributeName=\"height\" from=\"0\" to=\"398\" begin=\"large1.begin\" dur=\"3\" fill=\"hold\"

/>


</BODY>
</HTML>


[ 本帖最后由 水若寒 于 2008-10-2 22:15 编辑 ]

该用户从未签到

鲜花(0) 鸡蛋(0)
发表于 2008-10-2 22:17 | 显示全部楼层
请教一下楼主哦,为什么我做成代码它还在上面出现?是我做的?

该用户从未签到

鲜花(0) 鸡蛋(0)
发表于 2008-10-3 17:00 | 显示全部楼层

回复 1# 的帖子

先学学,好象很难,学会了交作业
您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

网站地图|小黑屋|Archiver|中画网 ( 蜀ICP备11021737号-2 )|网站地图

GMT+8, 2024-11-15 09:15 , Processed in 0.059556 second(s), 23 queries , MemCached On.

上网要文明 发言要理性

Powered by Discuz! © 2008-2023 YinHuaBBS.CN

快速回复 返回顶部 返回列表