首页 >web前端 >js教程 >JS CSS文章查看系统_javascript技巧

JS CSS文章查看系统_javascript技巧

WBOY原创: 2016-05-16 18:56:571260浏览

做成一个连接：点击后执行JavaScript函数；
Function: WindowsTextShow(Id div.id);
div.id 为要展示文本的div的ID；
代码如下：

<title>Untitled Page</title> 
<style type="text/css"> 
#divback 
{ 
width: 100%; 
height: expression(body.scrollHeight); 
background-color: #000; 
position: absolute; 
top: 0; 
left: 0; 
z-index: 49; 
display: none; 
filter: progid:DXImageTransform.Microsoft.Alphaopacity=25; 
filter: alpha(opacity=55); 
} 
.WindowsTextShow 
{ 
top: expression(documentElement.scrollTop + 50); 
left: 50px; 
height: expression(documentElement.clientHeight - 50*2); 
width: expression(body.clientWidth-50*2); 
position: absolute; 
z-index: 50; 
color: Black; 
border: 3px solid #E5E5E5; 
background-color: #F0F0F0; 
} 
.WindowsTextShowFull 
{ 
top: expression(documentElement.scrollTop); 
left: 0px; 
height: 100%; 
width: 100%; 
position: absolute; 
z-index: 50; 
border: 3px solid #E5E5E5; 
background-color: #F0F0F0; 
} 
#textContent 
{ 
padding: 5px; 
height: 80%; 
overflow: auto; 
line-height: normal; 
font-size: 14px; 
color: Black; 
background-color: White; 
} 
#ctrlSet 
{ 
font-size: 12px; 
} 
.ctrlSetState 
{ 
display: block; 
} 
</style> 
<script charset="GB2312" language="javascript" type="text/javascript"> 
var ocolorPopup = window.createPopup(); 
var ecolorPopup = null; 
var isfullScreen = false; 
var isRunning = false; 
var isCtrlSetShow = true; 
var div_box = document.createElement("DIV"); 
var div_back = document.createElement("DIV"); 
var textwindowtop = 50 + document.documentElement.scrollTop; 
var textwindowleft = 50; 
function colordialogmouseout(obj) { 
obj.style.borderColor = ""; 
obj.bgColor = ""; 
} 
function colordialogmouseover(obj) { 
obj.style.borderColor = "#0A66EE"; 
obj.bgColor = "#EEEEEE"; 
} 
function colordialogmousedown(color) { 
ecolorPopup.value = color; 
if (GetRadioValue("colorType") == "textColor") { 
textContent.style.color = color; 
} 
else if (GetRadioValue("colorType") == "textbackColor") { 
textContent.style.backgroundColor = color; 
} 
else { 
divback.style.backgroundColor = color; 
} 
ocolorPopup.document.body.blur(); 
} 
function colorset() { 
if (window.event.keyCode == 13) { 
if (iscolor()) { 
ecolorPopup.value = document.getElementById("setcolorbox").value; 
if (GetRadioValue("colorType") == "textColor") { 
textContent.style.color = ecolorPopup.value; 
} 
else if (GetRadioValue("colorType") == "textbackColor") { 
textContent.style.backgroundColor = ecolorPopup.value; 
} 
else { 
divback.style.backgroundColor = ecolorPopup.value; 
} 
} 
ocolorPopup.document.body.blur(); 
} 
} 
function iscolor() { 
var pattern = /^#[0-9a-fA-F]{6}$/ 
var objvalue = document.getElementById("setcolorbox").value; 
if (objvalue.match(pattern) != null) { 
return true; 
} 
else { 
return false; 
} 
} 
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(); 
//document.body.bgColor="#"+sColor.toUpperCase(); 
ocolorPopup.document.body.blur(); 
} 
function colordialog() { 
var e = event.srcElement; 
e.onkeyup = colordialog; 
ecolorPopup = e; 
var ocbody; 
var oPopBody = ocolorPopup.document.body; 
var colorlist = new Array(40); 
var colordialogw = 158; 
var colordialogh = 147 
var colordialogx = e.offsetLeft + textwindowleft - 7; 
var colordialogy = e.offsetTop + textwindowtop - colordialogh - 10; 
oPopBody.style.backgroundColor = "#f9f8f7"; 
oPopBody.style.border = "solid #999999 1px"; 
oPopBody.style.fontSize = "12px"; 
colorlist[0] = "#000000"; colorlist[1] = "#993300"; colorlist[2] = "#333300"; colorlist[3] = "#003300"; 
colorlist[4] = "#003366"; colorlist[5] = "#000080"; colorlist[6] = "#333399"; colorlist[7] = "#333333"; 
colorlist[8] = "#800000"; colorlist[9] = "#FF6600"; colorlist[10] = "#808000"; colorlist[11] = "#008000"; 
colorlist[12] = "#008080"; colorlist[13] = "#0000FF"; colorlist[14] = "#666699"; colorlist[15] = "#808080"; 
colorlist[16] = "#FF0000"; colorlist[17] = "#FF9900"; colorlist[18] = "#99CC00"; colorlist[19] = "#339966"; 
colorlist[20] = "#33CCCC"; colorlist[21] = "#3366FF"; colorlist[22] = "#800080"; colorlist[23] = "#999999"; 
colorlist[24] = "#FF00FF"; colorlist[25] = "#FFCC00"; colorlist[26] = "#FFFF00"; colorlist[27] = "#00FF00"; 
colorlist[28] = "#00FFFF"; colorlist[29] = "#00CCFF"; colorlist[30] = "#993366"; colorlist[31] = "#CCCCCC"; 
colorlist[32] = "#FF99CC"; colorlist[33] = "#FFCC99"; colorlist[34] = "#FFFF99"; colorlist[35] = "#CCFFCC"; 
colorlist[36] = "#CCFFFF"; colorlist[37] = "#99CCFF"; colorlist[38] = "#CC99FF"; colorlist[39] = "#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 bgcolor=\"eeeeee\" colspan=\"7\" style=\"font-size:12px;\" align=\"center\">当前颜色"; 
for (var i = 0; i < colorlist.length; i++) { 
if (i % 8 == 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>"; 
if (i % 8 == 7) 
ocbody += ""; 
} 
//ocbody += "<tr><td align=\"center\" height=\"22\" colspan=\"8\" onMouseOut=\"parent.colordialogmouseout(this);\" onMouseOver=\"parent.colordialogmouseover(this);\" style=\"border:1px solid;font-size:12px;cursor:default;\" onMouseDown=\"parent.colordialogmore()\">其它颜色..."; 
ocbody += ""; 
oPopBody.innerHTML = ocbody; 
ocolorPopup.show(colordialogx, colordialogy, colordialogw, colordialogh, document.body); 
} 
//--> 
function WindowsTextShow(divid) { 
if (!isRunning) { 
WindowsTextInit(divid); 
isRunning = true; 
} 
SetWindows(); 
} 
function SetWindows() { 
textwindowtop = 50 + document.documentElement.scrollTop; 
textwindowleft = 50; 
div_back.style.display = 'block'; 
div_back.style.visibility = 'visible'; 
div_box.style.display = 'block'; 
div_box.className = "WindowsTextShow"; 
} 
function RefreshWin() { 
textwindowtop = 50 + document.documentElement.scrollTop; 
textwindowleft = 50; 
} 
function WindowsTextInit(divid) { 
var div_ctrlSet = document.createElement("DIV"); 
var div_textContent = document.createElement("DIV"); 
div_ctrlSet.id = "ctrlSet"; 
div_textContent.id = "textContent"; 
div_box.id = "WindowsTextShow"; 
div_box.className = "WindowsTextShow"; 
div_back.id = "divback"; 
WindowsTextAddObj(div_box, div_textContent); 
WindowsTextAddObj(div_box, div_ctrlSet); 
SetObjContent(div_textContent, document.getElementById(divid).innerHTML); 
SetObjContent(div_ctrlSet, "<div id='typeSet'>选择更改项：<input checked='checked' name='colorType' type='radio' value='textColor' />文字<input name='colorType' type='radio' value='textbackColor' />背景<input name='colorType' type='radio' value='backGroundColor' />遮盖物</script>