2022年图片下拉选择器的制作(2)CSSHTML教程.docx

《2022年图片下拉选择器的制作(2)CSSHTML教程.docx》由会员分享，可在线阅读，更多相关《2022年图片下拉选择器的制作(2)CSSHTML教程.docx（5页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、2022年图片下拉选择器的制作(2)CSSHTML教程第三，图片下拉列表框的滚动，要保证自动滚动到相应的图片出现在列表框的顶端：当手动滚动停止时，假如滚动条趋势是向下滚动，则自动接着向下滚动直至最近的图片在列表框的顶端，反之亦然。例子中我们将全部供选图片命名为“0.gif”、“1.gif”“9.gif”，并放在“head”书目下。下面我们以实际程序解决这些问题：<!-建立表单-><form name=myform method=post action=>请选择图片：<div id=imgBox><!-这里是图片下拉选择器的位置-></div

2、><input name=myhead type=text id=myface size=10 value=></form> <script language=JavaScript><!-var imgWidth=64; /列表框中图片的宽度;var imgHeight=64; /列表框中图片的高度;var imgsrc= /供选图片的路径。数字序号四字将在程序中替换为0,1,2.，不要手工更改为数字 ;var selectedNo=7; /默认选定的图片序号;var selecteSize=2; /下拉列表框中显示的图片数;/* 以下把图片和层

3、输出在imgBox的位置：我们用变量isin记录鼠标是否在该控件上；用CSS定义下拉列表框的滚动条，overflow-x:hidden;overflow-y:scroll;指水平方向不滚动，竖直方面滚动；用for()循环依次把图片输出到下拉列表框。*/var myHTML=<SPAN onmouseover=isin=true onmouseout=isin=false>myHTML+=<table width=1 onclick=showlist(this) title=选择提示框 border=0 cellspacing=0 cellpadding=0><tr

4、><td><img name=imgselected border=1 src=+imgSrc.replace(数字序号,selectedNo)+ WIDTH=+(imgWidth)+ HEIGHT=+imgHeight+></td><td valign=top><img src=myHTML+=<DIV onscroll=scrollud() id=imgBox n;myHTML+=style=position:absolute;left=-800;top=0;background-color:#FFFFFF;border:

5、1px solid #000000;overflow-x:hidden;overflow-y:scroll; width:+(imgWidth+20)+px; height: +imgHeight*selecteSize+px>for(i=0;i<10;i+){myHTML+=<img listID=+i+ src=+imgSrc.replace(数字序号,i)+ alt=+imgSrc.replace(数字序号,i)+ width=+imgWidth+ height=+imgHeight+ onclick=selectme(this) onload=if(init

6、)init()><BR>}myHTML+= </DIV></SPAN>imgBox.outerHTML=myHTML;/* 以下限制下拉列表框的出现或隐藏 */function showlist(obj){/这个函数将在选择提示框点击时激活/假如列表框已经出现，这次点击则隐藏：if(imgBox.style.pixelLeft!=-800){imgBox.style.pixelLeft=-800; return;}/读取选择提示框在窗体中的肯定位置：/在父容器中的相对位置：var mytop=obj.offset

7、Top;var myleft=obj.offsetLeft;/依次读取父容器在更高一级父容器中的相对位置：while(obj=obj.offsetParent){myleft+=obj.offsetLeft;mytop+=obj.offsetTop;}/现在已经得到选择提示框的肯定位置myleft和mytop。/下拉列表拉就出现在这个肯定位置的正下方：imgBox.style.left=myleft;imgBox.style.top=mytop+imgHeight+2;}var isin=false;function selectme(obj){ /这个函数将在窗体点击或选定图片时激活，窗体点击中传递的参数是null。if(!isin|obj){imgBox.style.pixelLeft=-800;} /隐藏列表框if(obj){/变更选择提示框中的图片和myhead输入框中的值：/listID是对象的自定义属性，即在对象的