当前位置：文档之家 › Web经典案例_时间轴特效

Web经典案例_时间轴特效

  • 格式：docx
  • 大小：180.00 KB
  • 文档页数：9

下载文档原格式

  / 9

合集下载

网页设计与制作案例教程第27单元

网页设计与制作案例教程第27单元

14.3 使用时间轴制作特效
在网页15.html中利用时间轴制作漂浮 图片特效，具体操作过程如下： （1）打开网页“15.html”。 （2）打开时间轴面板 在Dreamweaver 8主窗口中，单击菜单 【窗口】→【时间轴】，打开的“时间轴” 面板。
（3）在Dreamweaver 8主窗口中，单击菜 单【插入】→【布局对象】→【层】，或单 单击“布局”插入工具栏中的“绘制层”按 钮，在文档窗口中绘制一个层，然后在该层 中放置一个图像，这里为“01.gif”。
（3）单击【确定】按钮，弹出“.text1 的CSS规则定义”对话框，选择“分类”中 的“类型”选项，“字体”设置为“华文新 魏”，“大小”设置为“50”，“颜色”设 置为“#FF9900”。
（4）单击“应用”按钮，再在“分类” 中选择“扩展”选项，“过滤”设置为 “Glow(Color=red, Strength=8)”。
第14章
课程引导
制作网页特效
在网页中添加一些恰当的特效，的观赏性、趣味性。本 章通过几个典型的实例学习制作网页特效的 方法。
知识技能目标
（1）学会利用CSS制作特效的操作方法。 （2）学会使用行为制作特效的操作方法。 （3）学会使用时间轴制作特效的操作方 法。 （4）学会使用插件制作特效的操作方法。
（5）打开代码视图，按下列代码进行修 改，使网页载入时自动播放音乐。
<EMBED NAME='CS1154075549578' SRC='music/01.mp3' LOOP="true" AUTOSTART="true"" MASTERSOUND HIDDEN=true WIDTH=0 HEIGHT=0></EMBED>

最新文档-网页设计之行为与时间轴-PPT精品文档

最新文档-网页设计之行为与时间轴-PPT精品文档
• 转到时间轴帧 ： 允许对指定的时间轴控制播放其指定的时间帧 以及循环的次数。
• 播放时间轴，停止时间轴 ： 允许用户通过某种事件来播放或停止播放时间轴
2019/4/25
21
四、时间轴应用实例
制作在网页上飘动的广告图片(gundong.html) 小广告在网页上飘动，当鼠标指向广告时广告停止
不动，当鼠标离开广告时，广告继续飘动
2019/4/25
11
时间轴弹出菜单
当
前
回
播
每秒
首 后 放 播 播放
帧 退 帧 放 帧数
二 、时间轴面板
自动 循环 播放 播放
行为频道 播放头
动画频道
动画栏
帧数
关键帧
自 循播动动关 总动环 画键放画帧时 回后播播播 栏帧间首放头频数退放放 （轴：：帧： 条： 道弹选是使 ）：择出值 ： 表将动页：将“菜是 显 示面即播画自播单在动页 示 每栏放：放播浏画指中面 动 个头头放览频定给”器 道移上画动向当复某中动前当层画选左右打 的个到框文前和栏开 蓝移对，档时时 色使显图占动的象间， 小当哪示像有指一当 条轴前个定页前 ，的帧的时面时 显了首间是栏帧在间 示属轴帧载时数轴 每显性入可 个间。浏示（以 对览在轴如无象器时限的的位时间循持自置哪轴动环续面）开一播时板的始放间帧中播帧。放。时间轴
7. 移动层，使运动轨迹呈曲线状
2019/4/25
19
（二）通过拖动路径创建时间轴动画
1. 插入一个层 2. 移动该层到动画的起始处，选中该层
3. 选择 修改时间轴录制层路径
4. 在页面上拖动层，创建想要运动的路径并在动 画结束的地方松开鼠标。
2019/4/25
20
（三）控制时间轴

年终总结时光轴h5模板

年终总结时光轴h5模板

年终总结时光轴h5模板以下是一个简单的年终总结时光轴H5模板的示例。

这个模板以时间轴的形式展示了过去一年的重要事件和成就，你可以根据需要进行修改和扩展。

```html<!DOCTYPE html><html><head><title>年终总结时光轴</title><style>/ 样式可以根据需要进行修改 /.timeline {list-style: none;padding: 0;}.timeline-item {position: relative;padding-bottom: 30px;}.timeline-item:before {content: '';position: absolute;top: 0;left: 50%;width: 10px;height: 100%;background-color: eee; }.timeline-content {margin-left: 60px;}h2 {margin-top: 0;}</style></head><body><h1>年终总结</h1><ul class="timeline"><li class="timeline-item"><div class="timeline-content"><h2>XXXX年XX月XX日</h2><p>完成项目A，成功上线</p></div></li><li class="timeline-item"><div class="timeline-content"><h2>XXXX年XX月XX日</h2><p>团队成员获得优秀员工奖</p></div></li><li class="timeline-item"><div class="timeline-content"><h2>XXXX年XX月XX日</h2><p>组织了团队建设活动，增进团队凝聚力</p> </div></li><!-- 添加更多事件 --></ul></body></html>```你可以将以上代码保存为一个`.html`文件，然后在浏览器中打开它。

Photoshop网页设计蒙版图层时间轴动画

Photoshop网页设计蒙版图层时间轴动画

Photoshop网页设计蒙版图层时间轴动画
Photoshop 网页设计蒙版图层时间轴动画
蒙版图层的时间轴动画效果中，除了普通图层中的位置、不透明度与样式外，还包括图层蒙版位置与图层蒙版启用两个属性。

图层蒙版位置是针对蒙版图形在画布中的位置属性，而图层蒙版启用是在文档中的启用与禁用效果。

1．蒙版位置动画
图层蒙版位置动画主要是利用蒙版图像的移动来创建的，为了不影响图层图像，必须禁用【指示图层蒙版链接到图层】图标。

当一个普通图层中创建图层蒙版后，单击图层蒙版位置的【时1-变化秒表】，创建第1个关键帧，如图1-44所示。

图1-44 创建第1个关键帧
关键帧。

单击【图层】面板中的【指示图层蒙版链接到图层】图标，禁用链接功能，移动蒙版中的图形，如图1-45所示。

图1-45 创建并编辑关键帧中的内容
单击面板底部的【切换洋葱皮】按钮后，单击【播放】按钮。

预览带有洋葱皮效果的动画，如图1-46所示。

使用时间轴特效教学讲义

使用时间轴特效教学讲义
关于时间轴特效
• 使用预建的时间轴特效可以用最少的步骤 创建复杂的动画。 可以对以下对象应用时 间轴特效：
• 文本 • 图形，包括形状、组以及图形元件 • 位图图像 • 按钮元件 • 注： 将时间轴特效应用于影片剪辑时，特
效将嵌套在该影片剪辑中。
பைடு நூலகம்
添加时间轴特效
• 向对象添加时间轴特效时，Flash 将创建一个图 层并将该对象移至此新图层。 对象放置于特效图 形内，而且特效所需的所有补间和变形都位于此 新创建的图层上的图形中。
删除时间轴特效
• 在舞台上，右键单击 (Windows) 或按住 Control 单击 (Macintosh) 具有要删除的时 间轴特效的对象，然后选择“时间轴特 效”>“删除特效”。
时间轴特效设置
时间轴特效设置
时间轴特效设置
编辑时间轴特效
• 在舞台上选择与特效关联的对象，然后执 行以下操作之一：
– 在“属性”检查器中单击“编辑”。 – 右键单击 (Windows) 或按住 Control 单击
(Macintosh) 该对象，然后选择“时间轴特 效”>“编辑特效”。
• 编辑设置并单击“确定”。
• 此新图层自动获得与特效相同的名称，而且其后 会附加一个数字，代表在文档内的所有特效中应 用此特效的顺序。
• 添加时间轴特效时，将向库中添加一个与该特效 同名的文件夹，它包含了在创建该特效时所使用 的元素。
时间轴特效设置
• 每种时间轴特效都以一种特定方式处理图 形或元件，并允许您更改所需特效的个别 参数。 预览窗口显示了您更改设置后发生 的变化。

网页制作-行为与时间轴及其应用

网页制作-行为与时间轴及其应用

① 【时间轴列表】： 是时间轴选择列表，在同一个文档中可以设置多个
时间轴，当用户创建多个时间轴时，利用该下拉列表可 选择当前时间轴。
② 【播放控制选项】： 它的3个按钮的功能分别是切换到第一帧、切换到
当前帧的上一帧、切换到当前帧的下一帧，文本框中是 当前帧的序号。若输入某个帧序号值，便可切换到该帧。 单击、这2个按钮并按住鼠标左键不放，可预览动画效 果。
例2 双击层1，改变状态栏中显示的文字。
layer1
例3 拖动层。 选中整个<body>……</body>
9.2 Dreamweaver 8 内置的动作和事件
Dreamweaver 8中自带了很多动作，使用它们可以在 网页中设计出各种效果。在本节中列出的动作是Netscape 6.0、Internet Explorer 6.0及以上版本支持的动作。在 【行为】面板的【动作】菜单中各项的意义如下所述。
当用户调整浏览器窗口或框架的尺寸时， 将触发该事件。 当捆绑数据源的当前记录指针改变时，将
触发该事件。 当捆绑数据源的当前记录指针将要改变时,
触发该事件。 当用户拖动上、下滚动条时，触发该事件。 在文本区域选定文本时，触发该事件。 当编辑框中的内容开始循环时，触发该事件。 提交表单时，触发该事件。 离开页面时，触发该事件。
18 【跳转菜单】： 设计者通过选择【插入】｜【表单对 象】｜【跳转菜单】命令，可在网页上创建一个跳转菜单。若 要修改这个跳转菜单，可在【行为】面板中双击【跳转菜单】 动作，在【跳转菜单】对话框中修改跳转菜单的各项参数。
19 【跳转菜单开始】：可以给跳转菜单添加不同的事件。
20 【转到 URL】： 这个动作用于在当前窗口或指定的框架中 打开一个新的页面。

网制作行为与时间轴及其应用

网制作行为与时间轴及其应用

16 【设置文本】： 级联菜单中有下列4个命令。 ① 【设置层文本】：用指定内容替代某个页面上旳层中旳内容
及格式，但不变化原来层旳属性（如背景颜色、背景图片等）。 ② 【设置框架文本】： 动态设置框架文本，以特定旳内容替代
框架格式和内容。 ③【设置文本域文字】： 能够用指定旳内容取代文本框中内容。 ④ 【设置状态条文本】： 可在浏览器左下角旳状态栏中显示文
layer1
layer2
◆插入层layer1和layer2，并在层中插入相应旳图片； ◆打开【层】面板，选中层Layer2，该层旳属性设置为不可见。
◆◆按选给快层中捷该L键a行ySe为hrif1，t添+并加F单4【，击显打事示开件-【隐列行藏表为层中】】下面旳三板动角。作形选。按中在钮层弹，La出在ye旳菜r1【单，显中单示选击隐示择达隐隐行藏该事当藏藏为层层件鼠层该添】。【 标 】 层加对单指 对 。o按话击n在 话 选M钮框【层 框 择o，中拟u中 事L选定选sae选 件y择】中Oe中【v按【层r1e层o钮显L上rn】aL，示M时ya，e【-oy，r隐u2其e显，显rs藏2意e示并示，层O义-单u层并】隐为t击】动藏单L“a【，作层击y鼠e显，】其【r标2示在旳意隐。指】弹动义藏此向按出作为】时对钮旳被“按层象设【添鼠钮L”置显加a标设y显，示到移e置表r-2 【中去行图”为像，】表2面被达板显当中示鼠。。标从层Layer1上移去时，隐藏层Layer2。
onAfterUpdate：当页面中旳数据元素完毕了数据源更新后， 触发该事件。
onBeforeUpdate：当页面中旳数据元素被修改时，触发该事件。 onBlur：取消选中对象时，触发该事件。 onFocus：选中指定对象时，触发该事件。
onBounce：当编辑框中旳内容到达其边界时，将触发该事件。 onChange：变化页面中数值时，将触发该事件。例如，当顾

第9章 时间轴动画及行为

第9章 时间轴动画及行为

图9.3 移动层轨迹到动画结束位置
9.2 创建并修改时间轴动画
在定义了时间轴的基本参数后，仍然可以使用时间轴添加帧、删除帧、 增加关键帧，增加、删除、改变对象，改变动画开始时间等。具体如下： 添加或删除关键帧 移动某一关键帧的层的位置 移动某一关键帧的播放时间 更改动画开始时间 延长动画的播放时间 动画的自动播放和循环播放 重命名时间轴 移动整个动画轨迹的位置

9.3 行为的基本概念和操作
9.3.2 显示和设置事件
onMouseMove(IE3，IE4，IE5)：当鼠标在指定元素上移动时，在该页 面元素上就会触发该事件。 onMouseOut(NS3，NS4，IE4，IE5)：当将鼠标在指定元素上移开时， 在该页面元素上就会触发该事件。 onMouseOver(NS3，NS4，IE3，IE4，IE5)：当鼠标第一次移动到 指定元素时触发该事件。该事件通常用于链接。 onMouseUp(NS4，IE4，IE5)：当按下的鼠标按键被释放时触发该事件。 onMove(NS4，IE5)：当窗体或框架移动时触发该事件。 onReadStateChange(IE4，IE5)：当指定元素的状态改变时触发该事 件。 onReset(NS3，NS4，IE3，IE4，IE5)：当表单内容被重新设置为默 认值时触发该事件。 onResize(NS4，IE4，IE5)：当访问者调整浏览器或框架大小时触发该 事件。 onRowEnter(NS4，IE4，IE5)：在当前捆绑数据源的当前记录指针改 变时触发该事件。 onRowExit(NS4，IE4，IE5)： 在当前捆绑数据源的当前记录指针改变 后触发该事件。
9.3 行为的基本概念和操作
9.3.3 行为的添加和编辑

JS时间轴效果（类似于qq空间时间轴效果）

JS时间轴效果（类似于qq空间时间轴效果）

JS时间轴效果（类似于qq空间时间轴效果）在上⼀家公司写了⼀个时间轴效果，今天整理了下，感觉有必要写⼀篇博客出来给⼤家分享分享当然代码还有很多不⾜的地⽅，希望⼤家多指点指点下，此效果类似于QQ空间或者⼈⼈⽹空间时间轴效果，当时也是为了需求研究了下qq空间逻辑(当然JS代码压缩了肯定看不到的)，只是当时研究了下他们HTML结构和css结构，所以仿照他们那种逻辑⾃⼰也写了⼀个出来。

先来看看是个什么样的吧！如下图所⽰：需求分析：左侧是⼀个时间列表右侧是⼀个时间控制抽，当时的需求是这样的：默认页⾯⼀打开只加载当前年份所有列表加载出来当前年份的控制轴展开出来，默认的焦点在最近的⽉份，如上图在当前的10⽉份或者下图的12⽉份，当滚动条滚动的时候再继续判断如果左侧滚动到⼏⽉份的时候那么右侧控制抽当前的焦点也在⼏⽉份，当滚动到上⼀个年份的时候那么当前的年份控制轴收缩起来上⼀个年份控制轴展开出来，如下图所⽰：当我们点击某⼀年份的时候滚动到当前的年份，当我点击某⼀年中某⼀⽉份的时候滚动到当前年份中对应的⽉份上来。

当然下⾯的代码我是⽤到的是淘宝的KISSY框架当然如果改成Jquery框架也是⼀样的,没有很⼤的差别只是⽤了⼀下"延迟加载"和⼀些选择器⽽已，⾸先我们如果要做成这样的话要知道有2个请求⼀个是左侧列表请求返回的数据⼀个是右侧的年份和⽉份返回的数据下⾯我们可以先来看看开发给我当时返回的数据格式是个什么样的，左侧列表的JSON数据如下图：默认情况下是最近年份当我滚动到2012年时候再继续发个2012年的请求把2012年的相对应的数据渲染出来，同理2011年也⼀样.再来看看年份和⽉份的JSON数据吧如下图：下⾯我⼀步步来分析下我当时的做法：1. ⾸先我需要HTML结构如下图所⽰：<div class="tao-allMonth-w990"><div class="tao-video-left J_Video_Left" id="J_Video_Left"></div><div class="tao-year-right"><div class="mod-timelinenav"><ul id="timelinenavpanel" class="timelinenav-panel isScroll"></ul></div></div></div>其中id="J_Video_Left"和id="timelinenavpanel"在初始化的时候是可以配置的也就是说他们叫什么名字并不重要，依赖于这个HTML结构。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

一、时间轴特效 timeline.js 算法思路： 1、点击某个时间点，将该时间点上的li元素添加active类 2、去除上一个li上已添加的active类 语法步骤： step1：定义一个变量，记录当前已经添加active类的li的索引号 step2：查找所有被点击的元素对象 step3：查找所有li元素对象 step4：为每个被点击的对象绑定单击事件 step5：为被点击的时间点li添加active类 step6：根据索引号变量的值，去除上一个li的active类 step7：将索引号变量的值更新为被点击的li的索引号 timeline.js源码：

window.onload = function(){ var //step1 curIndex = 0, //step2 timeLine = document.getElementById("timeline"), clickArea = timeLine.getElementsByTagName("s"), //step3 timePoint = timeLine.getElementsByTagName("li"); //step4 for(var i = 0,len = clickArea.length;i < len;i++){ (function( i ){ clickArea[i].onclick = function(){ //console.log( i );//测试 //step5 timePoint[i].className = "active"; //step6 timePoint[curIndex].className = ""; //step7 curIndex = i; }; })( i ); } }; timeline.css源码： html,body{ background: #c2edf4; }

.container { width: 1000px; margin: 0 auto; background: url(data:image/png); repeat -y 165px 0; }

/* 默认样式 */ .timeline li{ height: 160px; position: relative; }

.timeline li div { position: absolute; }

.timeline .check .spring{ position: absolute; display: block; width: 51px; height: 6px; left: 105px; top: 47px; background: url(data:image/png); }

.timeline .check s { position: absolute; display: block; left: 157px; top: 40px; width: 16px; height: 16px; border: 3px solid #41838E; background: #fff url(../images/sprite.png) 1px -100px; cursor: pointer; } .timeline .check .line { position: absolute; width: 38px; height: 1px; background: #fff; left: 180px; top: 50px; font-size: 1px; }

.timeline .thumb { width: 82px; top: 13px; left: 32px; }

.timeline .thumb img { width: 80px; height: 72px; border: 5px solid #41838E; }

.timeline .thumb span { display: block; height: 30px; line-height: 30px; color: #41838E; text-align: center; font-size: 12px; font-family: Arial black; }

.timeline .content { left: 234px; top: 10px; width: 730px; border-left: 5px solid #41838E; background: #fff }

.timeline .content h3{ margin: 23px 15px; font-size: 30px; font-family: microsoft yahei; } .timeline .content p{ display: none; }

.timeline .content b{ position: absolute; display: block; width: 17px; height: 34px; background: url(../images/sprite.png); left: -21px; top: 25px; }

/* 高亮样式 */ .timeline li.active{ height:250px; }

.timeline li.active div{ position: absolute; }

.timeline .active .check .spring{ left:110px; top: 47px; background: url(data:image/png) }

.timeline .active .check s { left: 152px; top: 36px; width: 20px; height: 10px; border: 5px solid #fff; background: #F26328 url(../images/sprite.png) 2px -200px; cursor: pointer; }

.timeline .active .check .line{ background: #F26328; width: 43px; left: 176px; top: 50px; }

.timeline .active .thumb{ width: 110px; top: 10px; left: -10px; }

.timeline .active . thumb img { width: 110px; top: 10px; left: -10px; }

.timeline .active .thumb span { color: #F26328; }

.timeline .active .content { border-left: 5px solid #F26328; }

.timeline .active .content p { display: block; margin: 23px 15px; line-height: 1.5; font-size:14px; }

.timeline .active .content b { background: url(../images/sprite.png) 0 -43px; left: -20px; } timeline.html源码: timeline 10:00 白宫否认MH370航班降落美军事级第一 人民网旧金山3月18日电 美国白宫方面今日正式否认 了失联客机已在印度洋中部某美军军事基地降落的传闻 7:30 第12天最新消息汇总：调查焦点在于机上机组人员 ①可排除中国乘客涉嫌恐怖和破坏活动的嫌疑②泰国空 军司令证实曾捕获MH370信号

人民网旧金山3月18日电 美国白宫方面今日正式否认 了失联客机已在印度洋中部某美军军事基地降落的传闻

①可排除中国乘客涉嫌恐怖和破坏活动的嫌疑②泰国空 军司令证实曾捕获MH370信号