◎ 设为首页
◎ 收藏本站
◎ 联系我们
首 页
网络资讯
教程资料
免费资源
建站指南
休闲娱乐
经典整站
访客留言
当前位置:
首 页
>>
教程资料
>>
网页制作
>> 轻松实现网页Flash图片幻灯特效
最 新 推 荐
淘宝网店“设计装修”..
网页制作常见105个问..
使用FrontPage2000注..
网页制作常用代码
颜色代码大全
热 门 排 行
北京奥运会倒计时代码
如何在网页中插入Flas..
网页自动点击广告代码
星空动态星空背景特效..
如何用Frontpage下载..
网页两侧浮动广告代码
离开时自动提示设为首页
颜色代码大全
怎么使网页跳转地址栏..
站长常用广告代码的表..
淘宝网店“设计装修”..
在网页上设计飘动广告
网页制作常用代码
网页常用特效整理:高..
网页制作常见105个问..
使用css设置iframe样式
最 近 更 新
CSS在表格边框上的美..
Flash文件中多个swf调..
圆角边框的代码
股票即时行情查询系统
万能音.视频在线转换..
仿3721窗口拖动的代码
美化的GOOGLE广告代码
修改discuz5.5,让广..
一些所谓的CSS的“顶..
中英文双语导航菜单
广 告 位 置
站 内 搜 索
关键词
搜索方式
文章标题
文章作者
搜索范围
所有栏目
网络资讯
本站动态
教程资料
免费资源
建站指南
休闲娱乐
经典整站
网络资讯
自建站点
休闲网摘
搜索引擎
网站优化
赢利模式
免费空间
免费域名
免费邮箱
其他免费
网页制作
网站编程
设计之窗
资源攻略
其他资料
网络安全
数据库和服务器
企业建站
建站其他
QQ资源
网赚资源
精美图片
影视音乐
八卦消息
推荐源码
游戏世界
体育天地
精确匹配
轻松实现网页Flash图片幻灯特效
来源:
盛绿设计
等级:默认等级
发布于2006-12-06 14:07 被读89次 【字体:
大
中
小
】
不少朋友注意到,ENet、新浪、搜狐等各大网站纷纷使用了一组图片幻灯的Flash 特效(演示地址http://www.lihot.cn/other/flash/,演示文件下载地址:http://www.lihot.cn/other/flash.rar),它能够将新闻图片以幻灯片的方式循环放映出来,还带有非常漂亮的切换效果,点击图片就能进入相应的页面,这样不仅节约了宝贵的网页版面,还能使页面充满动感。这种效果是怎么实现的呢?下面我就来介绍给大家。
网页图片幻灯特效分析:
不少朋友想发扬"拿来主义"的作风,把特效代码直接用到自己的网页上,但是在查看源文件时却发现这组特效是用Flash来实现的,于是就放弃了。如果仔细分析一下源文件,就不难发现Flash仅仅是一个特效"外壳",具有实际意义的图片、链接和文字说明其实都是载入的外部变量。在拿到这个Flash文件之后,想实现网页图片幻灯特效,要做的仅仅是修改这些变量。
图片幻灯特效的制作:
第一步:下载演示文件并解压,可以看到index.htm、pixviewer.swf、pixviewer.fla三个文件和几幅演示图片。其中要修改的就是网页文件index.htm,pixviewer.swf是实现特效的Flash文件,pixviewer.fla为Flash的源文件,感兴趣的朋友可以研究一下。
第二步:用Dreamweaver或记事本打开网页文件,可以看到内嵌的Java脚本中定义了如下变量:
var focus_width=250 // 图片宽度
var focus_height=190 // 图片高度
var text_height=23 // 文字部分的高度
var swf_height = focus_height+text_height // 总高度
var pics='1.jpg 2.jpg 3.jpg'
var links='1.jpg 2.jpg 3.jpg'
var texts='星海湾夜景 海上日出 贝壳博物馆'
"pic"变量中指定了欲载入的图片,这里使用了相对路径,如果用绝对路径,那就一定要改成"http://www.lihot.cn/other/flash/1.jpg"的形式,各图片路径用" "隔开,但是图片的数量最多不能超过六个;"links"和"texts"则分别定义了图片的链接地址和图片的名称,修改的方法与"pic"变量相同,不再赘述。
第三步:接下来设定文字部分的背景颜色。在第二个"document.write(' ')"中找到
,修改"value"的值就行了。
现在,在浏览器中打开index.htm,就能看到精美的Flash图片幻灯特效了,在这里图片不仅能够循环播放,浏览者而且还能点击编号,直接跳转到相应的图片,非常方便!
相关专题:
暂无相关专题
上一篇:
CSS样式表:详细介绍IE7新支持的选择器
下一篇:
网页中嵌入Flash的方法讨论
共有评论 0 条 网友评分
查看全部
【发表评论】
评分:1分
2分
3分
4分
5分
Powered By
Www.
Xydw
.COM
Ver1.14
管理
Copyright © 2004-2005
盛绿设计
All Right Reserved.
XCMS
冀ICP备06026128号