图片下拉选择器的制作(2)

网系我情

版主

Rank: 7 Rank: 7 Rank: 7

1^# 大中小发表于 2007-6-23 08:51 只看该作者

图片下拉选择器的制作(2)

第三，图片下拉列表框的滚动，要保证自动滚动到相应的图片出现在列表框的顶端：当手动滚动停止时，如果滚动条趋势是向下滚动，则自动继续向下滚动直至最近的图片在列表框的顶端，反之亦然。
6 P* n- C" e; M0 r: C
　　例子中我们将所有供选图片命名为“0.gif”、“1.gif”……“9.gif”，并放在“head”目录下。下面我们以实际程序解决这些问题：

!--建立表单--0 Q9 c1 h5 ~- e  s1 n: G, {
form name="myform" method="post" action=""请选择图片：
div id="imgBox"!--这里是图片下拉选择器的位置--/div
input name="myhead" type="text" id="myface" size="10" value=""1 [" i$ x7 c+ I  K* {$ r
/form
# @% g5 ~9 r6 J1 ?
script language="JavaScript"
!--
var imgWidth=64; //列表框中图片的宽度;% q' `  i8 e, ]
var imgHeight=64; //列表框中图片的高度;% \0 Z6 H6 y# o2 O1 ]
var imgSrc="head/数字序号.gif"; //供选图片的路径。"数字序号"四字将在程序中替换为0,1,2...，不要手工更改为数字 ;
var selectedNo=7; //默认选定的图片序号;
var selecteSize=2; //下拉列表框中显示的图片数;  * G; G: `4 m& ?0 j4 s) `
: `" _; ^1 }" ]2 J, ~$ H

/* 以下把图片和层输出在"imgBox"的位置：
我们用变量"isin"记录鼠标是否在该控件上；用CSS定义下拉列表框的滚动条，"overflow-x:hidden;overflow-y:scroll;"指水平方向不滚动，竖直方面滚动；
用for()循环依次把图片输出到下拉列表框。
*/
var myHTML='SPAN  onmouseout="isin=false"';  e4 I; Q  q3 p# k6 ^
myHTML ='table width="1"  title="选择提示框" border="0" cellspacing="0" cellpadding="0"trtdimg name="imgselected" border=1 src="' imgSrc.replace("数字序号",selectedNo) '" WIDTH=' (imgWidth) ' HEIGHT=' imgHeight '/tdtd valign=topimg src="menu.gif"/td/tr/table';
myHTML ='DIV onscroll="scrollud()" id="imgBox" \n';8 s9 r8 o) ?% P" b
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"';' `0 y3 T  ^  s: d
for(i=0;i10;i  ){
myHTML ="img listID=" i " src='" imgSrc.replace("数字序号",i) "' alt='" imgSrc.replace("数字序号",i) "' width=" imgWidth " height=" imgHeight " onclick='selectme(this)' onload='if(init)init()'BR";
}
myHTML = "/DIV/SPAN";
imgBox.outerHTML=myHTML;

/* 以下控制下拉列表框的出现或隐藏 */0 d/ T" m* G) c8 c
function showlist(obj){//这个函数将在选择提示框点击时激活
//如果列表框已经出现，这次点击则隐藏：3 `% y3 @0 B; ^
if(imgBox.style.pixelLeft!=-800){imgBox.style.pixelLeft=-800; return;}
& W$ d( u& i; ]+ f" {+ m9 Y0 g
//读取选择提示框在窗体中的绝对位置：1 J+ F5 K& r5 H/ n+ U. [7 M
//在父容器中的相对位置：
var mytop=obj.offsetTop;
var myleft=obj.offsetLeft;; Y6 P( G9 D4 D7 ^: H# `0 v$ ^
//依次读取父容器在更高一级父容器中的相对位置： 7 }3 S% @3 i+ K
while(obj=obj.offsetParent){
myleft =obj.offsetLeft; ( y. j3 b  v3 g
mytop =obj.offsetTop; , Y% y$ _9 u, P" }# s  @
}
//现在已经得到选择提示框的绝对位置myleft和mytop。
//下拉列表拉就出现在这个绝对位置的正下方：/ x2 [! H* F1 h" x: m
imgBox.style.left=myleft;) O) k+ @6 ^. y9 s- p
imgBox.style.top=mytop imgHeight 2;
+ ]! }" r, y5 W5 |
}  % ~3 T9 I5 P- V8 C% d+ H

var isin=false;8 l2 F2 @. Z! V# F/ X; i2 e; H
function selectme(obj){ //这个函数将在窗体点击或选定图片时激活，窗体点击中传递的参数是null。
if(!isin||obj){imgBox.style.pixelLeft=-800;} //隐藏列表框* f0 b% d* d. ]/ n
if(obj){/ c* V2 R& _) G" Y; [8 ?
//改变选择提示框中的图片和"myhead"输入框中的值：$ E& b0 _1 C+ G$ ~
//listID是对象的自定义属性，即在对象的标签中定义了这个属性值，现在就可以读取或改变。& X2 ?4 N! p7 y& t3 b/ \( P
myform.myhead.value=imgSrc.replace("数字序号",obj.listID);! ?$ y  E5 Y# @
document.images["imgselected"].src=imgSrc.replace("数字序号",obj.listID);
}
}

/* 以下控制下拉列表框的自动滚动 */% D1 R8 I/ T5 W% r( T8 ?2 D1 [
var mytime=setTimeout("",0);
var pre_X=0; //这个变量用来记录滚动前滚动条的位置, A6 R0 o, l7 U( {# t+ }0 M
function scrollud(){ //本函数在下拉列表框滚动时被激活- M6 e& E5 d) U8 q
var current_X=imgBox.scrollTop; //记录函数激活时滚动条的位置+ B4 E7 M; t4 i! H% Y, Z& {3 X
//判断向上还是向下滚动，并自动滚动到"imgHeight"的整数倍。
//我们改变列表框的scrollTop值时，会自动激发其onscroll事件，循环激活本函数。6 G5 j/ P$ R( R" c  }/ x: n1 D
if(current_Xpre_X  imgBox.scrollTop Math.ceil(imgBox.scrollTop/imgHeight)*imgHeight){# N) I% @; ^1 G/ p1 o
clearTimeout(mytime);
mytime=setTimeout("imgBox.scrollTop=Math.round(imgBox.scrollTop 1);",1);% t9 j$ d6 o+ l& h1 x
}% ?. x* L; y4 ?7 Y
else if(current_Xpre_X  imgBox.scrollTop Math.floor(imgBox.scrollTop/imgHeight)*imgHeight){' v: n7 i: C: c2 f
clearTimeout(mytime);
mytime=setTimeout("imgBox.scrollTop=Math.round(imgBox.scrollTop-1);",1);
}3 d" X1 f, R( i; H! L
pre_X=current_X;
}* {% L. _) j$ X* U
//使列表框自动滚动到默认选定的图片位置，并给"myhead"输入框以默认值3 G! j9 y; I$ o7 t$ s# r3 G
function init(){ //本函数在每个列表框中的图片加载时激活- H; x) s2 f& P7 |& S5 H
imgBox.scrollTop=selectedNo*imgHeight;
myform.myhead.value=imgSrc.replace("数字序号",selectedNo);
}

/* 以下使窗体点击时selectme(obj)函数被激活： */
myActivation="selectme(null)";
if(document.body.onclick)
{& z' Y# V- n9 H
eval(document.body.onclick.toString().replace('anonymous()','bodyclick()'));- [9 o" Y! ^4 w  S1 S3 g
document.body.onclick=new Function("bodyclick();" myActivation);
}
else document.body.onclick=new Function(myActivation);/ @' H  [8 a' A* T  i+ P
--
/script  - b3 |$ o& D( L8 y
( v" K9 i! b; b$ L+ p- C% k0 {
程序最后“使窗体点击时selectme(obj)函数被激活”部分可以用document.body.onclick=new Function("selectme(null)")简单替换之。但为了不和其它程序的窗体点击事件冲突，我们用了这段代码。

点击图标进入精品网摘收藏欢迎大家加入网络收藏夹

TOP

‹‹ 上一主题 | 下一主题 ››