zoukankan      html  css  js  c++  java
  • DIV模拟的下拉框特效

    CSS:

    <style type="text/css"> 
        body, ul, li 
        { 
            margin: 0; 
            padding: 0; 
            font-size: 13px; 
        } 
        ul, li 
        { 
            list-style: none; 
        } 
        #divselect 
        { 
            width: 186px; 
            margin: 80px auto; 
            position: relative; 
            z-index: 10000; 
        } 
        #divselect cite 
        { 
            width: 150px; 
            height: 24px; 
            line-height: 24px; 
            display: block; 
            color: #807a62; 
            cursor: pointer; 
            font-style: normal; 
            padding-left: 4px; 
            padding-right: 30px; 
            border: 3px solid #333333; 
            background: url(xjt.png) no-repeat right center; 
        } 
        #divselect ul 
        { 
            width: 184px; 
            border: 1px solid #333333; 
            background-color: #ffffff; 
            position: absolute; 
            z-index: 20000; 
            margin-top: -1px; 
            display: none; 
        } 
        #divselect ul li 
        { 
            height: 24px; 
            line-height: 24px; 
        } 
        #divselect ul li a 
        { 
            display: block; 
            height: 24px; 
            color: #333333; 
            text-decoration: none; 
            padding-left: 10px; 
            padding-right: 10px; 
        } 
        #divselect ul li a:hover 
        { 
            background-color: #CCC; 
        } 
        p 
        { 
            margin: 10px auto; 
            width: 920px; 
        } 
        #n 
        { 
            margin: 10px auto; 
            width: 920px; 
            border: 1px solid #CCC; 
            font-size: 12px; 
            line-height: 30px; 
        } 
        #n a 
        { 
            padding: 0 4px; 
            color: #333; 
        } 
    </style> 

    HTML:

    <form id="form1"action="" method="post">
    <div id="divselect" class="divselect">
          <cite>请选择特效分类</cite>
          <ul>
             <li><a href="javascript:;" selectid="1">导航菜单</a></li>
             <li><a href="javascript:;" selectid="2">下拉select效果</a></li>
             <li><a href="javascript:;" selectid="3">select模拟</a></li>
             <li><a href="javascript:;" selectid="4">DIVCSS5特效</a></li>
             <li><a href="javascript:;" selectid="5">jquery 下拉特效</a></li>
          </ul>
      </div>
      <br />
      <div id="divselect" class="divselect1">
          <cite>请选择特效分类</cite>
          <ul>
             <li><a href="javascript:;" selectid="6">导航</a></li>
             <li><a href="javascript:;" selectid="7">下拉</a></li>
             <li><a href="javascript:;" selectid="8">模拟</a></li>
             <li><a href="javascript:;" selectid="9">特效</a></li>
             <li><a href="javascript:;" selectid="10">下拉特效</a></li>
          </ul>
      </div>
      <input name="" value="" id="inputselect"/> //获取的数据
    
    </form>
    <input type="button" value="get" onclick="get()" />

    JS:

    $(function(){
        $.divselect(".divselect", "#inputselect");
        $.divselect(".divselect1", "#inputselect");
    });
    function get() {
            var dd = document.getElementById("inputselect");
            alert(dd.value);
        }
  • 相关阅读:
    DB2保存图片并读取动态显示图片
    DIV布局之position详解
    dojo之配置dojoconfig
    JAVA虚拟机内存架构
    UrlConnection的代理和返回状态码的问题
    自定义网站的icon和收藏夹图标
    DB2建库简单例子
    python学习笔记之函数(方法)
    python学习笔记之基础数据和控制
    MVC3学习:实现文章上一篇下一篇链接
  • 原文地址:https://www.cnblogs.com/fanzg/p/3864775.html
Copyright © 2011-2022 走看看