在网页中实现360度全景滚动效果图
来源:不详 责任编辑:栏目编辑 发表时间:2013-07-02 06:27 点击:次
在网页上欣赏到360度的全景照片是一件很有趣的事,不要担心制作过程会很复杂,我们在这里介绍一种最简单的方法,同样可以达到效果,学起来很容易,只要会一点点HTML和CSS的基本语法就足够了。
先看看效果,如下所示:
注意:这个效果只有用IE浏览器才能看到。下面我们来看看整个的制作过程:
第一步:准备一张全景图片。
您可以自己拍也可以从网上下载。当然如果您摄影技术足够高的话我还是建议你自己拍一张(题材如家庭居室的全景等),这样显得更加生动一些;如果你和我一样是个摄影菜鸟,那么还是在网上找一幅吧,如果也不是那么好找,我这里提供给你两幅照片:
前者是一个棒球场的全景,后者是一个办公室的全景,图片名称分别是yl-020315-3d.jpg和yl-020315-3d2.jpg。
第二步:做一个表格存放图片
用Dreamweaver等网页制作软件做一个1行2列的表格,以便在左边的单元格内放置滚动的文字说明,右边的单元格放置全景图片。在表格属性中作如下设置:border="0" cellspacing="0" cellpadding="0" height="150" width="220",注意高度和所选的全景图片一致;左侧单元格宽度为20,右侧为200;为表格做个边框,我们可以利用CSS定义:
相关新闻>>
- [将web进行到底之长大在线系列教程] === 第四章 运用Dreamweaver制作
- Dreamweaver CS5在onLoad运行RecordsetFind.htm时出错
- Dreamweaver制作网页时使用CSS的事项
- Dreamweaver解决网页制作中的空格问题
- 妙用Dreamweaver MX共享Word XP文件
- 用Dreamweaver MX控制页面元素
- Dreamweaver MX 2004 新功能:图片处理
- Dreamweaver MX 2004 新功能试用:表格
- 怎样在dreamweaver中让部分或全部代码大小写转换
- Dreamweaver 4 中用CSS样式表来美化网页
最新推荐更多>>>
- 发表评论
-
- 最新评论 更多>>