发布于 2017-07-19 21:58:24 | 297 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程,程序狗速度看过来!

Firefox 浏览器

firefox 即 火狐浏览器 。Mozilla Firefox,中文名通常称为“火狐”或“火狐浏览器”,是一个开源网页浏览器,使用Gecko引擎(非ie内核),支持多种操作系统如Windows、Mac和linux。Firefox由Mozilla基金会与社区数百个志愿者以GPL/LGPL/MPL三种授权方式发布


最近要重构公司的一个站,有一个拾色器只支持IE,不支持FIREFOX CHROME等浏览器,花了点时间对照原来的重写了个。完美实现createPopup方法的弹窗效果,欢迎大家拍砖!
补增一个效果图!

<html> 
<head> 
<title>模拟Popup</title> 
<style type="text/css"><!-- 
body{ 
    margin:0; 
    padding:0; 
    text-align:center; 
} 
#container{ 
    margin:50px auto; 
    padding:10px auto; 
} 
#popupcontent{ 
    position:absolute; 
    border:1px solid #000000; 
    line-height:17px; 
    background-color:#F7F7F4; 
    visibility:hidden; 
    cursor:default; 
    padding:2 5 2 5px; 
} 
--></style><style type="text/css"> body{ 
    margin:0; 
    padding:0; 
    text-align:center; 
} 
#container{ 
    margin:50px auto; 
    padding:10px auto; 
} 
#popupcontent{ 
    position:absolute; 
    border:1px solid #000000; 
    line-height:17px; 
    background-color:#F7F7F4; 
    visibility:hidden; 
    cursor:default; 
    padding:2 5 2 5px; 
}</style> 
<script type="text/javascript"><!-- 
/* 
author :Krison 
email:nickylans@163.com 
qq:398504533 
*/ 
var baseText = null; 
var where = ""; // which link 
var xNum = 10; 
var yNum = 10; 
var w = 112; 
var h = 88; 
var xCoord,yCoord; 
function _test(evt) 
{ 
var src = evt.srcElement || evt.target; 
return src; 
} 

function checkwhere(e) { 
if (document.layers){ 
xCoord = e.x - xNum; 
yCoord = e.y + yNum; 
} 
else if (document.all){ 
xCoord = event.clientX - xNum; 
yCoord = event.clientY + yNum; 
} 
else if (document.getElementById){ 
xCoord = e.clientX - xNum; 
yCoord = e.clientY + yNum; 
} 

} 
document.onmousedown = checkwhere; 

function colordialogmouseout(obj){ 
obj.style.borderColor=""; 
obj.bgColor=""; 
} 

function colordialogmouseover(obj){ 
obj.style.borderColor="#0A66EE"; 
obj.bgColor="#EEEEEE"; 
} 


function colordialogmousedown(color){ 
ecolorPopup.value=color; 
    document.getElementById('popupcontent').blur(); 
document.getElementById("neon_color").style.color = color; 
    document.getElementById("popupcontent").style.visibility = "hidden"; 
} 

function colordialogmore(){ 
var sColor=dlgHelper.ChooseColorDlg(ecolorPopup.value); 
sColor = sColor.toString(16); 
if (sColor.length < 6) { 
var sTempString = "000000".substring(0,6-sColor.length); 
sColor = sTempString.concat(sColor); 
} 
ecolorPopup.value="#"+sColor.toUpperCase(); 
popUp.document.body.blur(); 
} 

function colordialog(event){ 
if(event.X) 
    { 
        var posX = event.x; 
    } 
    else 
    { 
        var posX = event.clientX; 
    } 
    if(event.Y) 
    { 
        var posY = event.y+10; 
    } 
    else 
    { 
        var posY = event.clientY+10; 
    } 
var popUp = document.getElementById("popupcontent"); 

var bottomedge = document.body.clientHeight.posY; 
        popUp.style.left = document.body.scrollLeft + posX - popUp.offsetWidth+"px"; 

    if (bottomedge < document.getElementById("popupcontent").offsetHeight) 
        popUp.style.top = document.body.scrollTop + posY- popUp.offsetHeight+"px"; 
    else 
        popUp.style.top = document.body.scrollTop + posY+"px"; 

    popUp.style.width = w + "px"; 
    popUp.style.height = h + "px"; 

    var e = _test(event); 
    e.onkeyup=colordialog; 
ecolorPopup = e; 

    var ocbody; 
     
var oPopBody = popUp; 
     
var colorlist=new Array(18); 
oPopBody.style.backgroundColor = "#f9f8f7"; 
oPopBody.style.border = "solid #999999 1px"; 
oPopBody.style.fontSize = "12px"; 

colorlist[0]="#FF0000";colorlist[1]="#FF9900";colorlist[2]="#99CC00";colorlist[3]="#33CCCC"; 

colorlist[4]="#FF00FF";colorlist[5]="#FFCC00";colorlist[6]="#FFFF00";colorlist[7]="#00FF00"; 
colorlist[8]="#00FFFF";colorlist[9]="#00CCFF"; 

colorlist[10]="#FF99CC";colorlist[11]="#FFCC99";colorlist[12]="#FFFF99";colorlist[13]="#CCFFCC"; 
colorlist[14]="#CCFFFF";colorlist[15]="#99CCFF";colorlist[16]="#CC99FF";colorlist[17]="#FFFFFF"; 


ocbody = ""; 
ocbody += "<table CELLPADDING=0 CELLSPACING=3>"; 
ocbody += "<tr height=\"20\" width=\"20\"><td align=\"center\"><table style=\" border:1px solid #808080;\" width=\"12\" height=\"12\" bgcolor=\""+e.value+"\"><tr><td></td></tr></table></td><td bgcolor=\"eeeeee\" colspan=\"7\" style=\" font-size:12px;\" align=\"center\">当前颜色</td></tr>"; 
for(var i=0;i<colorlist.length;i++){ 
if(i%6==0) 
ocbody += "<tr>"; 
ocbody += "<td width=\"14\" height=\"16\" style=\" border:1px solid;\" onMouseOut=\"parent.colordialogmouseout(this);\" onMouseOver=\"parent.colordialogmouseover(this);\" onMouseDown=\"parent.colordialogmousedown('"+colorlist[i]+"')\" align=\"center\" valign=\"middle\"><table style=\" border:1px solid #808080;\" width=\"12\" height=\"12\" bgcolor=\""+colorlist[i]+"\"><tr><td></td></tr></table></td>"; 
if(i%6==5) 
ocbody += "</tr>"; 
} 
ocbody += "</table>"; 
         
oPopBody.innerHTML=ocbody; 

if (baseText == null) 
    baseText = oPopBody.innerHTML; 
    oPopBody.innerHTML = baseText ; 
     oPopBody.style.visibility = "visible"; 

} 

function hidePopup() 
{ 
    var popUp = document.getElementById("popupcontent"); 
    popUp.style.visibility = "hidden"; 
} 
// --></script> 
</head> 
<body> 
<div> 
<input type="text" value="" name="neon_color" id="neon_color" onkeydown="colordialog(event)" onmousedown="colordialog(event)" onfocus="colordialog(event)"> 

<!-- 
div尽量别放入table里,IE可能会解释出错 
--> 
<div></div> 
</div> 
</body> 
</html> 


最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务