flash加载图片如何实现过渡效果
发布网友
发布时间：2022-04-24 12:09
共1个回答
热心网友
时间：2022-05-13 20:03
我来回答：这个很简单，我告诉你正解
这里面用到的技术：ajax，div层的概念，javascript的第三方特效库
div层的概念：类似于一个容器，能够容纳图片等。用代码来解释就是：“<div>这里存放图片</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文件中<script type="text/javascript" src="
http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
此行代码用来加载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层（<div><img /></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.
代码：
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
第二步
外调 Lightbox CSS 文件 (或添加 Lightbox 样式到你现行的样式表中).
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
第三步
检查 CSS 并确定调用的 prev.gif 和 next.gif 文件在正确的位置. 同样要确定调用的 loading.gif 和 close.gif 文件及 lightbox.js 文件在正确的位置.
方式一：添加 rel="lightbox" 属性到任何一个链接标签去激活lightbox. 例如:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
方式二：如果你有一套你想分组的相关图片, 接着上一部并且又在 rel 属性中添加一个带方括号的组名. 例如:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
********************************************
********************************************
基本上就是这么用，我都写的快吐血了
要是还有不明白的，提出来，需要详细代码的话，我可以给你做一个demo
lightbox下载地址：
http://www.blueidea.com/articleimg/2006/08/3904/lightbox2.02.zip
prototype.js下载地址（你只需要下在lightbox就可以了，里面包含着个文件了）：
http://www.prototypejs.org/ 26906希望对你有用！
参考资料：. ewlwcpp
