发现的一个不错的图片显示效果 litebox
Paste this in your document <head>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.lite.js"></script>
<script type="text/javascript" src="js/moo.fx.js"></script>
<script type="text/javascript" src="js/litebox-1.0.js"></script>
Make your links as such
<a href="images/image-1.jpg" rel="lightbox[example]" title="Horses"><img src="images/thumb-1.jpg" width="100" height="40" alt="Beautiful Horses" /></a>
源码下载
以上说的是Lightbox1.0 ,Lightbox2在这里:
Part 1 - Setup
1. Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library. You
will need to include these three Javascript files in your header (in this order).
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript"
src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
2. Include the Lightbox CSS file (or append your active stylesheet with the
Lightbox styles).
<link rel="stylesheet" href="css/lightbox.css" type="text/css"
media="screen" />
3. Check the CSS and make sure the referenced prev.gif and next.gif files are in
the right location. Also, make sure the loading.gif and close.gif files as
referenced near the top of the lightbox.js file are in the right location.
Part 2 - Activate
1. Add a rel="lightbox" attribute to any link tag to activate the lightbox. For
example:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image
#1</a>
# Optional: Use the title attribute if you want to show a caption.
2. If you have a set of related images that you would like to group, follow step
one but additionally include a group name between square brackets in the rel
attribute. For example:
<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>
源码下载
分享到:
相关推荐
js图片显示效果有倒影效果的 js图片显示效果有倒影效果的 js图片显示效果有倒影效果的
几张图片自动切换显示效果,可自定义图片数量和切换速度
一个简单的全屏图片上下打开显示网页效果,有需要的看看 http://blog.csdn.net/sweetsuzyhyf/article/details/37499769
很好的图片动态效果,对网站美观很不错,可以看看。
jquery图片显示效果 很牛 效果不错。
网页图片切换显示效果.适合在网站主界面显示图片新闻。稍作修改即可使用。
制作这种闪光效果,需要有两个元素:一个外框架,另一个内部元素用来呈现光泽。我这里使用了A标签和SPAN标签: 复制代码代码如下:<a><span></span></a> HTML代码总是最简单的。 CSS代码 A元素的样式很简单,溢出的...
js鼠标悬停到图片上显示文字详情效果
来自国外的一款放大图片的鼠标提示特效 一款鼠标提示效果,类似于放大图片,鼠标移到对应图片上,会显示出大图,能根据浏览器的显示距离将提示的图片显示在正确的位置上,把浏览器窗口调小就可以看到效果了。...
jQuery图片摇晃显示效果是一款默认以缩略图方式显示,鼠标滑过图片会以随机动态效果放大显示图片,效果非常搞笑,特别是看到憨豆那张脸更是其乐无穷。
LazyLoad 图片延迟加载效果示例 LazyLoad 图片延迟加载效果示例,这是由cloudgamer编写的一个封装插件,用它可以完成不少的效果,现在这个是图片延迟效果,也就是说,我们需要显示的图片会先加载,暂时用不上的也就...
HTML5实现一种图片堆叠显示的艺术效果,当鼠标悬停于这些图片时,图片会展开,看到下边的图像,看上去有种艺术效果。
js实现图片滚动效果,触发滚动事件,封装MsClass js,对div,table或者ul等列表标签实现自动横向或竖向滚动播放效果
Image Show 百度图片显示效果|图片显示
一个VB显示图片的过渡效果,就像是马赛克效果差不多,其实这个程序是演示如何随机载入图片的,不过这个功能做的不太好,相反显示图片的特效我比较喜欢,于是就发上来了,编写图像软件的时候可以摘出来当作模块来使用...
“Lightbox”是一个别致且易用的图片显示效果,它可以使图片直接呈现在当前页面之上而不用转到新的窗口。lightbox效果网络上有很多js版本的介绍。不过都下载一个lightbox的js小则几十K,大则上百K。如果你只是需要一...
模仿QQ快速显示图片效果 感兴趣就写了一个demo 大家可以一起完善此demo'
在css3中,我们使用animation与keyframes结合,可以给元素添加各种各样的动画效果。这篇文章主要介绍了css3实现多个元素依次显示效果,需要的朋友可以参考下
C# Android Gallery-Dome图片滑动效果显示
使用javascript实现flash的图片显示效果。