你现在所在的位置->首页->javascript->html5瀑布流布局代码，Metro风混搭瀑布流

html5瀑布流布局代码，Metro风混搭瀑布流

时间：[2012-12-26 0:30:02]　　　　　作者：请作者尽快与我们联系。

<!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>
 <script type="text/javascript">
     function showFilter() {
         document.getElementById('filter').style.display = 'inline';
         document.getElementById('promptbox').style.display = 'inline'; 
     }
     function hidFilter() {
         document.getElementById('filter').style.display = 'none';
         document.getElementById('promptbox').style.display = 'none';
     }

function m(o, e) {
         e = e ? e : window.event;
         Mouse_Obj = o;
         var obj=document.getElementById(Mouse_Obj);
         _x = obj.offsetLeft + 190; //这里的190是下面 margin-left:-190px 的偏移值
        _y = obj.offsetTop + 80; //这里的80是下面 margin-top:-80px;  的偏移值
        _x += -e.clientX;
         _y += -e.clientY;
     }
 </script>

#filter{display:none; position:absolute;bottom:0px;right:0px; left:0px; top:0px; z-index:1000;background: #000000;filter:Alpha(opacity=30);opacity:0.3}
 #promptbox{display:none;  left:50%;top:50%;margin-left:-190px;margin-top:-80px; width: 380px; z-index: 1001;
         position: absolute; text-align: center; background-color: White; border:solid 1px #000; padding:0 0 10px}
 .lefttit{ margin-left:20px; width:60px}
 </style>
 </head>
 <body>
 <a onclick="showFilter();"  href="#">上传图片</a>
     <div id="filter">
     </div>
     <div id="promptbox" >
         <div onmousedown="m('promptbox',event)"  style="height: 24px; margin-bottom:20px; background-color: Blue; ">
             <span onclick="hidFilter()" style="float: right; height: 24px; line-height:24px; background-color: Red;
                 font-size: 20px; font-weight: bolder; color: White; cursor:pointer;">×</span></div>
                 <div style="  text-align:left">
                 <span class="lefttit">
         本地文件：</span><input type="file" style="width:280px" size="30" runat="server" id="oFile" /></div>
           <div style="margin:20px 0; text-align:left">    
           <span class="lefttit">
        </div><div style="text-align: center;">
             <input type="button" onclick="hidFilter()" value="取消" />&nbsp;&nbsp;&nbsp;&nbsp;
             <input id="Button1" type="button" onclick="if(document.getElementById('oFile').value==''){alert('请选择本地文件！');return false;}if(document.getElementById('txtNewImgName').value==''){alert('请输入图片标题');return false;}"
                 value="上传" runat="server" onserverclick="Upfile_Click" /></div>
     </div>

</body></html>

[提示：你可先修改部分代码，再按运行]

【声明】本站刊载的《html5瀑布流布局代码，Metro风混搭瀑布流》一文如果有侵害你权益的情况，请联系我们。我们将及时采取措施。
QQ：44637339　Email:just6@163.com　Tel:13355163107 Lining studios