JS CSS文章查看系统- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JS CSS文章查看系统

Javascript: js支持158、159开头的手机号的验证; javascript学习网址备忘; JScript的条件编译; [原创]站长必须要知道的javascript广告代码; js实现的点击超链显示隐藏层; JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子; JavaScript 不只是脚本; 把JS与CSS写在同一个文件里的书写方法; Javascript & DHTML 实例编程（教程）基础知识; Javascript & DHTML 实例编程（教程）DOM基础和基本API; javascript实现的一个图片转移效果; 用js实现键盘方向键翻页功能的代码; js实现DIV的一些简单控制; 用CSS+JS实现的进度条效果效果; 爱恋千雪-US-AscII加密解密工具（网页加密）下载; 用javascript实现始终保持打开同一个子窗口以及关闭父窗口同时自动关闭所有子窗口; 非常不错的页面特效建议大家看下; javascript Zifa FormValid 0.1表单验证代码打包下载; 实现javascript的延期执行或者重复执行的两个函数; 推荐一个不错的图片浏览效果

No. « ‹ 69 70 71 72 › »

技术文章搜索

关键字

Javascript 中的 JS CSS文章查看系统

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 331 ::

收藏到网摘: n/a

仿搜狐女人频道FLASH图片切换效果走出JavaScript初学困境—js初学

自己写了个JS+CSS的小东西，用来看提升用户体验的。 Name：WindowsTextShow；做成一个连接：点击后执行JavaScript函数；
Function: WindowsTextShow(Id div.id);
div.id 为要展示文本的div的ID；
代码如下：

点击运行可以看到效果:

<!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>
<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></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 % 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></td></tr></table></td>";
if (i % 8 == 7)
ocbody += "</tr>";
}
//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()\">其它颜色...</td></tr>";
ocbody += "</table>";
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' />遮盖物</div>");
SetObjContent(div_ctrlSet, "<div id='colorSet'>选择颜色：<input id='setcolorbox' name='sel1' type='text' onkeydown='colorset()' onfocus='colordialog()'/></div>");
SetObjContent(div_ctrlSet, "<div id='fontSizeSet'>选择字体：<select name='select' id='fontslt' onChange='SetFont(textContent)'><option selected>选择阅读字体</option></select></div>");
SetObjContent(div_ctrlSet, "<div id='fullScreenSet'>全屏切换：<input type='button' onclick='FullScreen()' id='fullScreen' name='fullScreen' value='FullScreen'/></div>");
SetObjContent(div_ctrlSet, "<div id='hiddenCtrSet'>隐藏设置：<input type='button' onclick='HiddenCtrlSet()' name='HiddenCtrlSet' value='HiddenCtrlSet'/></div>");
SetObjContent(div_ctrlSet, "<div id='closeSet'>关闭窗口：<input type='button' onclick='CloseWindows()' name='CloseWindows' value='CloseWindows'/></div>");
document.body.appendChild(div_back);
document.body.appendChild(div_box);
SelectAddObj();
}
function HiddenCtrlSet() {
if (isCtrlSetShow) {
document.getElementById("typeSet").style.display = "none";
document.getElementById("colorSet").style.display = "none";
document.getElementById("fontSizeSet").style.display = "none";
document.getElementById("fullScreenSet").style.display = "none";
isCtrlSetShow = false;
}
else {
document.getElementById("typeSet").style.display = "block";
document.getElementById("colorSet").style.display = "block";
document.getElementById("fontSizeSet").style.display = "block";
document.getElementById("fullScreenSet").style.display = "block";
isCtrlSetShow = true;
}
}
function FullScreen() {
if (isfullScreen) {
isfullScreen = false;
textwindowtop += 50;
textwindowleft += 50;
div_box.className = "WindowsTextShow";
document.getElementById("fullScreen").value = "FullScreen";
}
else {
isfullScreen = true;
textwindowtop -= 50;
textwindowleft -= 50;
div_box.className = "WindowsTextShowFull";
document.getElementById("fullScreen").value = "DefaultScreen";
}
}
function GetIEHeight() //函数：获取尺寸
{
var winHeight = 0;
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
winHeight = document.documentElement.clientHeight;
}
return winHeight;
}
function GetRadioValue(ids) {
var obj = document.getElementsByName(ids);
for (var i = 0; i < obj.length; i++) {
if (obj[i].checked) {
return obj[i].value;
}
}
}
function SetFont(winid) {
if ((fontslt.selectedIndex != -1) && (fontslt.selectedIndex != 0)) {
winid.style.fontSize = fontslt.options[fontslt.selectedIndex].value;
}
}
function SelectAddObj() {
for (i = 9; i < 51; i++) {
var varItem = new Option(i + "pt字体", i);
document.getElementById("fontslt").options.add(varItem);
}
}
function SetObjContent(ids, obj) {
ids.innerHTML += obj;
}
function WindowsTextAddObj(ids, obj) {
ids.appendChild(obj);
}
function CloseWindows() {
div_back.style.display = 'none';
div_box.style.display = 'none';
div_box.className = "WindowsTextShow";
div_back.style.visibility = 'hidden';
isfullScreen = false;
document.getElementById("fullScreen").value = "FullScreen";
}
</script>
</head>
<body>
<div style=" width:900px; height:1400px; background-color:Gray; margin:0 auto;">
<div style=" height:100px; background-color:Red;"></div>
<div style=" height:1200px; background-color:Black;">
<div style="width:75%; float:left;">
<div style="height:100px; background-color:Blue;">
《跑跑卡丁车》国内运营商裁员超30%
<a href="javascript:WindowsTextShow('textBox')">看文字</a>
</div>
<div id="textBox" style="height:1100px; background-color:White;">
卡丁车“熄火” 网游冬意渐增
　　本报记者 刘方远
　　毕业生小王(化名)近日陷入了找工作的奔波之中。不久前，他还以为投身号称“反经济周期”的网游行业，能让他在这轮寒冬中得以自保。
　　“公司从这个月初开始裁减人员，陆陆续续几批共约一百多人，占公司总人数的30%到40%。”小王是乐线软件开发(上海)有限公司今年新招的员工，该公司是韩国网游厂商Nexon在中国的分公司，旗下有《跑跑卡丁车》等知名网络游戏。
　　据悉，《跑跑卡丁车》在国内休闲游戏领域一直名列前茅，为运营商带来的收入相当可观。由于网游对金融环境具有避风港效应，此前，国内网游厂商纷纷对该行业表示了乐观，乐线软件为何在此刻选择了大幅度“瘦身”？
　　12月24日，记者就此事向乐信软件求证，乐线软件管理中心一位韩方负责人向记者表示，公司目前不便对此进行表态。
　　战线调整？
　　乐信软件的母公司Nexon在国内小有名气，早年盛大网络代理的休闲游戏《泡泡堂》便是出自Nexon之手。看到《泡泡堂》在中国市场的巨大成功后，Nexon随后放弃了与盛大合作，独立成立了乐信软件在中国运营《跑跑卡丁车》等休闲游戏。
　　据网游业界知情人士介绍，《跑跑卡丁车》现在的运营平台名为世纪天成，由上海邮通和乐线软件共同搭建，“外界所知的‘世纪天成'实际控制方便是乐线软件。”除了《跑跑卡丁车》外，世纪天成运营的游戏还有《洛奇》、《新天翼之链》、《天关战纪》、《反恐精英Online》等。
　　《洛奇》是在国内上线的第一款游戏，但反应平平，但自2006年正式在国内推出《跑跑卡丁车》以来，公司开始出现转机。一位网游业内人士告诉记者，仅跑跑卡丁车一款游戏，最高一个月就能带来近千万收入，不过世纪天成的其它游戏市场表现仍很一般。
　　12月12日，世纪天成在《天关战纪》及《新天翼之链》这两款网游官网上同时发出了“终止运营公告”，称这两款游戏的所有服务器都将于12月30日10:00关闭。
　　对此，小王告诉记者，这也许就是公司此次缩减员工的原因，因为一些老游戏业绩下滑，公司要转型，加上还有新游戏要上线，所以要做大规模调整。
　　另有知情人士告诉记者，世纪天成此次的人员调整涉及大量中高层人员，“很多第一批做《洛奇》、《卡丁车》的人都走了，可能是韩方因经济危机进行的调整。”
　　据悉，《反恐精英Online》便是世纪天成近期上市测试的一款新游戏，“虽然这款游戏在韩国的表现并不好，但由于国内有比韩国更多的CS玩家基础，因此这款游戏被他们寄予厚望。”
　　网游有没有冬天？
　　事实上，一些国际级游戏巨头也开始了“瘦身”。
　　12月开始，美国知名游戏开发商EA(艺电)公司宣布，公司将再裁员400人，加上10月份的裁员计划，裁员人数将达1000人，约占员工总数的10%。
　　不过，业内专家认为，由于EA主要仍是依靠传统的单机游戏模式，并且面对的是西方成熟市场，因此受经济环境影响较大，而中国的网络游戏市场由于还处在增长阶段，因此受到冲击较小。
　　对此，盛大、巨人、第九城市等方面都向记者表达了类似的观点——网游属于廉价娱乐，经济危机导致的收入下降，短期内不太可能影响低消费的娱乐项目，因此并没有看到市场大幅萎缩。
　　“对已经上市的大网游企业而言，这轮经济形势带来的影响并不大，一是因为产品已经比较成熟，二是有充足的资金。”第九城市总裁陈晓薇向记者表示，目前九城的重点就是实施多元化的产品策略，完善针对不同需求的分散依赖单一产品线的风险。
　　据市场调查公司艾瑞咨询称，中国网络游戏运营商在今年第三季度的收入总和同比增长了50%以上，达到近8亿美元，同时本季度网络游戏市场的增长势头仍很强劲。
　　不过，对于没有上市的中小网游厂商而言，日子确实开始变得难过起来，因为小工作室很难再拿到投资，进一步的研发投入断粮后，小工作室的未来将难以为继。一家中型网游公司的负责人告诉记者，“近期一些大的扩张计划都暂时搁浅了，只能依靠已有的游戏维持现状。”
</div>
</div>
<div style="width:25%; float:left;"></div>
</div>
<div style=" height:100px; background-color:Red;"></div>
</div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

像蓝色理想首页的文章完全可以采用一下，挺实用的。
大家可以试试，现在只支持IE我是在IE7下做的，有兴趣的自己可以做css hack，让他支持更多的浏览器。

仿搜狐女人频道FLASH图片切换效果走出JavaScript初学困境—js初学

Javascript 中的 JS CSS文章查看系统

评论 (0) All