lightbox js lash

flash加载图片如何实现过渡效果

我来回答:这个很简单,我告诉你正解

这里面用到的技术: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=“

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希望对你有用!

lightbox js 中放大后的图片被其他flash档住了!!!

这里面用到的技术: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=“
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/

如何使用Lightbox 2

  Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.
  使用方法如下:
  步骤 1 – 安装
  1、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》
  2、外调 Lightbox CSS 文件 (或添加 Lightbox 样式到现行的样式表中).
  《link rel=“stylesheet“ href=“css/lightbox.css“ type=“text/css“ media=“screen“ /》
  3、检查 CSS 并确定调用的 prev.gif 和 next.gif 文件在正确的位置. 同样要确定调用的 loading.gif 和 close.gif 文件及 lightbox.js 文件在正确的位置.
  步骤 2 – 激活
  1、添加 rel=“lightbox“ 属性到任何一个链接标签去激活lightbox. 例如:
  《a href=“images/image-1.jpg“ rel=“lightbox“ title=“my caption“》image #1《/a》
  可选择项: 使用 title 属性加上说明.
  2、如果有一套想分组的相关图片, 接着上一部并且又在 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》
  3、没有限定每个页面的图片组数量和每个图片组图片的数量。