专栏首页Spring相关下拉菜单;手风琴;九宫格的Jquery的使用实例

下拉菜单;手风琴;九宫格的Jquery的使用实例

下拉菜单;手风琴;九宫格的Jquery的使用实例

1.下拉菜单

效果如图:

下拉.gif

代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
        <script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script>
    <style>
        li{
            width: 80px;
            background-color: deepskyblue;
            list-style: none;
            cursor:pointer;
        }
        ul > li.out {
            display: block;
            list-style: none;
            float: left;
            padding-left: 40px;
        }

        ul > li ul{
            position: relative;
            padding-left: 0px;
        }
        .beijing{
            width: 800px;
            height: 30px;
            background-color: skyblue;
            position: absolute;
            margin-top: -6px;
            z-index: -5;
        }


    </style>
</head>
<body>
<div class="beijing"></div>

<ul class="outUl">
    <li class="out">政策指南
        <ul>
            <li>政策指南1</li>
            <li>政策指南2</li>
            <li>政策指南3</li>
        </ul>
    </li>
    <li class="out">教务园地
        <ul>
            <li>教务园地1</li>
            <li>教务园地2</li>
            <li>教务园地3</li>
        </ul>
    </li>
    <li class="out">走进课堂
        <ul>
            <li>走进课堂1</li>
            <li>走进课堂2</li>
            <li>走进课堂3</li>
        </ul>
    </li>
</ul>

<script>

$(function () {
   var  $li = $("ul > li ul");
    $li.hide();
    $(".outUl>li.out").mouseenter(function () {
        $(this).children().show(500);
    });


    $(".outUl>li.out").mouseleave(function () {
        $li.hide(200);
    });
})


</script>

</body>
</html>

2.手风琴

效果如图:

手风琴.gif

代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script>

    <style>
        .container{

            width: 200px;
            height: 500px;
            border: 1px solid black;


        }
        .out{
            background-color: #00CCFF;
            cursor: pointer;
            /*cursor: help;*/
        }
        .inner{
            height: 120px;
        }

    </style>

</head>
<body>
<div class="container">

    <div>
        <div class="out">
            下拉列表1
        </div>
        <div class="inner">
            下拉列表的内容
        </div>
    </div>
    <div>
        <div class="out">
            下拉列表2
        </div>
        <div class="inner">
            下拉列表的内容
        </div>
    </div>
    <div>
        <div class="out">
            下拉列表3
        </div>
        <div class="inner">
            下拉列表的内容
        </div>
    </div>
    <div>
        <div class="out">
            下拉列表4
        </div>
        <div class="inner">
            下拉列表的内容
        </div>
    </div>
</div>

<script>
    $(function () {
        $(".container div.inner").hide();
        $(".container div.out").click(function () {
            console.log($(this).next(".inner").siblings().next(".inner"));
            $(this).next(".inner").toggle(200).parent().siblings().children(".inner").slideUp(200);
        });
    })
</script>

</body>
</html>

3.九宫格

效果如图:

jiu.gif

代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script>
    <style>

        * {
            background-color: black;
        }

        .container {
            width: 500px;
            border: 1px solid white;
            margin: auto;
            overflow: hidden;

        }

        .container div {

            width: 135px;
            height: 165px;
            display: block;
            margin: 10px 10px;
            float: left;


        }

        .red{
            background-color: red;
        }
        .green{
            background-color: green;

        }

        .blue{
            background-color: blue;

        }


    </style>

</head>
<body>
<div class="container">


    <div  class="red"></div>
    <div  class="blue"></div>
    <div  class="green"></div>

    <div  class="red"></div>
    <div  class="blue"></div>
    <div  class="green"></div>

    <div  class="red"></div>
    <div  class="blue"></div>
    <div class="green"></div>

</div>

<script>
$(function () {

    $(".container>div").mouseenter(function () {
        $(this).css("opacity",1).siblings().css("opacity",0.4);
    });

    $(".container").mouseleave(function () {
        $(".container div").css("opacity",1);
    })
})
</script>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery 选中某一行

    Dream城堡
  • 手风琴图片和钢琴导航栏JQ滑动特效

    Dream城堡
  • 第6章—渲染web视图—使用Apache Tiles视图定义布局

    Tiles是一个免费的开源模板Java应用程序的框架。基于复合模式简化的用户界面的构建。对于复杂的网站仍是最简单、最优雅的方式与任何MVC技术一起工作。Stru...

    Dream城堡
  • jquery操作DOM 元素(3)

    .detach()   从DOM 中去掉所匹配的元素。     .detach([selector])       select...

    用户1197315
  • jquery操作DOM 元素(2)

    .after()   在匹配的元素集合中的每个元素后面插入参数指定的内容,作为其兄弟节点。   .after(content[,conten...

    用户1197315
  • 简单实用的纯CSS百分比圆形进度条代码解析/源码下载

    percircle是一款简单实用的纯CSS百分比圆形进度条插件。你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮...

    用户5997198
  • forEach循环实现卡片列表

    王小婷
  • 如何清除浮动

    如何清除浮动 大家都知道,浮动会对文档产生影响,具体来看看会对文档产生什么影响? 清除浮动后的效果: ? 未清除浮动后的效果: ? 实例代码(未清除浮动): ...

    HTML5学堂
  • 无缝滚动案例简单实现代码

    <!doctype html> <html> <meta charset="utf-8"> <head> <title></title> <st...

    用户1730674
  • HTML规范 - 整体结构

    申霖

扫码关注云+社区

领取腾讯云代金券