lightBox实现点击图片放大查看的实现方法

最新推荐文章于 2020-11-03 14:23:47 发布

freeson_csdn

最新推荐文章于 2020-11-03 14:23:47 发布

阅读量1.7k

点赞数

分类专栏：前端文章标签：图片 LightBox使用方法图片放大 js

本文链接：https://blog.csdn.net/biaobiao1217/article/details/40541609

版权

前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

前台页面：

JS和CSS的引用：

    <script type=""<script type="text/javascript" src="../js/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="../js/LightBox/jquery.lightbox-0.5.min.js"></script>
    <link href="../js/LightBox/jquery.lightbox-0.5.css" rel="stylesheet" />
    <script type="text/javascript" src="../js/myImgScroll/jquery.slideBox.js"></script>

    <script type="text/javascript" charset="utf-8">
        $(function ($) {
            $('#scroll1 a').lightBox();
            $('#scroll1 a').lightBox({
                imageLoading: '../js/lightbox/images/lightbox-ico-loading.gif',//设置下载图片
                imageBtnPrev: '../js/lightbox/images/lightbox-btn-prev.gif',//设置上一页按钮的图片地址
                imageBtnNext: '../js/lightbox/images/lightbox-btn-next.gif',//设置下一页按钮的图片地址
                imageBtnClose: '../js/lightbox/images/lightbox-btn-close.gif',//设置关闭按钮的图片地址
            });
         });
     </script>
     
     <style type="text/css">
        .items li
        {
            float: left;
        }

            .items li img
            {
                border: 1px dashed #41bfde;
                margin: 2px;
                padding: 3px;
            }

        a
        {
            outline: none;
        }
    </style>

HTML：

    <div style="width:500px; height: 300px; overflow-x:scroll;overflow-y:hidden;">
       <div style="width: 9999px" id="scroll1">
           <ul class="items">
              <%=GetImg %>
           </ul>
       </div>
    </div>

后台代码：

  string strUrls = ImgUrls;   //ImgUrls为各个图片的url地址组成的字符串,字符串以竖线(|)进行分割；          
  if (strUrls.LastIndexOf('|') == strUrls.Length - 1)
  {
      strUrls = strUrls.Substring(0, strUrls.Length - 1);
  }
  string[] Urls = strUrls.Split('|');
  for (int i = 0; i < Urls.Length; i++)
  {  // "../UploadFile/" 是图片所在的文件夹            
 
     GetImg += "<li><a href='../UploadFile/" + ImgUrls[i] + "'>";
     GetImg += "<img alt='图片' width='220px' height='250px'   src='../UploadFile/" + Urls[i] + "' /></a></li>";
  }

说明：所用js或css文件没有上传，可以去LightBox官网查找