我来回答:这个很简单,我告诉你正解 这里面用到的技术:ajax,div层的概念,javascript的第三方特效库div层的概念:类似于一个容器,能够容纳图片等。用代码来解释就是:“
这里存放图片
”略缩图和大图:图像可以用代码来控制显示的大小,所以你能够看到小图和大图当你点击略缩图示,你最先看到一块白色区域,中间的地方有个加载等待图案,这里面用到了ajax技术,同时用到了div层的概念(稍候解释)。当ajax接收到了图片加载完毕的信息后,会告知浏览器,可以显示图片了。第二步,图片显示在白色区域中。为什么有些时候白色区域会变小?因为这里又用到了第三方的js函数库,他的作用的过渡效果,即div层的移动。所以你会看到白色区域慢慢的向图片边缘靠拢。问什么你点击不到其他地方?用技术的角度来解释,就是在你第一次点击小图的时候,他已经自动创建的一个透明的div层在上面,所以你点不到他这就类似于你在桌子上放一幅画,而在画的上面放上玻璃板,当你用笔去往上写东西的时候,当然不会写到画上面。我说,大哥,你明白了吗?我解释的不容易啊,给分吧********************************************我是搞web开发的,如果用我们的专业术语来给你解释,你能明白吗?你有什么依据来证实你说的是对的?代码的编译原理,程序执行的先后顺序,我能够用我的经验判断出来。如果你想真正弄清楚这是怎么一回事,我希望你看看javascript和html基本语法知识(特别是div的用法,设置他的style的z-index属性和filter属性,然后就是js的基本语法和dom规范),然后再来提问。这样效果会好一些,前提是你愿意在这上面花费一些时间*********************************************页面确实有flash控件,但只有一个地方用到了,而图片显示的时候没有用到。共两个文件如下(webroot代表应用根目录)名称:flash_ad_relay.swf目录:webroot/comic/flasher/ads_data/名称:imgad.swf目录:webroot/comic/flasher/ads_data/说明:通过观察ads.htm(目录在webroot/comic/flasher/)文件代码,能够判断,flash_ad_relay.swf应该是google提供的一个flash控件,其作用是控制广告程序的加载进度。而imgad.swf则是一个广告(ad)程序,当当网的那个,在页面最下面。总体来说flash_ad_relay.swf用来控制imgad.swf文件加载的进度并且显示。入口方法:tianchaoyu.html文件中此行代码用来加载flash广告程序,这应该是遵循了google的命名规范和目录结构。上面这个是我个人推测的,但只有这一个地方用到flash文件,图片显示完全没有用到。**********************************************lightbox.css文件目录:http://www.songzg1.com/comic/flasher/css/lightbox.css说明:#outerImageContainer{position: relative;background-color: #fff;width: 250px;height: 250px;margin: 0 auto;}上面为lightbox.css代码片断,width: 250px;height: 250px;控制了图片第一次点击的时候初始化大小为250像素*250像素在17寸1024*768分辨率上。加载的过程中用到了loading.gif图片(http://www.songzg1.com/comic/flasher/images/loading.gif),你可能是因为这个原因把它理解成flash吧。这只是一张gif图而已。当点击图片,图片数据传输完毕之后,能够获得图片的宽高属性,根据这些属性,那个div层(
![]()
)会自动扩大或缩小,以适应新的图片。这就是你看到的过渡效果。处理放大缩小过渡效果的文件是lightbox.js,而effects.js也有一些坐标变化的处理。lightbox.js是一个简单实用的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.。这个网站上用的是2.02版本,它是由Lokesh Dhakar人于20060331日创建的,可以通过http://www.huddletogether.com察看相关信息。最后介绍使用方法,非常easy**********************************************先说一下其他两个js框架prototype.js它是一个非常优雅的javascript基础类库,对javascript做了大量的扩展,而且很好的支持Ajax,国外有多个基于此类库实现的效果库,也做得很棒。像前面提到的lightbox.js和后面要说的effects.js是基于prototype.js实现的,他们通常结合使用。scriptaculous.js和effects.js这是个动画效果库。scriptaculous 包含以下几个部分:builder.js :提供了一种方便的建立html元素的方法controls.js :包含自动提示和动态编辑两个控件dragdrop.js : 提供元素拖放的功能effects.js : 设计优良的ajax效果库,这篇文章要讲的就是这个slider.js : 一个滑动条控件effects.js中提供了两种类型的动画效果,一种称为核心效果(core effect),一种称为组合效果(combination effect)**********************************************结合使用第一步Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库. 你将需要外调这三个 Javascript 文件在你的 header.代码:第二步外调 Lightbox CSS 文件 (或添加 Lightbox 样式到你现行的样式表中).
第三步检查 CSS 并确定调用的 prev.gif 和 next.gif 文件在正确的位置. 同样要确定调用的 loading.gif 和 close.gif 文件及 lightbox.js 文件在正确的位置.方式一:添加 rel="lightbox" 属性到任何一个链接标签去激活lightbox. 例如:image #1方式二:如果你有一套你想分组的相关图片, 接着上一部并且又在 rel 属性中添加一个带方括号的组名. 例如:image #1image #2image #3****************************************************************************************基本上就是这么用,我都写的快吐血了要是还有不明白的,提出来,需要详细代码的话,我可以给你做一个demolightbox下载地址:http://www.blueidea.com/articleimg/2006/08/3904/lightbox2.02.zipprototype.js下载地址(你只需要下在lightbox就可以了,里面包含着个文件了):http://www.prototypejs.org/ 26906希望对你有用!