用Dreamweaver实现全景图浏览效果

  是否有见过游戏中的全景图效果,充满动画与真实感,让人难以忘怀。在本例中就介绍如何制作这样的网页

  效果说明

  建立文件,选择一张全景图素材,然后插入少量的代码就可以实现全景图浏览效果,如图 43-1 所示。实际效果请浏览随书光盘中《源文件》目录下的相关文件。

  创作思想

  打开 Dreamweaver MX 2004 软件新建页面并插入表格,在表格的 HTML 代码中插入 <marquee> 标签,实现全景图浏览。

  操作步骤

  ( 1 )新建一个基本的 html 文件,然后保存页面为“ 43.htm ”。

  ( 2 )插入表格。要使全景图在指定的区域中走动,必须先插入表格,如图 43-2 所示。

   提示:图 43-2 中的第五步操作必须将高度设置得与图片一样高。

  ( 3 )插入标签。然后在工具栏中单击【标签选择器】图标,打开【标签选择器】对话框,在该对话框中设置参数,插入 <marquee> 标签,如图 43-3 所示。

  提示:标签选择器对话框中汇集了一些常用的标签,如 HTML 标签、 CFML 标签、 ASP.NET 标签等,通过双击相应的代码标签,就可以很轻松地在代码视图中插入代码。

 

  ( 4 )设置参数。接着设置 <marquee> 参数,如图 43-4 所示。

  ( 5 )再接下来需要在代码视图里手动添加代码。回到代码面板,将光标切换到 <marquee> </ marquee> 标签的中间,然后添加下面的函数:

<script language=javascript> 
for(t=1;t<=1000;t++) 
document.write("<img src=myoffice.jpg width=906 height=150>") 
</script>

  (读者可打开【光盘】|【源文件】|【实例 43 】|【 43.1.txt 】文件,直接复制代码)

  提示: <marquee> 中各参数的含义如表 43-1 所示。读者可根据这些参数表对图 43-3 中第三步操作里的 HTML 代码进行调整。

  ( 6 )保存文件,完成操作。

  全景图合适用于厂房、展厅等大型演示上,因为单一镜头图片不能让用户看到全景,通过全景图则能够让需要展示的大型场景一览无余。

时间: 2024-08-24 13:28:40

用Dreamweaver实现全景图浏览效果的相关文章

CSS实例教程:微博新版查看大图前后浏览效果

文章简介:微博新版查看大图前后浏览的另外一种实现. 一.新浪微博新版查看大图 你说我是先讲些废话呢还是讲些废话呢~~ 搜索"新版微博查看大图",结果前三如下: 其实这种效果,我在人人先见到,然后贴吧啊,还有我不使用的QQ空间等--按照我以往的经验,估计是从老美哪个网站copy过来的,然后,A闯红灯,B闯红灯,C也闯红灯,此时D觉得自己不闯红灯就不正常,于是也朝着红色的方向大步夺去. 数据上的好与不好,我不是专业的,随便乱说会烂舌头的.从个人感性认识上,微博似乎多了一件饰品. 青菜萝卜各

jquery仿百度经验滑动切换浏览效果

 jquery仿百度经验滑动切换浏览效果   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79

Win7系统的最佳浏览效果怎么调节

  不知道你是否会这么认为,就是同一张照片上在别人的电脑上打开非常漂亮,而在你的电脑上打开却觉得不好看呢?如果你有遇到这种情况,可以继续跟随小编来看一下本篇教程. 想要在自己系统上体验到最佳的浏览效果,一定要记得深度win7系统下的Screen Calibration屏幕校准调节,你可以适当的调节屏幕亮度,通过屏幕亮度的调节你将不会再遇到浏览照片或者文字时觉得不舒服的问题. 一.通过键盘上的快捷键Win+R打开运行对话框,然后输入DCCW命令,按住回车键即可打开"显示颜色校准"的窗口.

iframe嵌套HTML5页面如何不影响浏览效果

问题描述 iframe嵌套HTML5页面如何不影响浏览效果我有个HTML5的页面,是用.net开发的,里面有逻辑操作,是手机web浏览的.现在的需求是用一个iframe嵌套,请问各位大神,有啥好的方法可以让手机浏览不会变形? 解决方案 解决方案二:自己顶一发!!!解决方案三:你先嵌进去再后看看,碰上啥问题再过来发帖.解决方案四:引用2楼yahle的回复: 你先嵌进去再后看看,碰上啥问题再过来发帖. 变形了,原HTML5页面的手机模式查看,导航的字体很大,但是到了iframe里面导航字体变得很小.

图片浏览效果怎么做,有前后切换的效果

问题描述 图片浏览效果怎么做,有前后切换的效果 做电视盒子的图片浏览效果,要求当前界面显示三张图片,选中的在中间,且变大,没有选择的在两边,变小变暗,切换图片时有前后切换的效果. 求大神指导

WPF换肤之八:创建3D浏览效果

原文:WPF换肤之八:创建3D浏览效果 上节中,我们展示了WPF中的异步以及界面线程交互的方式,使得应用程序的显示更加的流畅.这节我们主要讲解如何设计一个具有3D浏览效果的天气信息浏览器. 效果显示 下面我们看截图: 是不是能够感受到一种与众不同的感觉.如果你能够感受到它的与众不同,这也是我本节所要达到的目标. 实现方式 上面的只是一个简单的3D图形,它的产生需要依赖于WPF中的MeshGeometry3D对象,这个对象按照微软官方的解释就是用于生成3D形状的三角形基元,它有三个比较重要的属性:

jquery仿百度经验滑动切换浏览效果_jquery

jquery仿百度经验滑动切换浏览效果 $(function() { wordStrong(); $("#content ul").width($("#content ul li:first").width()*$("#content ul li").length); $("#header .top_right .vote").hover(function() { $(this).children(".hover-t

JavaScript仿百度图片浏览效果_javascript技巧

本文实例为大家分享了js图片浏览效果的具体代码,供大家参考,具体内容如下 在线地址:http://www.hui12.com/nbin/demo/imgskim/index.html https://nbin2008.github.io/demo/imgskim/index.html 效果图: index <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>仿

Dreamweaver制作网页幻灯片效果的方法

作为一位不懂代码的业余网页制作爱好者,常常羡慕专业程序人员在浏览器中编制出的效果超酷的一些多媒体作品.唉,无奈程序那东东,酶涩南学,非一日之功,需要良好的逻辑思维能力和足够的磨练方可成就.是不是不会程序,就永远就不能实现自己的创意和想法了呢?非也!现在我们要制作的就是在网页中的一个幻灯片播放器.当用户按下控制盘上的"PLAY"键时图片将作幻灯片似的连续循环播放.按下"PAUSE"时,播放中的图片就停留在当前位置.按下"RESTART"键时,幻灯片