图片下拉选择器的制作
时间:2007-10-22 来源:不详 作者:林子
用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><td><img name="imgselected" border=1 src="' imgSrc.replace("数字序号",selectedNo) '" WIDTH=' (imgWidth) ' HEIGHT=' imgHeight '></td><td valign=top><img src="menu.gif"></td></tr></table>';
myHTML ='<DIV onscroll="scrollud()" id="imgBox" ';
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">';
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)init()'><BR>";
}
myHTML = "</DIV></SPAN>";
copyright dedecms
imgBox.outerHTML=myHTML;
dedecms.com
/* 以下控制下拉列表框的出现或隐藏 */
function showlist(obj){//这个函数将在选择提示框点击时激活
//如果列表框已经出现,这次点击则隐藏:
if(imgBox.style.pixelLeft!=-800){imgBox.style.pixelLeft=-800; return;} 织梦好,好织梦
//读取选择提示框在窗体中的绝对位置:
//在父容器中的相对位置:
var mytop=obj.offsetTop;
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"输入框中的值:
上一篇:使主页呈现“飞舞”特效 下一篇:用JavaScript实现浏览器地震效果
文章评论
共有位Admini5网友发表了评论 查看完整内容