诚实守信的古语:在网页中实现360度全景滚动效果图

来源：百度文库编辑：九乡新闻网时间：2024/07/15 01:57:23

在网页中实现360度全景滚动效果图

时间:2006-07-29来源: 作者:图腾收集发布人: 点击: 次关键字：迅雷 Google Baidu 滚动全景网页在网页上欣赏到360度的全景照片是一件很有趣的事，不要担心制作过程会很复杂，我们在这里介绍一种最简单的方法，同样可以达到效果，学起来很轻易，只要会一点点html和css的基本语法就足够了。　　先看看效果，如下所示：全景效果图三百六十度全方位展示画面乐趣多多！TOUCH8施杨制　　在网页上欣赏到360度的全景照片是一件很有趣的事，不要担心制作过程会很复杂，我们在这里介绍一种最简单的方法，同样可以达到效果，学起来很轻易，只要会一点点html和css的基本语法就足够了。

　　先看看效果，如下所示：

全景效果图

三百六十度

全方位展示画面

乐趣多多！

TOUCH8施杨制作

注重：这个效果只有用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定义：style="border:#333366 3 double"，即边框颜色采用#333366，宽度为3，线形为双线。
　　然后我们再给两个单元格中间设置分界线，即对左侧单元格使用样式：style="border-right:#333366 3 double"，颜色线型和表格外框一致；接着将左侧单元格的背景色设置为#333366，把右侧单元格的背景设置为yl-020315-3d.jpg，即作成如下模样：

第三步：使全景图片移动

　　要使图片移动的方法很多，如用Dreamweaver的层和时间线，用javascript，甚至可以用java applet,不过我们这里用简单的：marquee。

　　我们先了解一下marquee的主要参数：

注重，marquee不仅可以使文字滚动，也可以使图片滚动，只要在和间插入

就可以了。下面我们就把全景图片插入到右侧的单元格中，代码如下：

然后我们对它添加一些行为：

另外，我们还可以加上标题：style="title:标题内容"；改变鼠标式样：style="cursor:hand"等，全部代码如下：

假如你细心的话会发现图片滚动时头尾对接不上，解决的办法是在插入图片的地方重复多插几次图片，或者使用一点javascript语句让图片循环滚动。

第四步：制作滚动的文字说明

　　制作滚动文字对大家来说是家常便饭，至于怎样把文字竖排也不难，只要加上如下样式：style="writing-mode:tb-rl"即可，其中tb表示top-bottom，rl表示right-left。代码如下：

好了，最后我们看看另外一幅图片的效果吧：

全景效果图

三百六十度

全方位展示画面

乐趣多多！

TOUCH8施杨制作

这里为您提供，大家可以仔细分析一下代码代码。实例下载

在网页中实现360度全景滚动效果图简单实现网页图片无缝滚动代码在网页中实现点击更换图片/学习园地简单实现网页图片无缝滚动代码12 简单实现网页图片无缝滚动代码111 简单实现网页图片无缝滚动代码ads PowerPoint 2007中实现滚动字幕效果使图片在网页上滚动的方法在图片中如何使用滚动字幕？梦在追求中实现网页滚动文字 Dreamweaver轻松实现网页中透明Flash效果来回滚动代码及效果图来回滚动代码及效果图如何在网页中加入背景音乐------ 春雨在网页制作中源代码的标记在网页中插入背景音乐代码a 在自己的网页中嵌入地图在服务大局中实现大发展在电脑中实现真人笔迹签名在Scrum中实现敏捷建模在电脑中实现真人笔迹签名在电脑中实现真人笔迹签名张维迎：道德只能在市场中实现