打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

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

在网页中实现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不仅可以使文字滚动,也可以使图片滚动,只要在<marquee>和</marquee>间插入<img src=url>就可以了。下面我们就把全景图片插入到右侧的单元格中,代码如下:

 

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

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

 


 






 


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

 

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

 

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

 

 

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

 

全景效果图

三百六十度

全方位展示画面

乐趣多多!

TOUCH8施杨制作

 

这里为您提供,大家可以仔细分析一下代码代码。实例下载
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
使用FrontPage制作网页的基本方法
图片从左向右滚动代码
网页滚动代码
图片滚动代码
8个Excel小技巧,让你半小时工作缩短到3秒
滚动字幕制作
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服