zoukankan      html  css  js  c++  java
  • 鼠标移入导航下部分条状移动

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            font-family: 'Microsoft yahei';
        }
        .wrapper,
        ul.list {
            width: 500px;
            height: 40px;
            background: #000000;
            margin: auto;
        }
        
        .wrapper {
            position: relative;
        }
    
        ul.list li {
            width: 100px;
            height: 40px;
            line-height: 40px;
            color: #ffffff;
            text-align: center;
            float: left;
            cursor: pointer;
        }
        .back {
            position: absolute;
            width: 100px;
            height: 2px;
            background: red;
            left: 0;
            bottom: 0;
        }
        </style>
    </head>
    <body>
    
    <div class="wrapper">
        <ul class='list'>
            <li>导航一</li>
            <li>导航二</li>
            <li>导航三</li>
            <li>导航四</li>
            <li>导航五</li>
        </ul>
    
        <div class="back"></div>
    </div>
    
    <script src="jquery.min.js"></script>
    <script>
    $(function () {
        $('ul.list').find('li').on('mouseover', function () {
            var _index = $(this).index();
            var left = _index*100;
    
            $('.back').animate({
                left: left + 'px'
            }, 300);
        });
    });
    </script>
        
    </body>
    </html>
  • 相关阅读:
    搜索1011
    搜索1008(二分)
    贪心算法专题总结
    贪心算法1002
    c++笔记
    贪心算法1017
    贪心算法1008
    贪心算法1013
    Ubuntu中 sudo update与sudo upgrade的作用及区别
    requirejs 扩展,支持脚本资源预加载
  • 原文地址:https://www.cnblogs.com/lqcdsns/p/5698412.html
Copyright © 2011-2022 走看看