一个页面中有多个图片,然后点击每一个图片就会有显示一个带有图片的div出现,这种情况用js怎么做?

一个页面中有多个图片,然后点击每一个图片就会有显示一个带有图片的div出现,这种情况用js怎么做?求大神帮忙

第1个回答  2018-01-09
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>



<title>Lightbox JS v2.0</title>



<meta http-equiv="content-type" content="text/html; charset=gb2312" />

<meta http-equiv="content-language" content="en" />



<meta name="description" content="Lightbox JS v2.0 is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers." />

<meta name="keywords" content="lightbox, lightbox2, lightbox v2.0, lightbox js, lokesh, dhakar" />



<link rel="shortcut icon" type="image/ico" href="/images/favicon.gif" />

<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />



<script src="js/prototype.js" type="text/javascript"></script>

<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>

<script src="js/lightbox.js" type="text/javascript"></script>

</head>

<body>





<div id="topborder"></div>



<div id="sidebar">

<h1><a href="http://www.huddletogether.com/projects/lightbox2/">Lightbox JS <em>v2.0</em></a></h1>

<p><a href="http://www.huddletogether.com">by Lokesh Dhakar</a> 译: <a href="mailto:minicroc@gmail.com">croc</a></p>

<p><a href="http://www.huddletogether.com/projects/lightbox2/">点此查看原文</a></p>

<ul id="nav">

<li><a href="#overview">概要</a></li>

<li><a href="#example">例子</a></li>

<li><a href="#how">如何使用</a></li>

<li></li>

<li></li>

<li></li>

</ul>

<!-- <div>



<a href="http://digg.com/submit?phase=2&amp;url=http://www.huddletogether.com/projects/lightbox2/"><img src="/images/digg.gif" width="16" height="16" alt="Digg icon" /></a>

<a href="http://del.icio.us/post?url=http://www.huddletogether.com/projects/lightbox2/&amp;title=Lightbox%20JS%20v2.0"><img src="/images/delicious.gif" width="16" height="16" alt="Delicious icon" /></a>



</div>-->

</div>



<div id="content">



<a name="overview"></a>

<div class="section first">

<h2>概要</h2>

<p>Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.</p>

<h3>最新更新 Version 2.0</h3>

<ul>

<li><strong>图片集:</strong> 分组相关的图片并且能轻松的导航它们</li>

<li><strong>视觉特效</strong>: 奇特的自适应调整</li>

<li><strong>向后兼容</strong>: yes!</li>

</ul>

</div><!-- end .section -->





<a name="example"></a>

<div class="section clearfix">



<h2>例子</h2>



<h3>单一图片</h3>

<div>

<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>

</div>

<div>

<a href="images/image-2.jpg" rel="lightbox" title="Optional caption."><img src="images/thumb-2.jpg" width="100" height="40" alt="" /></a>

</div>



<h3 style="clear: both;">图片集</h3>



<div>

<a href="images/image-3.jpg" rel="lightbox[plants]" title="Mouseover image to move forward."><img src="images/thumb-3.jpg" width="100" height="40" alt="Plants: image 1 0f 4 thumb" /></a>

</div>

<div>

<a href="images/image-4.jpg" rel="lightbox[plants]" title="Alternatively you can press the N key." ><img src="images/thumb-4.jpg" width="100" height="40" alt="Plants: image 2 0f 4 thumb" /></a>

</div>

<div>

<a href="images/image-5.jpg" rel="lightbox[plants]" title="The script preloads the next image in the set as you're viewing."><img src="images/thumb-5.jpg" width="100" height="40" alt="Plants: image 3 0f 4 thumb" /></a>

</div>

<div>

<a href="images/image-6.jpg" rel="lightbox[plants]" title="Press X to close"><img src="images/thumb-6.jpg" width="100" height="40" alt="Plants: image 4 0f 4 thumb" /></a>

</div>



</div><!-- end .section -->





<a name="how"></a>

<div>

<h2>如何使用:</h2>

<h3>步骤 1 - 安装 </h3>

<ol>

<li>Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库. 你将需要外调这三个 Javascript 文件在你的 header.

          <pre><code>&lt;script type=&quot;text/javascript&quot; src=&quot;js/prototype.js&quot;&gt;&lt;/script&gt;

&lt;script type=&quot;text/javascript&quot; src=&quot;js/scriptaculous.js?load=effects&quot;&gt;&lt;/script&gt;

&lt;script type=&quot;text/javascript&quot; src=&quot;js/lightbox.js&quot;&gt;&lt;/script&gt;

</code></pre>

</li>

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

<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;css/lightbox.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /&gt;

</code></pre>

</li>

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

</ol>

<h3>步骤 2 - 激活</h3>

<ol>

<li>添加 <code>rel="lightbox"</code> 属性到任何一个链接标签去激活lightbox. 例如:

<pre><code>&lt;a href=&quot;images/image-1.jpg&quot; rel=&quot;lightbox&quot; title=&quot;my caption&quot;&gt;image #1&lt;/a&gt;

</code></pre>

<em>可选择项: </em>使用 <code>title</code> 属性加上说明. </li>

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

          <pre><code>&lt;a href=&quot;images/image-1.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;&gt;image #1&lt;/a&gt;

&lt;a href=&quot;images/image-2.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;&gt;image #2&lt;/a&gt;

&lt;a href=&quot;images/image-3.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;&gt;image #3&lt;/a&gt;

</code></pre>

没有限定每个页面的图片组数量和每个图片组图片的数量. 疯了!</li>

</ol>

</div>

<!-- end .section --><!-- end .section --><!-- end .section -->



</div><!-- end #content -->



</body>

</html>

一个页面中有多个图片,然后点击每一个图片就会有显示一个带有图片的div...
lightbox2, lightbox v2.0, lightbox js, lokesh, dhakar" \/><link rel="shortcut icon" type="image\/ico" href="\/images\/favicon.gif" \/><link rel="stylesheet" href="css\/screen.css" type="text\/css" media="

点击图片显示div,再点击相同图片时出现另一个div
下面是点击图片出现div1,在点击图片div1消失,div2出现。定义一个变量 var a=0 每当点击一下图片时a在原来基础上+1 (img).click(function(){ a=a+1;});判断a除以2的余数(任何数除以2都只会有2个余数,0或1.),当余数=1时,div1显示,其他情况下,div2显示,div1消失。if (a%2=1)...

我在一个层里放了4张图片我想每隔一秒显示一张图片怎么做?
var index = 0;\/\/定义一个全局变量,记录当前页面显示的图片在数组中的索引位置,初始值为0 function changeImg(){\/\/定义一个函数用来替换图片的链接地址 if(index < 3){\/\/先判断下一个图片的索引位置 index ++;}else{\/\/当前图片已经是第四张,则切换到第一张 index = 0;} document.getElemen...

如何让div在图片上如何让div在图片上显示
1、使用css中的flaot属性就可以了,首先打开Dreamweaver,创建html文件:2、然后先给页面设置背景颜色,创建段落两个段落,段落上面设置2张图片的float属性,分别让它们左右浮动,值为left和right,最后打开浏览器:3、打开浏览器后即可看到效果,两张图片分别浮动在文本的左右两边,文字则是围绕在图片周围.。

如何使图片填满整个div标签
1、首先我们打开sublime text软件,新建一个html页面,然后在在页面中添加html的基本结构 2、然后我们在html的body区域添加一个div,并且给div设置一下宽高以及边框的样式,3、运行程序以后,你就会看到如下图所示的div区域,我们接下来就要给这个区域添加背景图片 4、然后我们回到html文档,在div的样式规则...

多个div背景图片布局问题
底层的div重复背景,然后里面再套一个div,这div背景是不循环的背景,然后在这个div里写内容就可以写内容了。只要在页面上展示的效果和设计图一样就行了,没必要想的那么复杂

为什么div中里面嵌入几个div,外层的div会溢出一个像素?
什么是浏览器HACK:当我们使用不同的浏览器(Firefox IE7 IE6)访问同一个网站,或者页面的时候,会出现一些不兼容的问题,有的显示出来正常,有的显示出来不正常,我们在编写CSS的时候会很恼火,刚修复了这个浏览器的问题,结果另外一个浏览器却出了新问题。而HACK就是一种办法,能让你在一个CSS里面独立的写支持不同...

如何用js实现“点击多张图片,在一个表格里轮流显示”
onclick="showpic(this)"><\/td><td><img src="3.gif" width="50" height="100" onclick="showpic(this)"><\/td><\/tr><\/table> <table align="center" border="1" width="200" height="400"><tr><td><div id="myimg" align="center" > <\/div><\/td><\/tr><\/table> <script...

js如何实现:在页面中任意位置点击鼠标,则在该位置显示一个div
1.页面复制有一个id为c2的div,下面有一个子div,下面有一个按钮,事件是用来点击100个adddiv。2.在event函数中,定义一个内容为degreediv字符的字符串变量。3.然后使用jquery的append将已知的div字符串添加到c2div,如下所示。4.运行页面,现在只看到一个div,如下图所示。5.单击下面的按钮来触发...

我想要在HTML里面点击一个图片打开一个固定大小的窗口!
这个只需要在页面里面放一个隐藏的div就行了。先把这个div的样式什么的定好,position设置为absolute,display设置为none不显示,然后在点击图片之后,设置该div的display为block就可以了。

相似回答