基于html5的服务器端图像及视频文件的浏览

用户上传到服务器端的图像及视频文件可以通过Html5浏览。

第一步:读取用户上传的目录及文件。(基于Vb.net实现)

首先,遍历服务端目录,获得文件及文件夹相关信息,返回XML文件;

    Function GetFiles(wy_file_path As String, kind As String) As XmlDocument
        Dim i As Int32 = 0
        Dim folder As DirectoryInfo = New DirectoryInfo(wy_file_path)
        Dim tempBig_file_upload As Big_file_upload = New Big_file_upload
        Dim xmlDoc As XmlDocument = New XmlDocument
        '创建类型声明节点    
        Dim node As XmlNode = xmlDoc.CreateXmlDeclaration("1.0", "utf-8", "")
        xmlDoc.AppendChild(node)
        '创建根节点    
        Dim root As XmlNode = xmlDoc.CreateElement("fileinfo_root")
        xmlDoc.AppendChild(root)

        If kind = "all" Then
            '   // node.Value = folder.FullName;
            Dim chldFolders() As DirectoryInfo = folder.GetDirectories()
            Dim chldFolder As DirectoryInfo
            For Each chldFolder In chldFolders

                i += 1
                Dim file_list As XmlNode = xmlDoc.CreateElement("file_list")
                root.AppendChild(file_list)
                CreateNode(xmlDoc, file_list, "no", i.ToString())
                CreateNode(xmlDoc, file_list, "file_or_diretory", "directory")
                CreateNode(xmlDoc, file_list, "file_name", chldFolder.Name)
                CreateNode(xmlDoc, file_list, "file_full_name", chldFolder.FullName)
                CreateNode(xmlDoc, file_list, "file_length", "-")
                CreateNode(xmlDoc, file_list, "file_date", chldFolder.LastWriteTime.ToString())


            Next


            Dim chldFiles() As FileInfo = folder.GetFiles("*.*")
            Dim chlFile As FileInfo
            For Each chlFile In chldFiles
                If chlFile.Extension.ToLower = ".jpg" Or chlFile.Extension.ToLower = ".jpeg" Or chlFile.Extension.ToLower = ".png" Or chlFile.Extension.ToLower = ".gif" Or chlFile.Extension.ToLower = ".mp4" Then
                    i += 1
                    Dim file_list As XmlNode = xmlDoc.CreateElement("file_list")
                    root.AppendChild(file_list)
                    CreateNode(xmlDoc, file_list, "no", i.ToString())
                    CreateNode(xmlDoc, file_list, "file_or_diretory", "file")
                    CreateNode(xmlDoc, file_list, "file_name", chlFile.Name)

                    CreateNode(xmlDoc, file_list, "file_full_name", chlFile.FullName)
                    CreateNode(xmlDoc, file_list, "file_length", tempBig_file_upload.CountSize(chlFile.Length))
                    CreateNode(xmlDoc, file_list, "file_date", chlFile.LastWriteTime.ToString())

                End If
            Next
      ElseIf kind = "video" Then
            Get_Video_list(xmlDoc, folder, root, i)
        ElseIf kind = "image" Then
            Get_image_list(xmlDoc, folder, root, i)
        End If


        Return xmlDoc


    End Function
    Function Get_image_list(xmlDoc As XmlDocument, folder As DirectoryInfo, root As XmlNode, i As Integer) As Boolean
        Dim chldFiles() As FileInfo = folder.GetFiles("*.*")
        Dim chlFile As FileInfo
        For Each chlFile In chldFiles
            If chlFile.Extension.ToLower = ".jpg" Or chlFile.Extension.ToLower = ".jpeg" Or chlFile.Extension.ToLower = ".png" Or chlFile.Extension.ToLower = ".gif" Then
                i += 1
                Dim file_list As XmlNode = xmlDoc.CreateElement("file_list")
                root.AppendChild(file_list)
                CreateNode(xmlDoc, file_list, "no", i.ToString())
                CreateNode(xmlDoc, file_list, "file_or_diretory", "file")
                CreateNode(xmlDoc, file_list, "file_name", chlFile.Name)


                CreateNode(xmlDoc, file_list, "file_full_name", chlFile.FullName)
                CreateNode(xmlDoc, file_list, "file_length", tempBig_file_upload.CountSize(chlFile.Length))
                CreateNode(xmlDoc, file_list, "file_date", chlFile.LastWriteTime.ToString())


            End If
        Next
        Dim chldFolders() As DirectoryInfo = folder.GetDirectories()
        Dim chldFolder As DirectoryInfo
        For Each chldFolder In chldFolders
            Get_image_list(xmlDoc, chldFolder, root, i)


        Next




    End Function
    Function Get_Video_list(xmlDoc As XmlDocument, folder As DirectoryInfo, root As XmlNode, i As Integer) As Boolean
        Dim chldFiles() As FileInfo = folder.GetFiles("*.mp4")
        Dim chlFile As FileInfo
        For Each chlFile In chldFiles
            i += 1
            Dim file_list As XmlNode = xmlDoc.CreateElement("file_list")
            root.AppendChild(file_list)
            CreateNode(xmlDoc, file_list, "no", i.ToString())
            CreateNode(xmlDoc, file_list, "file_or_diretory", "file")
            CreateNode(xmlDoc, file_list, "file_name", chlFile.Name)


            CreateNode(xmlDoc, file_list, "file_full_name", chlFile.FullName)
            CreateNode(xmlDoc, file_list, "file_length", tempBig_file_upload.CountSize(chlFile.Length))
            CreateNode(xmlDoc, file_list, "file_date", chlFile.LastWriteTime.ToString())


        Next
        Dim chldFolders() As DirectoryInfo = folder.GetDirectories()
        Dim chldFolder As DirectoryInfo
        For Each chldFolder In chldFolders
            Get_Video_list(xmlDoc, chldFolder, root, i)


        Next




    End Function
    Function CreateNode(xmlDoc As XmlDocument, parentNode As XmlNode, name As String, value As String) As Boolean
        Dim node As XmlNode = xmlDoc.CreateNode(XmlNodeType.Element, name, "")
        node.InnerText = value
        parentNode.AppendChild(node)

        Return True

    End Function

然后,绑定XML文件到GridView,html源文件如下;

<asp:GridView ID="dataGridView1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" Width="100%" AutoGenerateColumns="False">
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <asp:CheckBox ID="checkBox_all" runat="server" OnCheckedChanged="checkBox_all_CheckedChanged" AutoPostBack="True" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="CheckBox_f" runat="server" />
                    </ItemTemplate>
                    <ItemStyle Width="40px" />
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <asp:Label ID="Label_file_type" runat="server" Text="类型"></asp:Label>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:Image ID="Image_file_type" runat="server" ImageUrl="~/css/img/upload.gif" />
                        <asp:Label ID="Label_file_kind" runat="server" Text='<%# Bind("file_or_diretory") %>'></asp:Label>
                    </ItemTemplate>
                    <ItemStyle Width="60px" />
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <asp:Label ID="Label_file_name" runat="server" Text="名称"></asp:Label>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:HyperLink ID="HyperLink_file_name" runat="server" ></asp:HyperLink>
                        <asp:Label ID="Label_name" runat="server" Text='<%# Bind("file_name") %>'></asp:Label>
                        <asp:Label ID="Label_Full_name" runat="server" Text='<%# Bind("file_full_name") %>'></asp:Label>
                    </ItemTemplate>
                    <ItemStyle Width="60%" />
                </asp:TemplateField>
                <asp:BoundField DataField="file_length" HeaderText="大小" />
                <asp:BoundField DataField="file_date" HeaderText="修改时间" />
            
            
            </Columns>
            <EditRowStyle BackColor="#999999" />
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <SortedAscendingCellStyle BackColor="#E9E7E2"  />
            <SortedAscendingHeaderStyle BackColor="#506C8C" />
            <SortedDescendingCellStyle BackColor="#FFFDF8" />
            <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
        </asp:GridView>

绑定发生的事件:

 Private Sub dataGridView1_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles dataGridView1.RowDataBound
        If e.Row.RowIndex > -1 Then
            Dim cb As HyperLink
            Dim file_name As Label
            Dim file_full_name As Label

            file_name = e.Row.Cells(2).FindControl("Label_name")
            file_full_name = e.Row.Cells(2).FindControl("Label_Full_name")
            cb = e.Row.Cells(2).FindControl("HyperLink_file_name")
            ' tb = e.Row.Cells(1).FindControl("NewsID")
            file_name.Visible = False
            file_full_name.Visible = False

            cb.Text = file_name.Text

            Dim temp_url As String
            temp_url = file_full_name.Text.Substring(image_dir.Length - 1)
            temp_url = temp_url.Replace("\", "/")
            '判断文件类型

            Dim click_file_name = file_name.Text
            Dim target_image As String = ""
            If click_file_name.LastIndexOf(".") > 0 Then
                cb.CssClass = "wy_image_test"
                target_image = "../Upload" + temp_url + ""
                Dim file_Ex As String = click_file_name.Substring(click_file_name.LastIndexOf(".") + 1).ToLower
                If file_Ex = "jpg" Or file_Ex = "png" Or file_Ex = "jpeg" Or file_Ex = "gif" Or file_Ex = "tif" Then
                    '  imgPhoto = System.Drawing.Image.FromFile(file_Dir + file_name.Text)
                    'temp_pic.ImageUrl = "Upload/" + Me.Label1.Text + "/files/"
                    cb.Attributes.Add("onmousedown", "show_element(event)") 'onmousedown="show_element(Event)
                    cb.ToolTip = target_image + "|" + "image"
                    'cb.Attributes.Add("type", "image")
                ElseIf file_Ex = "mp4" Then

                    cb.Attributes.Add("onmousedown", "show_element(event)") 'onmousedown="show_element(Event)
                    cb.ToolTip = target_image + "|" + "video"
                End If
                cb.NavigateUrl = "void(0)"
            Else
                cb.NavigateUrl = "Default_list.aspx?current_url=" + current_url + file_name.Text + "/"
                cb.ToolTip = current_url + "|" + "url"
            End If


            '是否显示New图片

            Dim imgTempImage As Image
            Dim Label_file_kind As Label
            imgTempImage = e.Row.Cells(1).FindControl("Image_file_type")
            Label_file_kind = e.Row.Cells(1).FindControl("Label_file_kind")
            Label_file_kind.Visible = False
            If Label_file_kind.Text = "file" Then
                imgTempImage.ImageUrl = "~/images/file.png"
            Else
                imgTempImage.ImageUrl = "~/images/folder.png"
            End If
            imgTempImage.Width = 20
        End If



        If (e.Row.RowType = DataControlRowType.DataRow) Then
            '鼠标移动到每项时颜色交替效果 
            If e.Row.RowIndex Mod 2 = 0 Then
                e.Row.Attributes.Add("OnMouseOut", "this.style.backgroundColor='#F7F6F3';this.style.color='##333333'")
            Else
                e.Row.Attributes.Add("OnMouseOut", "this.style.backgroundColor='White';this.style.color='#284775'")
            End If

            e.Row.Attributes.Add("OnMouseOver", "this.style.backgroundColor='#FFFFDF';this.style.color='#000'")
            ' //设置悬浮鼠标指针形状为"小手" 
            ' e.Row.Attributes("style") = "Cursor:hand"
            ' e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=e")
        End If

    End Sub

运行效果图:



第二步:利用JS,浏览图片及视频;

<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <script src="../Scripts/jquery-3.2.1.js"></script>
<link href="../css/StyleFloat.css" rel="stylesheet" />
    <script src="../Scripts/show_image_video.js"></script>
</head>
<body>
    <form id="form1" runat="server">
       
    <div>
    
                                    <table width="100%">
                                        <tr>
                                            <td colspan="2" height="32">
					                             </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                 </td>
                                            <td height="28">
                                                 欢迎 
                                                <asp:HyperLink ID="hypelinkName" runat="server" 
                                                    NavigateUrl="~/User/User/UserUpdate.aspx">[hypelinkName]</asp:HyperLink>
                                                 登录!  <asp:Label ID="Label_user_id" runat="server"></asp:Label>
           
            <asp:Label ID="Label_current_dir" runat="server" Visible="False"></asp:Label>
            <asp:Label ID="Label_current_url" runat="server" Visible="False"></asp:Label>
                        <asp:Label ID="Label_file_url" runat="server" Visible="False"></asp:Label>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                 </td>
                                            <td height="28">
                                                <table cellpadding="0" cellspacing="0" style="width: 100%; height: 7px">
                                                    <tr>
                                                        <td align="center">
                                                            <asp:Button ID="Button_all_video" runat="server" Text="全部视频" />
 
                                                            <asp:Button ID="Button_all_images" runat="server" Text="全部图像" />
                                                        </td>
                                                        <td align="center">
                                                             </td>
                                                    </tr>
                                                </table>
              

        <asp:Panel ID="Panel_directory" runat="server" Height="30px">
        </asp:Panel>
        <asp:GridView ID="dataGridView1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" Width="100%" AutoGenerateColumns="False">
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <asp:CheckBox ID="checkBox_all" runat="server" OnCheckedChanged="checkBox_all_CheckedChanged" AutoPostBack="True" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="CheckBox_f" runat="server" />
                    </ItemTemplate>
                    <ItemStyle Width="40px" />
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <asp:Label ID="Label_file_type" runat="server" Text="类型"></asp:Label>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:Image ID="Image_file_type" runat="server" ImageUrl="~/css/img/upload.gif" />
                        <asp:Label ID="Label_file_kind" runat="server" Text='<%# Bind("file_or_diretory") %>'></asp:Label>
                    </ItemTemplate>
                    <ItemStyle Width="60px" />
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <asp:Label ID="Label_file_name" runat="server" Text="名称"></asp:Label>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:HyperLink ID="HyperLink_file_name" runat="server" ></asp:HyperLink>
                        <asp:Label ID="Label_name" runat="server" Text='<%# Bind("file_name") %>'></asp:Label>
                        <asp:Label ID="Label_Full_name" runat="server" Text='<%# Bind("file_full_name") %>'></asp:Label>
                    </ItemTemplate>
                    <ItemStyle Width="60%" />
                </asp:TemplateField>
                <asp:BoundField DataField="file_length" HeaderText="大小" />
                <asp:BoundField DataField="file_date" HeaderText="修改时间" />
            
            
            </Columns>
            <EditRowStyle BackColor="#999999" />
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <SortedAscendingCellStyle BackColor="#E9E7E2"  />
            <SortedAscendingHeaderStyle BackColor="#506C8C" />
            <SortedDescendingCellStyle BackColor="#FFFDF8" />
            <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
        </asp:GridView>

        <div id="fullbg" onclick="closeBg()"> </div>
                                                
         
                 
       
            <div id="dialog">  

                <p class="close">  
                    <a href="#" onclick="closeBg();">关闭</a></p>        
                    <div style="text-align: center">
                        <div id="target_file"></div> 
 <a id ="image_pre"  class="pre_image"><img alt="" src="../images/pre.png" /></a>

           <a id ="image_next"  class ="next_image"><img alt="" src="../images/next.png" /></a> 

                    </div>     
            </div> 


 
  </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                 </td>
                                            <td height="28">
                                                 </td>
                                        </tr>
                                        </table>
    
    </div>
    </form>
</body>
</html>

js文件代码:

/*******
    * @name show_image_video.js
    * @author wy
    * Copyright 2387248
    * 2018年4月16日 
 *******/

function show_element(e) {
         if (!e) {
             var e = window.event;
         }
         //获取事件点击元素
         var targ = e.target;
         //获取元素名称
         var tname = targ.id;
         var r = targ.title;

         var child = document.getElementsByClassName("wy_image_test");
         var pre = document.getElementById("image_pre");
         var next = document.getElementById("image_next");
         pre.href = "javascript:show_pre('" + tname + "')";
         next.href = "javascript:show_next('" + tname + "')";
         show(r.split("|")[0], r.split("|")[1])

     }
     function show_pre(tname) {
         var child = document.getElementsByClassName("wy_image_test");
         var pre = document.getElementById("image_pre");
         var next = document.getElementById("image_next");
         for (var i = 0; i < child.length; i++) {
             var a = child[i];
             var b;
             var c;
             var pname;
             var nname;
             var r;
             a.index = i;//给每个className为child的元素添加index属性;
             if (a.id == tname) {
                 if (i > 0) {
        b = child[i - 1];
    }
                 else {
        b = child[i];
    }
                 pname = b.id;
                 if (i < child.length-1) {
        c = child[i + 1];
    }
                 else {
        c = child[i];
    }
                 nname = c.id;
                 break;
             }
         }
         pre.href = "javascript:show_pre('" + pname + "')";
         next.href = "javascript:show_next('" + pname + "')";
         r = b.title;
         show(r.split("|")[0], r.split("|")[1])
     }
     function show_next(tname) {
         var child = document.getElementsByClassName("wy_image_test");
         var pre = document.getElementById("image_pre");
         var next = document.getElementById("image_next");
         for (var i = 0; i < child.length; i++) {
             var a = child[i];
             var b;
             var c;
             var pname;
             var nname;
             var r;
             a.index = i;//给每个className为child的元素添加index属性;
             if (a.id == tname) {
                 if (i > 0) {
        b = child[i - 1];
    }
                 else {
        b = child[i];
    }
                 pname = b.id;
                 if (i < child.length - 1) {
        c = child[i + 1];
    }
                 else {
        c = child[i];
    }
                 nname = c.id;
                 break;
             }
         }
         pre.href = "javascript:show_pre('" + nname + "')";
         next.href = "javascript:show_next('" + nname + "')";
         r = c.title;
         show(r.split("|")[0], r.split("|")[1])
     }

     function show(r,kind) {

         if (kind == "image") {
        showPic(r, 0, 0)
    } else {
        showMp4(r, 0, 0)
    }
    }
        //显示灰色 jQuery 遮罩层
     function showPic(r, w, h) {  
       

            var bh = $(document).height();
            var bw = $(document).width();
            $("#fullbg").css({
        height: bh,
                width: bw,
                display: "block"
            });
           //'图像显示位置'
            var target_dialog = document.getElementById("dialog");



            var target_file = document.getElementById("target_file");
            var image_width = parseInt(bw);
            var image_height = parseInt(bh);

            var tw = document.body.clientWidth-200;
            var th = document.body.clientHeight;
            var image_width_display;
            var image_height_display;
            var img = new Image();
            img.src = r;
            img.onload = function () {
        image_width = img.width;
    image_height = img.height;

                if ((image_width >= image_height && image_width > tw) == true)
                    {
        target_file.innerHTML = "<a target='_blank' href='" + r + "'> " + "<img src='" + r + "' width='" + tw + "px' /></a>";
    image_width_display = tw
                        image_height_display = img.height * (tw / img.width)

                } else if ((image_height > image_width && image_height > th) == true)
                    {
        target_file.innerHTML = "<a target='_blank' href='" + r + "'> " + "<img src='" + r + "' height='" + th + "px' /></a>";
    image_width_display = img.width * (th / img.height)
                        image_height_display = th
                    }
                    else
                    {
        target_file.innerHTML = "<a target='_blank' href='" + r + "'> " + "<img src='" + r + "'/></a>";
    image_width_display = img.width;
                        image_height_display = img.height;
                }
             target_dialog.style.marginLeft = "-" + (image_width_display/2) + "px";
             target_dialog.style.marginTop = "-" + (image_height_display/2) + "px";
             console.log("-" + (image_width_display/2) + "px");

             }
//target_dialog.style.marginLeft = "-500px";
        //    target_dialog.style.marginTop = "-500px";


            $("#dialog").show();


        }
        function showMp4(r, w, h) {
            var bh = $(window).height();
            var bw = $(window).width();
            $("#fullbg").css({
        height: bh,
                width: bw,
                display: "block"
            });
            var target_file = document.getElementById("target_file");

            target_file.innerHTML = "<video src='" + r + "' width='1080px' height='720px' controls='controls'> Your browser does not support the video tag.</video>";

            $("#dialog").css({
        width: '1080px',
       margin:'-360px 0 0 -540px'

            });
            $("#dialog").show();
        }
        function closeBg() {
            var target_file = document.getElementById("target_file");
            target_file.innerHTML = "";
            $("#fullbg,#dialog").hide();
        }
     //删除文件使用
        function show_del_file(r) {
            var bh = $(document).height();
            var bw = $(document).width();
            $("#fullbg").css({
        height: bh,
                width: bw,
                display: "block"
            });
            var target_file = document.getElementById("del_file");

                    target_file.innerHTML = r;


            $("#dialog_del").css({
        width: '600px'

            });
            $("#dialog_del").show();
        }

        function closeBg_del() {
            var target_file = document.getElementById("del_file");
            target_file.innerHTML = "";
            $("#fullbg_del,#dialog_del").hide();
        }

css文件代码:

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0;
}

#main {
    height: 1800px;
    padding-top: 90px;
    text-align: center;
}

#fullbg {
    background-color:black;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    z-index: 3;
    filter: alpha(opacity=50);
    
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    display: none;
}

#dialog {
    background-color:black;
    border: 5px solid gray;
    left: 50%;
    margin: -350px 0 0 -365px;
    padding: 1px;
    position: fixed !important; /* 浮动对话框 */
    position: absolute;
    top: 50%;
    z-index: 5;
    border-radius: 5px;
    display: none;
}
#image_buttons {
    display: none;
}
#image_pre {
    position: absolute;
    position: fixed !important; /* 浮动对话框 */
    top: 50%;
    left: 0px;
}
#image_next {
    position: absolute;
    position: fixed !important; /* 浮动对话框 */
    top: 50%;
    right: 0px;
}
#dialog p {
    margin: 0 0 1px;
    height: 28px;
    line-height: 24px;
    background: #a7ccc5;
}
#dialog p.close {
            text-align: right;
            padding-right: 10px;
        }
 #dialog p.close a {
                color: #000;
                text-decoration: none;
            }
#fullbg_del {
    background-color: gray;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    z-index: 3;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
}

#dialog_del {
    background-color: #fff;
    border: 5px solid gray;
    left: 50%;
    margin: -300px 0 0 -401px;
    padding: 1px;
    position: fixed !important; /* 浮动对话框 */
    position: absolute;
    top: 50%;
    z-index: 5;
    border-radius: 5px;
    display: none;
}

    #dialog_del p {
        margin: 0 0 12px;
        height: 24px;
        line-height: 24px;
        background: #a7ccc5;
    }

        #dialog_del p.close {
            text-align: right;
            padding-right: 10px;
        }

            #dialog_del p.close a {
                color: #000;
                text-decoration: none;
            }

预览图片效果图:


预览视频效果图:


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页