zoukankan      html  css  js  c++  java
  • 漂亮图片演示ajax制作教程-lightbox

    漂亮图片演示ajax制作教程-lightbox

    这种效果就像你关闭计算机时所得到的那种效果。在不刷新页面的情况下实现大图片浏览。过渡完美。
    大家可以看看效果:http://www.evaxp.com/pic/

    这个演示我是用golive做得。手动添加。错乱排列。主要就是添加这么一段代码

    <DIV class=thumbnail><a href="pic/large_000.jpg" rel="lightbox[ziyi]"><img src="pic/small_000.jpg"></a></div>

    但是pic/large_000.jpg这个数值就没想到什么好的方法批量改变。希望高手指教一下。。今天添加了80张。一共135张。剩下的下次添加。是帮朋友kk-ziyi(重庆魔兽MM,现在是model一名)做的一个照片集。

    那么要实现这样的效果应该如何做呢?

    首先把要用到的js和css下下来。点击这里下载

    解压后把images js css 这三个文件夹复制到你的页面跟目录

    然后在你要添加的页面之间添加

    <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>

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

    如果你修改了目录名。请根据自己改的修改代码。

    做完上面的就是在你要添加这个特效的图片连接上加上

    rel="lightbox"

    这个参数
    比如:

    <a href="大图连接" rel="lightbox"><img src="小图连接"></a>


    这个是单图用的。

    要添加一系列图的话用下面代码:

    <a href="大图连接" rel="lightbox[ziyi]"><img src="小图连接"></a>


    其中[ziyi]这个是任意取的参数。参数相同就是同一系列的图片。那么你打开图片后点击半图就连接到上一张。右半图就连接到下一张!

    简单的应用吧!
  • 相关阅读:
    About Me
    洛谷 P2633 Count on a tree
    【题解】牛客编程巅峰赛S1赛季第1场
    洛谷 P4132 [BJOI2012]算不出的等式
    洛谷 P5970 [POI2016]Nim z utrudnieniem
    DP没入门就入土
    洛谷 P4042 [AHOI2014/JSOI2014]骑士游戏
    洛谷 P3592 [POI2015]MYJ
    51Nod 1683 最短路
    51Nod 1327 棋盘游戏
  • 原文地址:https://www.cnblogs.com/QDuck/p/418879.html
Copyright © 2011-2022 走看看