论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > javascript教程教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

图片下拉选择器的制作

文章类别:javascript教程 | 发表日期:2008-10-5 17:46:13

  相信大家都见过一些软件里的图片下拉选择控件吧?喏,OICQ中就有。但网页上的你见过没有?小阳今天就为你推出你心怡已久的这个控件,下面演示中就是了!效果还可以吧?心动不如行动,我们来看下是怎么弄出来的。
  演示:(点击这里在新窗口中打开演示页)





  我们先来看下做出这个控件需要解决哪些问题。

  第一,图片下拉列表框是一个层,它在选择提示框点击时出现,出现后在选择图片或窗体点击时再隐藏。

  它出现时位置要在选择提示框的正下方;隐藏实际上可以把它的位置定在屏幕之外(style.pixelLeft=-800)。

  第二,图片下拉列表框的位置。选择提示框不是层,图片下拉列表框出现的位置要在选择提示框的正下方,就必须读取选择提示框在窗体中的绝对位置,不能受选择提示框的位置和屏幕分辨率的影响。

  我们可以用“Object.offsetLeft”和“Object.offsetTop”获取对象(Object)在其父容器(offsetParent)中的相对位置。于是我们可以用while()循环向高一级父容器一层一层读取相对位置,它们的代数和就是该Object在最上层容器(窗体)中的绝对位置了。

  第三,图片下拉列表框的滚动,要保证自动滚动到相应的图片出现在列表框的顶端:当手动滚动停止时,如果滚动条趋势是向下滚动,则自动继续向下滚动直至最近的图片在列表框的顶端,反之亦然。

  例子中我们将所有供选图片命名为“0.gif”、“1.gif”……“9.gif”,并放在“head”目录下。下面我们以实际程序解决这些问题:

  

  程序最后“使窗体点击时selectme(obj)函数被激活”部分可以用document.body.onclick=new Function("selectme(null)")简单替换之。但为了不和其它程序的窗体点击事件冲突,我们用了这段代码。详见拙作《完美解决一个事件激活多个函数》。你也可以将"myhead" 的type值设为"hide",这里为了演示,就将它显示了出来。

  好了,这个控件“图片下拉选择器”已经做好了,把它应用到留言本、论坛等动态交互的网页上,真是最好不过了!

上一篇:用JS将网页窗口由小变大 人气:4565
下一篇:完美解决一个事件激活多个函数 人气:5319
视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058