账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    如何改js让滑块能像这个网站的效果一样
    30
    0

    请问要怎么改js才能像http://www.vanke.com/ 里面的导航滑块效果一样

        <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./js/jquery.min.js"></script>
        <script>
            $(function () {
                var nav = $("#nav"),
                    link = nav.children(),
                    linkon = link.filter(':not(.more)'),
                    linkoff = link.filter('.more');
                link.hover(function () {
                        $(link).removeClass("wrap_menu1_2");
                        $(this).addClass("wrap_menu1_2");
                    },
                    $("nav").mouseleave(function () {
                        $("linkon").addClass("wrap_menu1_2")
                    }));
            });
        </script>
        <style>
            ul li{
            list-style:none;
            }
            #nav {
                position: absolute;
                top: 0;
                right: 171px;
                z-index: 4;
                height: 60px;
                background-color: #fff;
                overflow: hidden;
            }
    
            #nav li {
                float: left;
                height: 100%;
                -webkit-transition: background-color 700ms;
                transition: background-color 700ms;
            }
    
            #nav li a {
                position: relative;
                z-index: 2;
                display: block;
                width: 100%;
                height: 100%;
                font-weight: bold;
                padding:15px 10px;
                font-size: 13px;
                line-height: 79px;
                text-align: center;
                color: #666;
                -webkit-transition: color 200ms;
                transition: color 200ms;
            }
    
            .wrap_menu1_2 {
                background: red;
            }
        </style>
    </head>
    
    <body>
        <div class="nav-box">
            <ul id="nav">
                <li class="wrap_menu1 wrap_menu1_2">
                    <a href="#">home</a>
                </li>
                <li class="wrap_menu1 more">
                    <a href="#">link1</a>
                </li>
                <li class="wrap_menu1 more">
                    <a href="#">link2</a>
                </li>
                <li class="wrap_menu1 more">
                    <a href="#">link3</a>
                </li>
                <li class="wrap_menu1 more">
                    <a href="#">link4</a>
                </li>
            </ul>
        </div>
    </body>
    
    </html>
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得：提问者悬赏的 11 元积分
        全部回答
    • 共 0 条
    • 权萌萌的小仙女Σ′ⅴ｀ 普通会员 1楼

      要让一个滑块能像上面的网站一样工作，你需要根据网站的具体功能和设计来实现。以下是一个基本的示例，使用JavaScript和HTML来创建一个简单的滑块。这个示例创建了一个滚动条，当滑块的值变化时，滚动条会自动移动到新的位置。

      HTML: ```html

      ```

      CSS: ```css .slider { position: relative; width: 200px; height: 200px; background-color: #f0f0f0; overflow: hidden; }

      .slider::-webkit-scrollbar { width: 5px; }

      .slider::-webkit-scrollbar-thumb { background-color: #4CAF50; border-radius: 5px; }

      .slider::-webkit-scrollbar-thumb:hover { background-color: #3e8e41; }

      .slider::-webkit-scrollbar-thumb:active { background-color: #2c492c; }

      .slider::-webkit-scrollbar-thumb:focus { background-color: #243c24; } ```

      JavaScript: ```javascript var slider = document.getElementById('slider'); var value = 0;

      slider.addEventListener('input', function() { value = slider.value; var scrollWidth = document.documentElement.clientWidth; var scrollHeight = document.documentElement.clientHeight;

      var rect = slider.getBoundingClientRect();

      if (scrollWidth > scrollHeight) { scrollHeight = scrollWidth; }

      if (scrollHeight - rect.bottom < value) { scrollHeight -= value; }

      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

      var newLeft = scrollLeft + value * (scrollWidth - rect.left); var newTop = scrollTop + value * (scrollHeight - rect.top);

      slider.style.left = newLeft + 'px'; slider.style.top = newTop + 'px'; }); ```

      这个示例中，我们首先获取了滑块和滚动条的元素。然后，我们为滑块和滚动条添加了一个滚动事件监听器，当滑块的值发生变化时，我们更新滚动条的位置和大小。我们计算了滚动条的宽度和高度，然后检查滑块的滚动位置是否大于滚动条的可视范围。如果大于，我们计算出滑块滚动到新的位置时的新滚动宽度和高度，并更新滑块的滚动位置。最后，我们更新滚动条的左上角位置和顶部位置，以使滚动条和滑块的位置同步。

      注意，这个示例假设你的滑块在页面上是绝对定位的，而不是相对于其父元素定位的。如果你的滑块是在相对定位或者绝对定位中定位的，你需要在设置滚动事件监听器时使用相对定位或者绝对定位，或者使用定位属性来确保滑块和滚动条的位置同步。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部