贴表情随记
相信大家都见过或用过发帖的时候，后边有个表情选择。当然这没有什么新鲜的，网上找段代码直接copy过来就能用啦。如图：
这是这段代码的效果。代码如下：
代码
1 <div style="float:left;"><div style="float:left">标题:<input type="text" id="_txt_tietitle" style="width:400px" maxlength="30" title="限30字符" /></div>
2
3 <div id="imgBox" style=" float:left; margin-left:20px "><!--这里是图片下拉选择器的位置--></div>
4
5 <script type="text/javascript" language="JavaScript">
6
7 var imgWidth=24; //列表框中图片的宽度;
8 var imgHeight=24; //列表框中图片的高度;
9 var imgSrc="sys/数字序号.gif"; //供选图片的路径。"数字序号"四字将在程序中替换为0,1,2...，不要手工更改为数字 ;
10 var selectedNo=1; //默认选定的图片序号;
11 var selecteSize=5; //下拉列表框中显示的图片数;
12
13
14 /* 以下把图片和层输出在"imgBox"的位置：
15 我们用变量"isin"记录鼠标是否在该控件上；用CSS定义下拉列表框的滚动条，"overflow-x:hidden;overflow-y:scroll;"指水平方向不滚动，竖直方面滚动；
16 用for()循环依次把图片输出到下拉列表框。
17 */
18 var myHTML='<SPAN onmouseover="isin=true" onmouseout="isin=false">';
19 myHTML+='<table width="1" onclick="showlist(this)" title="选择表情" border="0" cellspacing="0" cellpadding="0"><tr><td><img name="imgselected" border=0 src="'+imgSrc.replace("数字序号",selectedNo)+'" WIDTH='+(imgWidth)+' HEIGHT='+imgHeight+'></td><td valign=top><img src="sys/top_04.gif" ></td></tr></table>';
20 myHTML+='<DIV onscroll="scrollud()" id="imgBox" \n';
21 myHTML+='style="position:absolute;left=-800;top=0;background-color:#FFFFFF;border: 1px solid #000000;overflow-x:hidden;overflow-y:scroll; width:'+(imgWidth+20)+'px; height: '+imgHeight*selecteSize+'px">';
22 for(i=0;i<20;i++){
23 myHTML+="<img listID="+i+" src='"+imgSrc.replace("数字序号",i)+"' alt='"+imgSrc.replace("数字序号",i)+"' width="+imgWidth+" height="+imgHeight+" onclick='selectme(this)' onload='if(init)init()'><BR>";
24 }
25 myHTML+= "</DIV></SPAN>";
26 imgBox.outerHTML=myHTML;
27 imgBox.style.pixelLeft=-800;
28
29 /* 以下控制下拉列表框的出现或隐藏 */
30 function showlist(obj){//这个函数将在选择提示框点击时激活
31 //如果列表框已经出现，这次点击则隐藏：
32 if(imgBox.style.pixelLeft!=-800){imgBox.style.pixelLeft=-800; return;}
33
34 //读取选择提示框在窗体中的绝对位置：
35 //在父容器中的相对位置：
36 var mytop=obj.offsetTop;
37 var myleft=obj.offsetLeft;
38 //依次读取父容器在更高一级父容器中的相对位置：
39 while(obj=obj.offsetParent){
40 myleft+=obj.offsetLeft;
41 mytop+=obj.offsetTop;
42 }
43 //现在已经得到选择提示框的绝对位置myleft和mytop。
44 //下拉列表拉就出现在这个绝对位置的正下方：
45 imgBox.style.left=myleft;
46 imgBox.style.top=mytop+imgHeight+2;
47
48 }
49
50 var isin=false;
51 function selectme(obj){ //这个函数将在窗体点击或选定图片时激活，窗体点击中传递的参数是null。
52 if(!isin||obj){imgBox.style.pixelLeft=-800;} //隐藏列表框
53 if(obj){
54 //改变选择提示框中的图片和"myhead"输入框中的值：
55 //listID是对象的自定义属性，即在对象的标签中定义了这个属性值，现在就可以读取或改变。
56 //myform.myhead.value=imgSrc.replace("数字序号",obj.listID);
57 param_expressimage=imgSrc.replace("数字序号",obj.listID);
58 document.images["imgselected"].src=imgSrc.replace("数字序号",obj.listID);
59 }
60 }
61
62 /* 以下控制下拉列表框的自动滚动 */
63 var mytime=setTimeout("",0);
64 var pre_X=0; //这个变量用来记录滚动前滚动条的位置
65 function scrollud(){ //本函数在下拉列表框滚动时被激活
66 var current_X=imgBox.scrollTop; //记录函数激活时滚动条的位置
67 //判断向上还是向下滚动，并自动滚动到"imgHeight"的整数倍。
68 //我们改变列表框的scrollTop值时，会自动激发其onscroll事件，循环激活本函数。
69 if(current_X>pre_X && imgBox.scrollTop< Math.ceil(imgBox.scrollTop/imgHeight)*imgHeight){
70 clearTimeout(mytime);
71 mytime=setTimeout("imgBox.scrollTop=Math.round(imgBox.scrollTop+1);",1);
72 }
73 else if(current_X<pre_X && imgBox.scrollTop> Math.floor(imgBox.scrollTop/imgHeight)*imgHeight){
74 clearTimeout(mytime);
75 mytime=setTimeout("imgBox.scrollTop=Math.round(imgBox.scrollTop-1);",1);
76 }
77 pre_X=current_X;
78 }
79 //使列表框自动滚动到默认选定的图片位置，并给"myhead"输入框以默认值
80 function init(){ //本函数在每个列表框中的图片加载时激活
81 imgBox.scrollTop=selectedNo*imgHeight;
82 //myform.myhead.value=imgSrc.replace("数字序号",selectedNo);
83 //param_expressimage=imgSrc.replace("数字序号",selectedNo);
84 }
85
86 /* 以下使窗体点击时selectme(obj)函数被激活： */
87 myActivation="selectme(null)";
88 if(document.body.onclick)
89 {
90 eval(document.body.onclick.toString().replace('anonymous()','bodyclick()'));
91 document.body.onclick=new Function("bodyclick();"+myActivation);
92 }
93 else document.body.onclick=new Function(myActivation);
94
95 </script>
大家可以完完全全的拷贝这段代码到记事本里，保存为html文件直接运行就能看到效果。当然脚本里边的 sys/数字序号.gif 这个是表情的地址还是要改的看到就更明显了。好了这没什么好说的。
但是最近我碰到个问题，简单说就是这段代码直接运行没问题，可是作为浮层弹出的时候就报错说imgBox不是对象或为空，我就郁闷了很久。哦~我说的浮层可能不是很明白我贴几张图就知道了，如图：
也就是弹出窗的时候....照理说应该行的，可它就是抬杠！哎没办法，只好一遍一遍的调。结果一无所获...后来还是经我们寝室高手小猪的提醒说。他在调的时候发现弹窗以后imgBox很奇怪的就成数组了。我的乖乖~ 这么一说我好像明白了。是不是因为这段代码在页面运行的时候就先创建了一个imgBox.但弹出浮层的时候又创建了一个...这段代码又是写在浮层页面的.应该是，既然是数组那就试试用[]下标的方法得到想要的对象....但是有的imgBox却是在页面加载的时候就要用的所以必须还要用imgBox.下面是改过的代码。终于能运行了 但是跟单独运行却反了，弹窗能用，单独运行报错...哈哈哈！ 不管怎么说问题终于解决了吧...代码如下：
代码
1
2 <script type="text/javascript" language="JavaScript">
3
4 var imgWidth=24; //列表框中图片的宽度;
5 var imgHeight=24; //列表框中图片的高度;
6 var imgSrc="images/sys/数字序号.gif"; //供选图片的路径。"数字序号"四字将在程序中替换为0,1,2...，不要手工更改为数字 ;
7 var selectedNo=1; //默认选定的图片序号;
8 var selecteSize=5; //下拉列表框中显示的图片数;
9
10
11 /* 以下把图片和层输出在"imgBox"的位置：
12 我们用变量"isin"记录鼠标是否在该控件上；用CSS定义下拉列表框的滚动条，"overflow-x:hidden;overflow-y:scroll;"指水平方向不滚动，竖直方面滚动；
13 用for()循环依次把图片输出到下拉列表框。
14 */
15 var myHTML='<SPAN onmouseover="isin=true" onmouseout="isin=false">';
16 myHTML+='<table width="1" onclick="showlist(this)" title="选择表情" border="0" cellspacing="0" cellpadding="0"><tr><td><img id="selected" name="imgselected" border=0 src="'+imgSrc.replace("数字序号",selectedNo)+'" WIDTH='+(imgWidth)+' HEIGHT='+imgHeight+'></td><td valign=top><img src="images/top_04.gif" ></td></tr></table>';
17 myHTML+='<DIV onscroll="scrollud()" id="imgBox" \n';
18 myHTML+='style="position:absolute;left=-800;top=0;background-color:#FFFFFF;border: 1px solid #000000;overflow-x:hidden;overflow-y:scroll; width:'+(imgWidth+20)+'px; height: '+imgHeight*selecteSize+'px">';
19 for(i=0;i<20;i++){
20 myHTML+="<img listID="+i+" src='"+imgSrc.replace("数字序号",i)+"' alt='"+imgSrc.replace("数字序号",i)+"' width="+imgWidth+" height="+imgHeight+" onclick='selectme(this)' onload='if(init)init()'><BR>";
21 }
22 myHTML+= "</DIV></SPAN>";
23 imgBox.outerHTML=myHTML;
24 imgBox.style.pixelLeft=-800;
25
26 /* 以下控制下拉列表框的出现或隐藏 */
27 function showlist(obj){//这个函数将在选择提示框点击时激活
28 //如果列表框已经出现，这次点击则隐藏：
29 if(imgBox[0].style.pixelLeft!=-800){imgBox[0].style.pixelLeft=-800; return;}
30
31 //读取选择提示框在窗体中的绝对位置：
32 //在父容器中的相对位置：
33 var mytop=obj.offsetTop;
34 var myleft=obj.offsetLeft;
35 //依次读取父容器在更高一级父容器中的相对位置：
36 while(obj=obj.offsetParent){
37 myleft+=obj.offsetLeft;
38 mytop+=obj.offsetTop;
39 }
40 //现在已经得到选择提示框的绝对位置myleft和mytop。
41 //下拉列表拉就出现在这个绝对位置的正下方：
42 imgBox[0].style.left=myleft-290;
43 imgBox[0].style.top=mytop+imgHeight-30;
44
45 }
46
47 var isin=false;
48 function selectme(obj){ //这个函数将在窗体点击或选定图片时激活，窗体点击中传递的参数是null。
49 if(!isin||obj){imgBox[0].style.pixelLeft=-800;} //隐藏列表框
50 if(obj){
51 //改变选择提示框中的图片和"myhead"输入框中的值：
52 //listID是对象的自定义属性，即在对象的标签中定义了这个属性值，现在就可以读取或改变。
53 //myform.myhead.value=imgSrc.replace("数字序号",obj.listID);
54 param_expressimage=imgSrc.replace("数字序号",obj.listID);
55 document.getElementById("selected").setAttribute("src",imgSrc.replace("数字序号",obj.listID));
56 // document.images["imgselected"].src=imgSrc.replace("数字序号",obj.listID);
57 }
58 }
59
60 /* 以下控制下拉列表框的自动滚动 */
61 var mytime=setTimeout("",0);
62 var pre_X=0; //这个变量用来记录滚动前滚动条的位置
63 function scrollud(){ //本函数在下拉列表框滚动时被激活
64 var current_X=imgBox.scrollTop; //记录函数激活时滚动条的位置
65 //判断向上还是向下滚动，并自动滚动到"imgHeight"的整数倍。
66 //我们改变列表框的scrollTop值时，会自动激发其onscroll事件，循环激活本函数。
67 if(current_X>pre_X && imgBox.scrollTop< Math.ceil(imgBox.scrollTop/imgHeight)*imgHeight){
68 clearTimeout(mytime);
69 mytime=setTimeout("imgBox.scrollTop=Math.round(imgBox.scrollTop+1);",1);
70 }
71 else if(current_X<pre_X && imgBox.scrollTop> Math.floor(imgBox.scrollTop/imgHeight)*imgHeight){
72 clearTimeout(mytime);
73 mytime=setTimeout("imgBox.scrollTop=Math.round(imgBox.scrollTop-1);",1);
74 }
75 pre_X=current_X;
76 }
77 //使列表框自动滚动到默认选定的图片位置，并给"myhead"输入框以默认值
78 function init(){ //本函数在每个列表框中的图片加载时激活
79 imgBox.scrollTop=selectedNo*imgHeight;
80 //myform.myhead.value=imgSrc.replace("数字序号",selectedNo);
81 //param_expressimage=imgSrc.replace("数字序号",selectedNo);
82 }
83
84 /* 以下使窗体点击时selectme(obj)函数被激活： */
85 myActivation="selectme(null)";
86 if(document.body.onclick)
87 {
88 eval(document.body.onclick.toString().replace('anonymous()','bodyclick()'));
89 document.body.onclick=new Function("bodyclick();"+myActivation);
90 }
91 else document.body.onclick=new Function(myActivation);
92
93 </script>
效果图：
