精华内容
下载资源
问答
  • 滚动条下拉DIV固定在头部不动效果,想必很多的朋友都有见到过吧,下面为大家详细介绍下使用jquery是如何实现的,感兴趣的朋友可以参考下
  • 主要介绍了jquery实现点击其他区域时隐藏下拉div和遮罩层的方法,涉及jQuery响应鼠标事件动态改变页面元素样式的功能,需要的朋友可以参考下
  • HTML5用div实现下拉列表

    万次阅读 2018-10-08 18:08:48
    HTML5用div实现下拉列表 下拉列表分为无序列表和有序列表 无序列表 <html> <body> <h4>一个无序列表:</h4> &lt...

    HTML5用div实现下拉列表

    下拉列表分为无序列表和有序列表

    无序列表

    <html>
    <body>
    <h4>一个无序列表:</h4>
    <ul>
      <li>咖啡</li>
      <li>茶</li>
      <li>牛奶</li>
    </ul>
    </body>
    </html>
    

    在这里插入图片描述

    有序列表

    <!DOCTYPE html>
    <html>
    <body>
    
    <ol>
      <li>咖啡</li>
      <li>牛奶</li>
      <li>茶</li>
    </ol>
    
    <ol start="50">
      <li>咖啡</li>
      <li>牛奶</li>
      <li>茶</li>
    </ol>
     
    </body>
    </html>
    

    在这里插入图片描述

    嵌套列表

    <html>
    
    <body>
    
    <h4>一个嵌套列表:</h4>
    <ul>
      <li>咖啡</li>
      <li>茶
        <ul>
        <li>红茶</li>
        <li>绿茶</li>
        </ul>
      </li>
      <li>牛奶</li>
    </ul>
    
    </body>
    </html>
    

    在这里插入图片描述

    嵌套列表2

    <html>
    
    <body>
    
    <h4>一个嵌套列表:</h4>
    <ul>
      <li>咖啡</li>
      <li>茶
        <ul>
        <li>红茶</li>
        <li>绿茶
          <ul>
          <li>中国茶</li>
          <li>非洲茶</li>
          </ul>
        </li>
        </ul>
      </li>
      <li>牛奶</li>
    </ul>
    
    </body>
    </html>
    

    在这里插入图片描述

    定义列表

    <html>
    
    <body>
    
    <h2>一个定义列表:</h2>
    
    <dl>
       <dt>计算机</dt>
       <dd>用来计算的仪器 ... ...</dd>
       <dt>显示器</dt>
       <dd>以视觉方式显示信息的装置 ... ...</dd>
    </dl>
    
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • 使用DIV+CSS技术实现导航栏菜单的制作,鼠标经过每个菜单标题,它的子菜单就会出现。
  • <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...<... <head> <... charset=gb2312″ />...div下拉菜单之上</title> <style type=”text/css”> div{ p
  • 滚动条下拉DIV固定在头部不动 javascript" src="http://img.fishburg.net/ks/js/jquery-1.8.js"> *{padding:0;margin:0;} .ab{ width:100%; background-color:#eee; height:250px; text-align:center; line-...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>滚动条下拉DIV固定在头部不动</title>
    <script type="text/javascript" src="http://img.fishburg.net/ks/js/jquery-1.8.js"></script>
    <style>
    *{padding:0;margin:0;}
    .ab{ width:100%; background-color:#eee; height:250px; text-align:center; line-height:250px;}
    .bc{ width:100%; background-color:#eee; text-align:center; text-align:center; color:#fff; font-size:24px; background-color:#060;}
    .pf{ width:100%; height:50px; background-color:#C00; text-align:center; line-height:50px; color:#fff;}

    /*---------------------漂浮导航---------------------------*/
    html{ _background-image:url(about:blank); _background-attachment:fixed;/** 防止 ie6 抖动 **/}
    .float{ position:fixed; z-index:999999; top:0px;}
    * html .float{ position:absolute; _top:expression(documentElement.scrollTop-0);}
    </style>

    </head>

    <body>
    <div class="ab">第一版块</div>
    <div class="pf">漂浮内容</div>
    <script type="text/javascript">
    window.οnscrοll=function(){
     if ($(document).scrollTop() > 250)
     {
      //$("#pf_nav").show();
      $(".pf").addClass('float');
     }else{
      //$("#pf_nav").hide();
      $(".pf").removeClass('float');
     }
    }
    </script>
    <div class="bc">
      <p>
        <script language="javascript">
    for(i=0;i<50;i++){
     document.write(i+"<br />");
    }
      </script>
      </p>
    </div>
    </body>
    </html>

    展开全文
  • 本文实例讲述了JS+DIV+CSS实现仿表单下拉列表效果。分享给大家供大家参考。具体如下: JS+DIV+CSS实现仿表单下拉列表效果,是完全用CSS技术再配合JS实现的效果,用来代替传统的Select下拉框,虽然目前来说,此代码还...
  • web中下拉菜单原理,即在用JavaScript控制不同DIV的现实和隐藏!
  • 实现过程中需要注意: 表示距离的数字后面要加单位 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;下拉菜单...

    实现过程中需要注意: 表示距离的数字后面要加单位

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>下拉菜单示例</title>
    <script language='javaScript'>
    function show(menu)
    { 
    	document.getElementById(menu).style.visibility='visible';
    }
    function hide()
    {
    	document.getElementById("menu1").style.visibility='hidden';
    	document.getElementById("menu2").style.visibility='hidden';
    	document.getElementById("menu3").style.visibility='hidden';
    }
    </script>
    </head>
    <body>
      <table> 
        <tr bgcolor='#9999FF' align='center'>
        <td width='120' onMouseMove="show('menu1')" onMouseOut="hide()">系列课程</td>
        <td width='120' onMouseMove="show('menu2')" onMouseOut="hide()">教学课件</td>
        <td width='120' onMouseMove="show('menu3')" onMouseOut="hide()">课程大纲</td>
        </tr>
      </table>
      <div id="menu1" onMouseMove="show('menu1')" onMouseOut="hide()"
           style='background:#9999FF; position:absolute; left:12px; top:38px; width:120px;
           visibility:hidden'>
           <span>c++程序设计</span><br>
           <span>java程序设计</span><br>
           <span>c#程序设计</span><br>
      </div>
      <div id="menu2" onMouseMove="show('menu2')" onMouseOut="hide()"
           style='background:#9999FF; position:absolute; left:137px; top:38px; width:120px;
           visibility=hidden'>
           <span>c++课件</span><br>
           <span>java课件</span><br>
           <span>c#课件</span><br>
      </div>
      <div id="menu3" onMouseMove="show('menu3')" onMouseOut="hide()"
           style='background:#9999FF; position:absolute; left:260px; top:38px; width:120px;
           visibility=hidden'>
           <span>c++教学大纲</span><br>
           <span>java教学大纲</span><br>
           <span>c#教学大纲</span><br>
      </div>
    </body>
    </html>

     

    展开全文
  • 下拉菜单div及赋值

    2014-09-06 19:01:32
    下拉菜单div层!实现完美页面设计!欢迎下载!
  • js+div实现下拉列表

    千次阅读 2008-11-06 11:44:00
    .selectDiv { border: 1px solid #ff9900;} .optionDiv { border:1px solid #ff9900;border-top:0px;position:absolute;visibility:hidden;} .optionDiv div { font-size:12px;font-family:Tahoma;...
    <style> 
    
    .selectDiv { border: 1px solid #ff9900;}
    .optionDiv { border:1px solid #ff9900;border-top:0px;position:absolute;visibility:hidden;}
    .optionDiv div { font-size:12px;font-family:Tahoma;padding-left:8px;line-height:160%;cursor:default;width:100%;}
    .defaultSelect { font-size:12px;font-family:Tahoma;text-align:center;border:1px solid #ff9900;cursor:default;width:100px;}
    .arrow { font-family:webdings;line-height:13px;border:1px outset buttonhighlight;background-color:#ff9900;width:15px;text-align:center;cursor:default;font-size:8px;}
    </style>
    <SCRIPT LANGUAGE="JavaScript" DEFER>
    //用户变量
    var oWhere = document.body;
    var OptionText = new Array();
    OptionText[0] = "--优秀网站--";
    OptionText[1] = "CSDN.net";
    OptionText[2] = "蓝色理想";
    OptionText[3] = "PcHome";
    OptionText[4] = "MSDN.com";
    //下拉菜单主体
    var selectDiv = document.createElement("table");
    var selectDivTR = selectDiv.insertRow();
    var defaultValueTD = selectDivTR.insertCell();
    var arrow = selectDivTR.insertCell();
    with(selectDiv)cellSpacing=0,cellPadding=0,border=0,className="selectDiv";
    with(defaultValueTD)innerText = OptionText[0],className="defaultSelect";
    with(arrow)innerText=6,className="arrow";
    oWhere.appendChild(selectDiv);
    //外层Div
    var optionDiv = document.createElement("div");
    //设置下拉菜单选项的坐标和宽度
    with(optionDiv.style) {
    var select = selectDiv;
    var xy = getSelectPosition(select);
    pixelLeft = xy[0];
    pixelTop = xy[1]+select.offsetHeight;
    width = selectDiv.offsetWidth;
    optionDiv.className = "optionDiv";
    }
    //下拉菜单内容
    var Options = new Array();
    for (var i=0;i<OptionText.length;i++) {
    Options[i] = optionDiv.appendChild(document.createElement("div"));
    }
    for (i=0;i<Options.length;i++) {
    Options[i].innerText = OptionText[i];
    }
    oWhere.appendChild(optionDiv);

    /*事件*/
    //禁止选择文本
    selectDiv.onselectstart = function() {return false;}
    optionDiv.onselectstart = function() {return false;}
    //下拉菜单的箭头
    arrow.onmousedown = function() {
    this.setCapture();
    this.style.borderStyle="inset";
    }
    arrow.onmouseup = function() {
    this.style.borderStyle="outset";
    this.releaseCapture();
    }
    arrow.onclick = function() {
    event.cancelBubble = true;
    optionDiv.style.visibility = optionDiv.style.visibility=="visible"?"hidden":"visible";
    }
    document.onclick = function() {
    optionDiv.style.visibility = "hidden";
    }
    defaultValueTD.onclick = function() {
    event.cancelBubble = true;
    optionDiv.style.visibility = optionDiv.style.visibility=="visible"?"hidden":"visible";
    }
    //移动Option时的动态效果
    for (i=0;i<Options.length;i++) {
    Options[i].attachEvent("onmouseover",function(){moveWithOptions("highlight","white")});
    Options[i].attachEvent("onmouseout",function(){moveWithOptions("","")});
    Options[i].attachEvent("onmouseup",selectedText);
    }
    function moveWithOptions(bg,color) {
    with(event.srcElement) {
       style.backgroundColor = bg;
       style.color = color;
    }
    }
    function selectedText() {
    with(event.srcElement) {
       defaultValueTD.innerText = innerText;
    }
    with(defaultValueTD.style)background="highlight",color="white";
    }
    /*通用函数*/
    //获取对象坐标
    function getSelectPosition(obj) {
    var objLeft = obj.offsetLeft;
    var objTop = obj.offsetTop;
    var objParent = obj.offsetParent;
    while (objParent.tagName != "BODY") {
       objLeft += objParent.offsetLeft;
       objTop += objParent.offsetTop;
       objParent = objParent.offsetParent;
    }
    return([objLeft,objTop]);
    }
    </SCRIPT>
    展开全文
  • div+css下拉菜单效果实现

    千次阅读 2017-04-03 22:41:21
    这篇博客主要是如何用div+css去完成下拉菜单效果的简单教程,适合和我一样刚入门的小伙伴,下拉菜单效果在网上很多插件,而我在自己写一个之前用的是bootstrap的下拉菜单效果,首先讲一讲完成效果,这个主要是用在...
  • 实现上拉加载最普遍的方式就是监听滚动条的滚动事件,而移动端的下拉刷新利用的是transform属性来进行位移,那用下拉刷新的方式实现上拉加载怎么样? html结构 <div class=main-box id=box1> <div class=popup-box...
  • DIV模仿下拉菜单

    2014-08-21 10:14:03
    使用DIV实现列表弹出,选择列表内容后将内容存储到input
  • 下拉菜单的四种实现方式

    万次阅读 2018-08-06 15:14:30
    今日在做下拉菜单时思考实现下拉菜单的几种实现方式,现在对这几种实现方式进行总结。 1:改变下拉菜单的display /*HTML结构*/ &amp;lt;div id=&quot;container&quot;&amp;gt; &amp;lt;...
  • angularjs——div+angularjs实现下拉

    千次阅读 2017-10-19 09:22:02
    angularjs——div+angularjs实现下拉树 1.效果图 2.前台代码 <ons-page ng-controller="checkPointController" ng-init="checkPointdata"> <ons-toolbar class="hlxny-head" ng-class="{'isIOS':...
  • vue实现el-select下拉隐藏显示div功能

    千次阅读 2020-05-29 10:48:17
    下拉选择不同的选项,显示不同的内容页面 先看效果 相关代码 <div style="margin-bottom:20px"> <div class="head-box"></div> <span class="span-word">逾期设置</span> <...
  • Javascript+DIV+CSS实现下拉菜单

    千次阅读 2012-05-04 00:20:06
    下拉菜单示例 //当鼠标移到菜单选项的时候显示对应的DIV function show(menu) { document.getElementById(menu).style.visibility="visible"; } //当鼠标移出的时候隐藏所有的DIV fun
  • 使用DIV+CSS实现下拉列表菜单

    千次阅读 2011-01-19 11:09:00
    <title>DIV+CSS实现下拉列表菜单 <!-- ul {  margin: 0px;  padding: 0px;  list-style-type: none; } li{  float:left;  width:160px;  margin-left:1px;  } ul li a{  ...
  • 不错的效果,实现div层或表格内容缓缓展开
  • div+css 下拉列表

    2012-09-04 17:14:11
    使用 div+css实现下拉列表的功能 兼容ie6 火狐
  • div class="col-sm-8 input-group" id="regtime2"> <input type="text" class="form-control" placeholder="YYYY-MM-DD" > <span class="input-group-addon"> <span class=...
  • HTML用DIV/CSS实现下拉列表

    千次阅读 2018-10-08 20:24:55
    div class="title" &gt; &lt;h1&gt;SYROS&lt;/h1&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=""&gt;HOME&lt;/a&gt; &lt;ul ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 40,159
精华内容 16,063
关键字:

下拉div实现方式