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

编程之家2023-11-01147次浏览

大家好，关于lightbox.js很多朋友都还不太明白，今天小编就来为大家分享关于lightbox js 中放大后的图片被其他flash档住了。!!!的知识，希望对各位有所帮助！

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="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.

代码：

第二步

外调 Lightbox CSS文件(或添加 Lightbox样式到你现行的样式表中).

第三步

检查 CSS并确定调用的 prev.gif和 next.gif文件在正确的位置.同样要确定调用的 loading.gif和 close.gif文件及 lightbox.js文件在正确的位置.

方式一：添加 rel="lightbox"属性到任何一个链接标签去激活lightbox.例如:

<a rel="external nofollow" rel="external nofollow" href="images/image-1.jpg" rel="lightbox" title="my caption">image#1</a>

方式二：如果你有一套你想分组的相关图片,接着上一部并且又在 rel属性中添加一个带方括号的组名.例如:

<a rel="external nofollow" rel="external nofollow" href="images/image-1.jpg" rel="lightbox[roadtrip]">image#1</a>

<a rel="external nofollow" href="images/image-2.jpg" rel="lightbox[roadtrip]">image#2</a>

<a rel="external nofollow" 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/

html 弹出层

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>LIGHTBOX EXAMPLE</title>

<style>

margin:0;

padding:0

}

html, body{

height: 100%;

width: 100%;

font-size:12px

}

.white_content{

display: none;

position: absolute;

top: 25%;

left: 25%;

width: 50%;

padding: 6px 16px;

border: 12px solid#D6E9F1;

background-color: white;

z-index:1002;

overflow: auto;

}

.black_overlay{

display: none;

position: absolute;

top: 0%;

left: 0%;

width: 100%;

height: 100%;

background-color:#f5f5f5;

z-index:1001;

-moz-opacity: 0.8;

opacity:.80;

filter: alpha(opacity=80);

}

.close{

float:right;

clear:both;

width:100%;

text-align:right;

margin:0 0 6px 0

}

.close a{

color:#333;

text-decoration:none;

font-size:14px;

font-weight:700

}

.con{

text-indent:1.5pc;

line-height:21px

}

</style>

function show(tag){

var light=document.getElementById(tag);

var fade=document.getElementById('fade');

light.style.display='block';

fade.style.display='block';

}

function hide(tag){

var light=document.getElementById(tag);

var fade=document.getElementById('fade');

light.style.display='none';

fade.style.display='none';

}

</script>

</head>

<body>

内容1内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

</div>

内容2

</div>

</body>

</html>

关于lightbox.js和lightbox js 中放大后的图片被其他flash档住了。!!!的介绍到此就结束了，不知道你从中找到你需要的信息了吗？如果你还想了解更多这方面的信息，记得收藏关注本站。

南宁网页设计(南宁网站制作需要注意什么)链接分析(链接分析是什么意思)