• jquery使用ColorBox弹出图片组浏览层


    本示例使用Jquery的ColorBox插件弹出图片组浏览层。效果预览网址:http://keleyi.com/keleyi/phtml/colorbox/

    以下是本效果的完整代码,将以下代码保存到html文件,打开即可预览效果。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>使用ColorBox弹出图片组浏览层</title>
    <link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/colorbox/colorbox.css" />
    <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/colorbox/jquery.colorbox-min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $(".keleyi_com").colorbox({ rel: 'group1', transition: "none", innerWidth: '700px' });
    });
    </script>

    </head>
    <body>
    <div style="400px;margin-left:auto;margin-right:auto;">
    请点击下面链接,即可在弹出层显示图片组。
    <p><a class="keleyi_com" href="http://keleyi.com/keleyi/phtml/picnext/images/k02.jpg" title="菊花">图片一</a></p>
    <p><a class="keleyi_com" href="http://keleyi.com/keleyi/phtml/picnext/images/k03.jpg" title="开心">图片二</a></p>
    <p><a class="keleyi_com" href="http://keleyi.com/keleyi/phtml/picnext/images/k05.jpg" title="宋慧乔">图片三</a></p>
    <p><a class="keleyi_com" href="http://keleyi.com/keleyi/phtml/picqiehuan/p3.jpg" title="梦想">图片四</a></p>
    </div></body>
    </html>


    本文转载自柯乐义http://keleyi.com/a/bjac/141932b419e08101.htm

  • 相关阅读:
    Struts2 Hello World
    Struts2入门(1)
    Struts2_day01
    Java Web Model2实战
    Oracle_day04
    SAP调用外部webservice接口
    通用清账程序
    服务器IDOC文件解析程序
    IDOC接口创建步骤
    SAP 本地发送IDOC
  • 原文地址:https://www.cnblogs.com/jihua/p/2958619.html
Copyright © 2020-2023  润新知