• 点击查看图片,可自适应宽高


    js,css(公司框架直接可用):

    http://pan.baidu.com/share/link?shareid=473682&uk=1041329344

    js

        <link href="/Js/jquery.fancybox/fancybox.css" rel="stylesheet" type="text/css" />
        <script src="/Js/jquery.fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>
        <script>
            $(function () {
                $(".lipicli").find("a[rel=group]").fancybox({
                    'transitionIn': 'elastic',  //设置动画效果. 可以设置为 'elastic', 'fade' 或 'none'
                    'transitionOut': 'elastic',  //同上
                    'titlePosition': 'over',  //设置标题显示的位置.可以设置成 'outside', 'inside' 或 'over'
                    'titleShow': true,  //是否显示标题
                    'titleFormat': function (title, currentArray, currentIndex, currentOpts)//可以自定义标题的格式
                    {
                        return '<span id="fancybox-title-over">' + (currentIndex + 1) + ' / ' + currentArray.length + " " + title + '</span>';
                    }
                });
            });
        </script>

    html

            <%
                List<DealMvc.Model.GameInfo> NewGame = (List<DealMvc.Model.GameInfo>)ViewData["NewGame"];
            %>
            <div class="BabyShowList">
                <ul>
                    <%
                        if (NewGame != null && NewGame.Count > 0)
                        {
                            string pic_url = string.Empty;
                            foreach (DealMvc.Model.GameInfo item in NewGame)
                            {
                                pic_url = Url.ImageAutoSize(167, 167, item.ShowPic, ImageSizeMode.Size);
                                StringBuilder sb = new StringBuilder();
                                string[] img = item.PicPath.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
                                if(img.Length>2)//从第二张开始
                                    for (int i = 1; i < img.Length; i++)
                                    {
                                        sb.AppendFormat("<li><a href='{0}' rel='group'><img src=\"{0}\" title='{1}' alt='{1}' /></a></li>", img[i].ToString(), item.Name + " " + item.Number + "号 投票" + item.Votes + "数量");
                                    }
                    %>
                    <li class="lipicli">
                        <div class="imgDiv"><a href='<%=item.ShowPic %>' rel='group' class="Show_Img "  style="cursor:pointer;" ><img src="<%=pic_url %>" alt="<%=item.Name %> <%=item.Number %>号 投票<%=item.Votes %>数量" title="<%=item.Name %> <%=item.Number %>号 投票<%=item.Votes %>数量"></a></div>
                        <div class="name"><b class="red"><%=item.Number %>号</b> <%=item.Name %></div>
                        <div class="msg"><b class="red"><%=item.Votes %></b> 票</div>
                        <a href="" class="btn"><img src="/App_Themes/UI/image/btn21.gif" alt=""></a>
                        <ul style="display:none;"><%=sb.ToString() %></ul>
                    </li>
                    <%}
                        }
                        else
                        {%>
                    暂无参赛信息
                    <%} %>
                </ul>
                <span class="clear_f"></span>
            </div>

    效果图

  • 相关阅读:
    Linux下安装MySQL5.6
    Linux软件安装管理:rpm与yum
    Linux进程管理
    Linux网络配置
    Linux磁盘分区、挂载
    Django基础之模型层(models.py)、ORM查询之单表查询、多表查询和跨表查询
    Django基础之视图层(views.py)和模板层
    数据的编辑和删除、Django基础之路由层(urls.py)
    小白必会三板斧、静态文件配置、request对象及方法、pycharm和django连接数据库、字段的增删改查和数据的增查
    初识web框架和Django框架
  • 原文地址:https://www.cnblogs.com/dany/p/3085450.html
Copyright © 2020-2023  润新知