当前位置：首页 > 资讯 > 技术文档

多图展示点击切换效果模拟的flash效果，点小图放大显示，再点恢复默认。

时间：2022-04-19 18:16 编辑：来源：阅读：
扫一扫，手机访问

摘要：多图展示点击切换效果模拟的flash效果，点小图放大显示，再点恢复默认。

类似于Flash制作的一个图片展示效果 
<meta content="http://www.webjx.com" name="Author"></meta> 
<meta content="no" http-equiv="imagetoolbar"></meta>

<div id="imgbox" style="position:absolute;left:0;top:0;overflow:hidden;"></div> 
 <div id="txtbox" style="position:absolute;visibility:hidden;overflow:hidden;background:#333;color:#FFF;font-family:verdana;font-size:0.8em;"> 
  <div style="margin:2%"> 
  [h1]IMGBOX[/h1]Click the thumbnails on the left for a larger image. The description connected to the clicked image is displayed here.
 
  
Note: for performance reasons, images are not resized and must be all of the same size. 
  </div> 
 </div>

</div></div>

<div id="imgsrc" style="visibility:hidden"> 
 [img]http://demo.rexsong.com/200507/image_onclick_switch/BS9097.jpg[/img]
</img> 
 [img]http://demo.rexsong.com/200507/image_onclick_switch/BS9092.jpg[/img]
</img> 
 [img]http://demo.rexsong.com/200507/image_onclick_switch/BS9084.jpg[/img]
</img> 
 [img]http://demo.rexsong.com/200507/image_onclick_switch/BS9064.jpg[/img]
</img> 
 [img]http://demo.rexsong.com/200507/image_onclick_switch/BS9050.jpg[/img]
</img> 
 [img]http://demo.rexsong.com/200507/image_onclick_switch/BS9070.jpg[/img]
</img> 
 [img]http://demo.rexsong.com/200507/image_onclick_switch/BS9079.jpg[/img]
</img> 
 [img]http://demo.rexsong.com/200507/image_onclick_switch/BS9068.jpg[/img]
</img> 
 [img]http://demo.rexsong.com/200507/image_onclick_switch/BS9039.jpg[/img]
</img> 
</div>

<div id="txtsrc" style="visibility:hidden"> 
 <div> 
  [h1]the river[/h1]
Awaken from my nap by the river 
 </div> 
 <div> 
  [h1]transparency[/h1]
Its transparency was hypnotizing. 
 </div> 
 <div> 
  [h1]cold[/h1]
Currents of cold water played with light. 
 </div> 
 <div> 
  [h1]sank in[/h1]
I threw a few nuts into the river. They floated for a while, then sank in. 
 </div> 
 <div> 
  [h1]masked[/h1]
A wide stepping stone masked the water's depth. 
 </div> 
 <div> 
  [h1]a glimpse[/h1]
Later on, I had a glimpse of the river's bed. 
 </div> 
 <div> 
  [h1]forgotten[/h1]
The wheelchair made a noise. Again, I had forgotten about my legs. 
 </div> 
 <div> 
  [h1]floated[/h1]
Still, I floated in oblivion of things too real. 
 </div> 
 <div> 
  [h1]for me[/h1]
I stared fixedly at the water's open arms. The stream was singing for me. 
 </div> 
</div>

<span id="LB0" style="position:absolute;left:50%;top:50%;"> 
    <span style="position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;left:-50;top:-18">Loading...</span> 
    <span style="position:absolute;left:-50;top:-5;font-size:1px;width:100;height:10px;background:#333"> 
        <span id="LB1" style="position:absolute;left:0;top:0;font-size:1px;width:0;height:10px;background:#FFFFFF"></span> 
    </span> 
</span>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

全部评论(0)

上一篇：如何使用JSP访问MySQL数据库
下一篇：Blocksit插件实现瀑布流数据无限( 异步)加载

资讯排行榜
更多>>