当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 图片下拉选择器的制作(1)

HTML/XHTML教程
HTML之框架标记
HTML之多媒体
HTML之表格标记
HTML一般概念
HTML文件HEAD内部标记浅析
HTML文档中小meta标签的大作用
html教学+HTML语法大全
HTML的排版标记
HTML参考
HTML表单元素覆盖样式元素问题及其补救之道
HTML标签详解
HTML标记大全参考手册
HTML 标记一览
Email地址在网页中的保护
Cool Web Scrollbars - 定制网页的滚动条
“画中画”效果--谈IFRAME标签的使用
给网页文字加上即时提示
改变浏览者的鼠标型状
防止空连接#返回到页面顶端
创造收藏夹中的个性化图标

HTML/XHTML教程 中的 图片下拉选择器的制作(1)


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 64 ::
收藏到网摘: n/a

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

  演示:(点击这里在新窗口中打开演示页)
      我们先来看下做出这个控件需要解决哪些问题。

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

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

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

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