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);
        }
  • 相关阅读:
    LSMW TIPS
    Schedule agreement and Delfor
    Running VL10 in the background 13 Oct
    analyse idoc by creation date
    New Journey Prepare
    EDI error
    CBSN NEWS
    Listen and Write 18th Feb 2019
    Microsoft iSCSI Software Target 快照管理
    通过 Microsoft iSCSI Software Target 提供存储服务
  • 原文地址:https://www.cnblogs.com/fanzg/p/3864775.html
Copyright © 2011-2022 走看看