jq - 代码天地

jq轮播：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
       section{
           height:350px;
           width:500px;
           position: relative;
           margin:0 auto;
           list-style: none;
           overflow: hidden;
       }
        section div{
            height: 350px;
            width: 500px;
            position: absolute;
        }

        ul{
            height: 30px;
            width: 180px;
            position: absolute;
            top:80%;
            font:20px/30px "";
            left:50%;
            z-index:100;
            transform:translate(-50%);
        }

        ul li{
            float:left;
            color:white;
            height: 28px;
            width: 28px;
            margin-left:5px;
            text-align:center;
            list-style: none;
            border:1px solid white;
        }
        .active{
            background-color:black;
        }
    </style>
</head>
<body>

   <section>
       <div style="background-color: pink;z-index:1;"></div>
       <div style="background-color: black;"></div>
       <div style="background-color: red;"></div>
       <div style="background-color: purple;"></div>
       <div style="background-color: orange;"></div>

       <ul>
           <li class="active">1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
           <li>5</li>
       </ul>
   </section>






<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js">

</script>

<script>



    let x=1;
    let num=0;
    let onoff=true;
     $("section>ul li").on("click",function(){//pre next;
             if(num!=$(this).index()){
                 num=$(this).index();
                 $("section>div").eq(num).animate({"zIndex":x++,"left":"100%"},0).animate({"left":"0%"},500);
                 $("li").removeClass("active").eq(num).addClass("active");
             }
             onoff=false;
     })


    // $(function () {
    //     $("div").on("click",()=>{fadeout(500)})
    // })

    //选择器
    //1：$("my");
    //2：查找含有特定字符的元素
    //id="foo:bar",id="foo[bar]";id="foo.bar";//#foo\\[bar\\]
    //3：dom节点的标签名；查找一个div；
    //$("div");
    //4:class.查找myclass;
    //$(".myclass");
    //5；*匹配所有元素；查找每一个元素；
    //$("*");
    //6:selector1,将每一个选择器匹配到的元素合并后一起返回；查找任意一个类的元素；
    //<div>div</div>
    // <p class="myClass">p class="myClass"</p>
    //     <span>span</span>
    //     <p class="notMyClass">p class="notMyClass"</p>
    //$("div,span,p.myclass")
    //7:在给定的祖先元素下匹配所有的后代元素；
    //ancestor;任何有效的选择器；descendant:匹配元素的选择器。且是第一个选择器的后代元素；
    //<form>
    // <label>Name:</label>
    // <input name="name" />
    //     <fieldset>
    //     <label>Newsletter:</label>
    // <input name="newsletter" />
    //     </fieldset>
    //     </form>
    //     <input name="none" />
    // $("form input")//:    [ <input name="name" />, <input name="newsletter" /> ]
    //8:paernt>child;在给定的父元素下匹配所有的子元素；匹配表单中所有的子级input元素。
    //$("form>input");
    //9:prev+next;匹配所有紧接在 prev 元素后的 next 元素;匹配所有跟在 label 后面的 input 元素;
    //$("label+input");
    //10:匹配 prev 元素之后的所有siblings 元素;找到所有与表单同辈的 input 元素
    //$("form ~ input""); 结果：<input name="none" />
    //11：获取匹配的第一个元素；
    // <ul>
    // <li>list item 1</li>
    // <li>list item 2</li>
    // <li>list item 3</li>
    // <li>list item 4</li>
    // <li>list item 5</li>
    // </ul>
    //$('li:first');<li>list item 1</li>
    //12:not(selector);去除所有与给定选择器匹配的元素；查找所有未选中的 input 元素
    //<input name="apple" />  <input name="flower" checked="checked" />
    //$("input:not(:checked)");<input name="apple" />
    //13::even匹配所有索引值为偶数的元素，从 0 开始计数;查找表格的1、3、5...行（即索引值0、2、4...）
    //<table>
    // <tr><td>Header 1</td></tr>
    // <tr><td>Value 1</td></tr>
    // <tr><td>Value 2</td></tr>
    // </table>
    //$("tr:even")[<tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr>]
    //14:odd；匹配所有索引值为奇数的元素，从 0 开始计数；查找表格的2、4、6行（即索引值1、3、5...）；
    //$("tr:odd")[<tr><td>Value 1</td></tr>];
    //15:；eq(index);匹配一个给定索引值的元素,从 0 开始计数;
    //$("tr:eq(1)")//<tr><td>Value 1</td></tr>;
    //16::gt(index);匹配所有大于给定索引值的元素;从 0 开始计数;
    //$("tr:gt(0)");
    //17::lang(language)选择指定语言的所有元素。$("div:lang(en)"),匹配有一个语言值等于所提供的语言代码，或以提供的语言代码开始，后面马上跟一个“ - ”的元素；
    //18;:last();获取最后个元素;$('li:last');
    //19::lt(index);匹配所有小于给定索引值的元素;从 0 开始计数;$("tr:it(2)");
    //20::header.匹配如 h1, h2, h3之类的标题元素.给页面内所有标题加上背景色;
    //$(":header").css("background","#fff");
    //21::animated;匹配所有正在执行动画效果的元素',只有对不在执行动画效果的元素执行一个动画特效;
    //<button id="run">Run</button><div></div>;
    //$("run").click(function(){
    //$("div.not(:animated)").animate({left:"+=20"},1000);
    // });
    //22;:focus.匹配当前获取焦点的元素。
    //如同其他伪类选择器（那些以":"开始），建议:focus前面用标记名称或其他选择;
    //否则，通用选择("*")是不言而喻的.换句话说，$(':focus')等同为$('*:focus')。
    //如果你正在寻找当前的焦点元素，$( document.activeElement )将
    //检索，而不必搜索整个DOM树。
    //添加一个"focused"的类名给那些有focus方法的元素
    //.focused {background: #abcdef;}

  </script>
</body>
</html>

2：table.切换

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }
        ul {
            list-style: none;
        }
        a {
            text-decoration: none;
        }

        .wrapper {
            width: 298px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            overflow: hidden;
        }
        #left,#center,#right{
            float: left;
        }
        #left li , #right li{
            background: url(images/lili.jpg) repeat-x;
        }
        #left li a,#right li a{
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }
        #left li a:hover,#right li a:hover{
            background-image: url(images/abg.gif);
        }
        #center {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
    <script>
       
    </script>
</head>
<body>
<div class="wrapper">

    <ul id="left">
        <li><a href="#">女靴</a></li>
        <li><a href="#">雪地靴</a></li>
        <li><a href="#">冬裙</a></li>
        <li><a href="#">呢大衣</a></li>
        <li><a href="#">毛衣</a></li>
        <li><a href="#">棉服</a></li>
        <li><a href="#">女裤</a></li>
        <li><a href="#">羽绒服</a></li>
        <li><a href="#">牛仔裤</a></li>
    </ul>
    <ul id="center">
        <li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男靴.jpg" width="200" height="250" /></a></li>
    </ul>
    <ul id="right">
        <li><a href="#">女包</a></li>
        <li><a href="#">男包</a></li>
        <li><a href="#">登山鞋</a></li>
        <li><a href="#">皮带</a></li>
        <li><a href="#">围巾</a></li>
        <li><a href="#">皮衣</a></li>
        <li><a href="#">男毛衣</a></li>
        <li><a href="#">男棉服</a></li>
        <li><a href="#">男靴</a></li>
    </ul>


    <script>

        $(document).ready(function () {

            $("#left>li").on("mouseover", function () {
                    // let index = $(this).index();
                    // $("#center>li").hide().eq(index).show();
                    $("#center>li").eq($(this).index()).show().siblings().hide();
                }
            )
            $('#right>li').on("mouseover", function () {
                    let index = $(this).index() + 9;
                    $("#center>li").hide().eq(index).show();
                }
            )
        })
    </script>
</div>
</body>
</html>

3：下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none ;
        }
        .box{
            width: 200px;
            margin: 50px auto;
            border-top: 1px solid gray;
        }
        .box1{
            width: 200px;
            border: 1px solid gray;
            border-bottom: none;
            border-top:none;
        }
        .box1 p,.box1 ul li{
            width: 190px;
            height: 40px;
           background: yellow;
            line-height: 40px;
            cursor: pointer;

        }
        .box1 p {
            padding-left: 10px;
            border-bottom: 1px solid gray;
        }
        .box1 ul  li{
            width: 200px;
            background: white;
            text-align: center;
            border-bottom: 1px solid gray;

        }
        .box1 ul  li:hover{
            background: blue;
            color: white;
        }
        .box1 p span{
            color: black;
          float: right;
            margin-right: 25px;
            transform: rotate(0deg);
            transition: transform .6s linear 0s;
        }
        .box1 ul{
            display: none;
        }
        .active{
            transform:rotate(90deg) !important;
        }
        .box1 p:hover{
            color:red;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
    
</head>
<body>
<div class="box">
    <div class="box1">
        <p>新闻中心 <span class="active">></span></p>
        <ul style="display: block">
            <li>添加新闻</li>
            <li>添加新闻</li>
            <li>添加新闻</li>
            <li>添加新闻</li>
        </ul>
    </div>
    <div class="box1">
        <p>关于我们 <span>></span></p>
        <ul>
            <li>关于我们</li>
            <li>关于我们</li>
            <li>关于我们</li>
            <li>关于我们</li>
        </ul>
    </div>
    <div class="box1">
        <p>业务系统 <span>></span></p>
        <ul>
            <li>业务系统</li>
            <li>业务系统</li>
            <li>业务系统</li>
            <li>业务系统</li>
        </ul>
    </div>
    <div class="box1">
        <p>联系我们 <span>></span></p>

        <ul>
            <li>联系我们</li>
            <li>联系我们</li>
            <li>联系我们</li>
            <li>联系我们</li>
        </ul>
    </div>
</div>

<script>
    $(".box1").on("click",function (){
        let index=$(this).index();

        $(".box1>ul").eq(index).slideToggle().parent().siblings().children("ul").slideUp();

        if($("span").eq(index).hasClass("active")){
            $("span").eq(index).removeClass("active");
        }
        else{
            $("span").removeClass("active").eq(index).addClass("active");
        }




        // $(".box1").on("click",function () {
        //     $(".box1>p span").eq(index).removeClass("active");
        //     $(".box1>ul").eq(index).slideToggle();
        // })


        })


</script>
</body>
</html>

4：手风琴

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }

        .wrap {
            width: 1000px;
            margin: 100px auto 0;
            background-color:yellow;
        }
        .wrap li{
            width: 200px;
            height: 400px;
            float: left;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
    <script>
        
    </script>
</head>
<body>
<div class="wrap">
    <ul>
        <li style="background-color: red;"></li>
        <li style="background-color: blue;"></li>
        <li style="background-color: orange;"></li>
        <li style="background-color: green;"></li>
        <li style="background-color: purple;"></li>
    </ul>
</div>

<script>
    let onoff=true;
    $(".wrap li").on("mouseover",function () {
        let index=$(this).index();
        $(".wrap li").stop().eq(index).animate({"width":"680px"},500).siblings().animate({"width":"80px"},500);

        $(".wrap li").on("mouseout",function () {
            $(".wrap li").stop().eq(index).animate({"width":"200px"},500).siblings().animate({"width":"200px"},500);
        })
    })


</script>
</body>
</html>

jq

猜你喜欢