PRcss

QQREADER4DFEDF2AE0CDD05E

2010-03-15T16:30:26+08:00

asd

【JS】操作数组：将第N个对象移动到第1个

2009-12-18T11:25:16+08:00

呃，接上个方法，改改就变了～

    index = 指定将要替换的数组对象
    1、取 0 - index 之间的数组对象 = part1
    2、取 index 数组对象 = part2
    3、取 index - length 之间的数组对象 = part3
    4、将 part2 与 part1合并，再与 part3  合并为一个数组，并返回。

程序代码

Array.prototype.sortAt=function(index) {
    var part1 = this.slice(0,index);
    var part2 = this.slice(index,index+1);
    var part3 = this.slice(index+1,this.length);
    return(part2.concat(part1).concat(part3));
};
var a=["a","b","c","d","e"].sortAt(3);
//结果：["d","a","b","c","e"]

HTML代码

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

【JS】操作数组：在指定数组位置之后插入新内容

2009-12-18T11:17:05+08:00

在群里学到一个方法：

    index = 指定位置
    value = 要添加的新内容
    1、取 0 - index 之间的数组对象 = part1
    2、取 index 之后的数组对象 = part2
    3、给 part1 添加 value
    4、将 part1 与 part2 合并为一个数组，并返回。

程序代码

Array.prototype.insertAt=function(index,value){
    var part1 = this.slice(0,index);
    var part2 = this.slice(index);
    part1.push(value);
    return(part1.concat(part2) );
};
var a=["a","b","c","d","e"].insertAt(3,"f");
//结果：["a","b","c","f","d","e"]

HTML代码

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

辞职信

2009-11-25T11:18:02+08:00

嗟，夫君子不寄人以篱下，不枉食无功禄也。君子尚德，志在修身，不以言谗，不以行屈，亦不枉为左徒子也。时廿九当月，夜不能寐，以观星辰，但见月晦星暗，心有悲切，作请辞书。君子行事，不求贤能，但当得正直二字，事在力为，功在评过。事不为不受以功，事为之不担以过。君子自从，秋去暑来，已大半载矣。光阴荏苒，一往而不复返，岂能碌碌而不为之？夫韩信始附项梁，继属项羽，屡进言，不为用。愤而离之，投之于邦，波折周起，始为用。然终为吕后所害。君子不才，亦不想为韩信乎，不结怨于吕后乎。现位卑权微，离之尚不为大震也，故明哲理而远非乱是为君子上策也。嗟！“月明星稀，乌鹊南飞。绕树三匝，何枝可依”。禽择良木而栖，然世人多知良木可栖，未尝知噪鸦可恶也。之有良木，枝叶丰茂，尚有风疾雷霆乎，人伐虫腐乎，鸟禽相噪乎。《大学》曰：君子贤其贤而亲其亲，小人乐其乐而利其利。心痛良木之朽，多加谏言，了然已成小人口中之噪鸦哉！其年内，出外有三，然一，再次，于三，位渐微而力渐无矣。空食功禄，于心不安矣。古有左徒，其心忠昭日月，亦为噪鸦矣！自投汩罗；今君子亦为噪鸦，前后思兮，泣然矣。古云：君子有自知之明。

自离之，终不被弃。

一个评分样式的自白

2009-10-28T17:29:53+08:00

不是自己公司需要的东西，受某人所托。。。记录下～

需求：
1、柱状图可设置高度：0 - 100%
2、柱状图垂直对齐方式：底部
3、数值垂直对齐方式：相对柱状图顶部
4、数值水平对齐方式：相对柱状图水平对齐
5、数值长度支持：0 - 8位

IMG

CSS

程序代码

.box { position:relative; width:200px; height:200px; border:1px solid #ccc; background:#eee; }
.box ul { position:relative; margin:30% 0 0; padding:0; height:70%; }
.box li { position:absolute; bottom:1.5em; width:5%; list-style:none; border:1px solid; border-color:#fff #999 #999 #fff; background:red; }
.box li strong,
.box li span { position:absolute; left:-50px; bottom:-1.5em; width:110px; text-align:center; font-size:9pt; font-weight:normal; }
.box li span { top:-1.5em; font-size:9pt; }
li.一 { height:50%; left:20%; }
li.二 { height:20%; left:45%; }
li.三 { height:70%; left:70%; }

HTML

程序代码

很傻10

很呆40

很痴70

Run

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一个评分样式的自白</title>
<style type="text/css">
.box { position:relative; width:200px; height:200px; border:1px solid #ccc; background:#eee; }
.box ul { position:relative; margin:30% 0 0; padding:0; height:70%; }
.box li { position:absolute; bottom:1.5em; width:5%; list-style:none; border:1px solid; border-color:#fff #999 #999 #fff; background:red; }
.box li strong,
.box li span { position:absolute; left:-50px; bottom:-1.5em; width:110px; text-align:center; font-size:9pt; font-weight:normal; }
.box li span { top:-1.5em; font-size:9pt; }
li.一 { height:50%; left:20%; }
li.二 { height:20%; left:45%; }
li.三 { height:70%; left:70%; }
</style>
</head>

<body>

</body>
</html>

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

固定提示窗口

2009-10-16T17:29:55+08:00

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>固定提示窗口</title>
<style type="text/css">
#winNew { position:relative; width:200px; height:23px;overflow:hidden; font-size:12px; line-height:1.5; background:url(<a href="http://www.pr1984.com/images/tempimg/winFloat.gif" target="_blank">http://www.pr1984.com/images/tempimg/winFloat.gif</a>) no-repeat;}
#winNew p { padding:0 10px; margin:0; }
#winNew p.title { padding:5px 10px 5px; color:#fff; }
#winNew .min,
#winNew .max,
#winNew .colse { position:absolute; right:0; top:0; z-index:2; width:23px; height:16px; display:block; overflow:hidden; text-indent:-999em; background:url(<a href="http://www.pr1984.com/images/tempimg/winfloat.gif" target="_blank">http://www.pr1984.com/images/tempimg/winfloat.gif</a>) no-repeat right top; cursor:pointer; }
#winNew .colse:hover { background-position:right -16px; }
#winNew .min { right:22px; background-position:-200px 0; }
#winNew .min:hover { background-position:-200px -16px; }
#winNew .max { right:22px; background-position:-200px -32px; }
#winNew .max:hover { background-position:-200px -48px; }
</style>
</head>

<div id="winNew">
	<p class="title"><strong>重要通知：</strong>
	<p>看什么看，你妈妈叫你回家吃饭：</p>
	<p>一碗饭...</p>
	<p>两碗饭...</p>
	<p>...</p>
	<a href="javascript:void(0);" id="minWinNew" class="min"></a><a href="javascript:void(0);" id="colseWinNew" class="colse" title="关闭"></a>
</div>
<script type="text/javascript">
var QJ={//基础DOM
	$:function(obj,tag){//取id|tag
		if(!tag){return document.getElementById(obj);}
		else if(typeof obj=='string'){return document.getElementById(obj).getElementsByTagName(tag);}
		else{return obj.getElementsByTagName(tag);}
	},
	addEvent:function addEvent(obj,type,fn){//二级事件
		if(obj.attachEvent){
			obj['e'+type+fn]=fn;
			obj[type+fn]=function(){obj['e'+type+fn](window.event);}
			obj.attachEvent(type,obj[type+fn]);
		}
		else obj.addEventListener(type.slice(2),fn,false);
	}
}
var mm={//缩放
	obj:function(a,b,wh,s,min_,max_,css){
		if(!a||!b){return false}
		s=(!s)?20:s;
		this.whs=function(){return (wh=="width")?b.clientWidth:b.clientHeight;};
		QJ.addEvent(a,"onclick",function(){
			if(mm.maxmin)clearInterval(mm.maxmin);
			var wh_=mm.whs();
			if(!max_){min_=wh_}
			if(wh_>min_){mm.if_(b,wh,s,min_);this.className+=" "+css;}
			else if(wh_<max_){mm.if_(b,wh,s,max_);var z=new RegExp("\\b"+css+"\\b","g");this.className=this.className.replace(z,"");}
			this.blur();return false;
		})
	},
	if_:function(obj,wh,s,x){
		var wh_=this.whs();
		var i=(wh_>x)?0:1;
		this.maxmin=setInterval(function(){mm.goto(obj,wh,x,i)},s);
	},
	goto:function(obj,wh,x,mm){
		wh_=this.whs();
		var x_=(x==0)?1:x;
		if(mm==0&&wh_>x_){wh_=wh_-(((wh_/10)<1)?1:(wh_/5));}
		else if(mm==1&&wh_<x){if(wh_==0){wh_=10;}wh_=wh_+(wh_/5);}
		else{clearInterval(this.maxmin);wh_=x;}
		obj.style[wh]=wh_+"px";
	}
};
function winFloat(obj,css){//OBJ三个对象：0=主窗口，1=缩放按钮，2=关闭按钮。
	if(!obj||typeof obj!="object"){return false}
	//跟随
	this.xy(obj[0]);
	//缩放
	mm.obj(obj[1],obj[0],"height",25,23,110,css);
	//关闭
	obj[2].onclick=function(){obj[0].style.display="none";this.blur();return false;}
	//初始展开
	mm.if_(obj[0],"height",25,110);
}
winFloat.prototype.xy=function(obj){//跟随
	if(!window.XMLHttpRequest){
		obj.style.cssText+="position:absolute;right:0;";
		var scrollTop_=function(){
			var st=(document.documentElement && document.documentElement.scrollTop)?document.documentElement.scrollTop:(document.body)?document.body.scrollTop:null;
			obj.style.bottom=-(st)+"px";
		}
		scrollTop_();
		QJ.addEvent(window,"onscroll",scrollTop_);
	}
	else{obj.style.cssText+="position:fixed;right:0;bottom:0;"}
}
new winFloat([QJ.$("winNew"),QJ.$("minWinNew"),QJ.$("colseWinNew")],"max");
</script>
</body>
</html>

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

复选框(checkbox)练习

2009-09-24T10:07:17+08:00

HTML代码

<body>
<div id="sCop">
	<p>当选择Y时，N不可选；选择N时，其他都不可选。</p>
	<ul>
		<li><label for=""><input class="Y" type="checkbox" />可以合并 Y</label></li>
		<li><label for=""><input class="N" type="checkbox" />不可以合并 N</label></li>
		<li><label for=""><input class="N" type="checkbox" />不可以合并 N</label></li>
		<li><label for=""><input class="Y" type="checkbox" />可以合并 Y</label></li>
	</ul>
</div>
<script type="text/javascript">
var che={
	obj:function(id,css){//处理对象
		var obj=document.getElementById(id).getElementsByTagName("input");
		for(var i=0;i<obj.length;i++){
			obj[i].onclick=function(){
				che.goto(this,obj,css);
			}
		}
	},
	goto:function(cheObj,obj,css){//处理结果
		var objs_=this.if_push(obj,"checked","");//得到所有没有被选中的对象
		objs=(cheObj.className==css[0])?this.if_push(objs_,"className",css[1]):objs_;//对象class=Y时，objs为所有class=N的对象，否则objs等于所有对象
		var x=(this.if_s(this.if_push(obj,"className",cheObj.className),"checked","checked"))?"disabled":"";//对象被选中时，obj不可选，否则obj可选
		this.c(objs,"disabled",x);
	},
	if_push:function(obj,a,b){//判断对象的a属性值是否等于b，并将符合条件的对象合并返回
		var x=[];
		for(var i=0;i<obj.length;i++){
			if(obj[i][a]==b){x.push(obj[i])}
		}
		return x;
	},
	if_s:function(obj,a,b){//判断对象的a属性值是否等于b，并返回结果;
		for(var i=0;i<obj.length;i++){
			if(obj[i][a]==b||obj[i][a]==true){var x=true;}
		}
		return x;
	},
	c:function(obj,a,b){//给对象写入属性及属性值
		for(var i=0;i<obj.length;i++){
			obj[i][a]=b;
		}
	}
}
che.obj("sCop",["Y","N"]);
</script>
</body>
</html>

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

缩放练习

2009-09-15T14:36:34+08:00

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" lang="zh-CN" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="PRcss,xhtml,html,css,js,book,个人主页,无聊,神经,懒惰" />
<meta name="description" content="PRcss的个人主页,无聊的,神经的,懒惰的..." />
<meta name="Author" content="PRcss,qq:50198763" />
<meta name="Copyright" content="本页版权归PRcss所有。All Rights Reserved" />
<link rel="shortcut icon" href="<a href="http://www.pr1984.com/favicon.ico" target="_blank">http://www.pr1984.com/favicon.ico</a>" />
<script type="text/javascript">
var pr={
	$:function(obj,tag){
		if(!tag){return document.getElementById(obj);}
		else if(typeof obj=='string'){return document.getElementById(obj).getElementsByTagName(tag);}
		else{return obj.getElementsByTagName(tag);}
	},
	addEvent:function(obj,on,fn){
		obj.attachEvent?obj.attachEvent(on,function(){fn.call(obj)}):obj.addEventListener(on.slice(2),fn,false);
	}
}
/*
a = 被绑定触发事件的对象
b = 被操作的对象
wh = width或者height
s = 运动速度(可选，默认20)
min_ = 最小范围
max_ = 最大范围(可选，默认对象自身width或height)
*/
var mm={
	obj:function(a,b,wh,s,min_,max_){
		if(!a||!b){return false}
		s=(!s)?20:s;
		pr.addEvent(a,"onclick",function(){
			clearInterval(mm.maxmin);
			var wh_=mm.whs(b,wh);
			if(!max_){min_=wh_}
			if(wh_>min_){mm.if_(b,wh,s,min_);}
			else if(wh_<max_){mm.if_(b,wh,s,max_);}
		})
	},
	if_:function(obj,wh,s,x){
		var wh_=this.whs(obj,wh);
		if(wh_>x){this.maxmin=setInterval(function(){mm.goto(obj,wh,x,0)},s);}
		if(wh_<x){this.maxmin=setInterval(function(){mm.goto(obj,wh,x,1)},s);}
	},
	whs:function(b,wh){return (wh=="width")?b.clientWidth:b.clientHeight;},
	goto:function(obj,wh,x,mm){
		wh_=this.whs(obj,wh);
		var x_=(x==0)?1:x;
		if(mm==0&&wh_>x_){wh_=wh_-(((wh_/10)<1)?1:(wh_/5));}
		else if(mm==1&&wh_<x){if(wh_==0){wh_=10;}wh_=wh_+(wh_/5);}
		else{clearInterval(this.maxmin);wh_=x;}
		obj.style[wh]=wh_+"px";
		pr.$("random").innerHTML=wh_+"px";
	}
}
pr.addEvent(window,"onload",function(){mm.obj(pr.$('gt'),pr.$('pr'),'height',10,0,150)});
</script>
<title>缩放：高度 - www.pr1984.com</title>
</head>
<body>
<p><button type="button" id="gt">测试</button> 监测：<span id="random"></span></p>
<p id="pr" style=" overflow:hidden; background:#eee; ">测试</p>
</body>
</html>

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

利用锚点来做Tab选项卡

2009-08-24T19:23:11+08:00

首先准备材料，一般有2个品种：
1、简单的普通货色

程序代码

标题一

内容一

标题二

内容二

标题三

内容三

2、稍微复杂点的货色

程序代码

索引一

索引二

索引三

标题一

内容一

标题二

内容二

标题三

内容三

可能classNmae多了点，其实怎么玩都可以，关键是能找到它们～所以接下来就开始研究如何获取对象们！
呃，对了～用第2个材料吧，我喜欢它～

程序代码

//先声明一下，我用tab的
var tab={}

程序代码

//接下来开始准备一些工具，例如获取className的方法
tab.css=function(name){
    var obj=document.getElementsByTagName("*");
    var list=[];
    var cssName=new RegExp('\\b'+name+'\\b','g');
    for(var i=0;i        if(obj[i].className.match(cssName)){
            list.push(obj[i]);
        }
    }
    return list;
}

程序代码

//然后就正式开始获取对象了
tab.obj=function(a,b,c){//假设我们要获取的对象为a(标题)与b(内容)，还有一个c(指定给当前显示内容的样式名称)～
    var d=(!d)?0:d;
    var hs=this.css(a);
    var bs=this.css(b);//利用刚才找到的工具，貌似很容易就抓到了哦～现在hs代表标题，bs代表内容。
    this.on(hs,bs,c);//转移战场：给标题添加事件
    this.$(a,b,c,d);//别忘了初始化时指定的第一个显示内容
}

程序代码

//给h(标题)们添加事件～
tab.on=function(h,b,css){
for(var i=0;i h[i].onclick=new Function("tab.$('"+h[i].className+"','"+b[i].className+"','"+css+"','"+i+"')");
}
}

程序代码

//请注意，这里是最关键的地方，也就是咱的最终目标：Tab切换
tab.$=function(h,b,css,x){//排队展示：[标题]，[内容]，[即将添加的样式表]，[当前要显示的内容序列号]
    var h=this.css(a);
    var b=this.css(b);
    var z=new RegExp("\\b"+css+"\\b","g");
    for(var i=0;i        h[i].className=(i==x)?(h[i].className+" "+css):h[i].className.replace(z,"");
        b[i].className=(i==x)?(b[i].className+" "+css):b[i].className.replace(z,"");
    }
}

到现在好像可以试运营了～

HTML代码

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

那什么...接下来就是标题所述的的，也就是高级点的思路。咱改个方向，别让标题做那么多事了，让它仅仅只做一个对锚(#)的操作。剩下的直接交给新增的方法：

程序代码

tab.mm=function(a,b,c,d){//处理锚(#)，并得到一个结果，以此去执行选项卡内容的切换。
var x=(!document.location.hash || document.location.hash.match(/[0-9]$/ig)==null)?"0":document.location.hash.match(/[0-9]$/ig)-1;
this.$(a,b,c,x);
}

呃，其实这些有啥不同的呢，我想我只是为了一个需求：
我希望可以有这么一个URL：www.xxx.com/index.htm#page3 ，通过这个#(锚)后面的参数来决定页面打开以后默认展开的内容～仅此而已

HTML代码

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

Microsoft.AlphaImageLoader滤镜讲解

2009-08-17T12:48:14+08:00

Microsoft.AlphaImageLoader是IE滤镜的一种，其主要作用就是对图片进行透明处理。虽然FireFox和IE7以上的IE浏览器已经支持透明的PNG图片，但是就IE5-IE6而言还是有一定的意义。

语法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
属性：
enabled  :　可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true  :　默认值。滤镜激活。
false  :　滤镜被禁止。

sizingMethod  :　可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop  :　剪切图片以适应对象尺寸。
image  :　默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale  :　缩放图片以适应对象的尺寸边界。

src  :　必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

特性：
Enabled  :　可读写。布尔值(Boolean)。参阅 enabled 属性。
sizingMethod  :　可读写。字符串(String)。参阅 sizingMethod 属性。
src  :　可读写。字符串(String)。参阅 src 属性。

说明：
在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。

示例：
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='rain1977.gif',sizingMethod='scale');}
.dream{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/earglobe.gif');}
MSDN: http://msdn2.microsoft.com/en-us/library/ms532969.aspx
P.S. 当想使用backgroundimage属性时，如果不想让图片原尺寸显示，而是类似于IMG width=100% heigth=100% 的效果，可以通过此filter实现。

Example：
span.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.jpg', sizingMethod='scale')";

引用：最后说说关于FF和IE效果调和问题。这个滤镜效果只适用于IE,在FF下面无法显示，我想这是前辈说他很难实现的最终问题了。以往我们用*或者_来修复IE下和FF的区别．这一次是要找方法修复FF不能实现的问题.
其实想到的话,也很简单了.就是先让FF正常显示该图片,然后,用*或_ 来清除IE下的显示效果，最后用*或_ 来做以上的滤镜效果。大功告成！

以上是官方的说明。事实上实际操作中需要注意:AlphaImageLoader滤镜会导致该区域的链接和按钮无效，一般情况下的解决办法是为链接或按钮添加：position:relative使其相对浮动要注意的是，当加载滤镜的区域的父层有position:absolute绝对定位的时候使用position:relative也不能使链接复原。建议使用浮动办法处理。

具体操作：

为预览区域（比如要在某个 div 中预览）添加样式：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);。
为 AlphaImageLoader 设置 src 属性。

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/lsd123/archive/2008/12/29/3638329.aspx

PRcss

QQREADER4DFEDF2AE0CDD05E

【JS】 操作数组：将第N个对象移动到第1个

【JS】 操作数组：在指定数组位置之后插入新内容

辞职信

一个评分样式的自白

固定提示窗口

复选框(checkbox)练习

缩放练习

利用锚点来做Tab选项卡

标题一

标题二

标题三

标题一

标题二

标题三

Microsoft.AlphaImageLoader滤镜讲解

【JS】操作数组：将第N个对象移动到第1个

【JS】操作数组：在指定数组位置之后插入新内容