Vue-select下拉框组件特效代码下载


Vue-select下拉框组件特效代码下载
Vue-select下拉框组件特效代码下载以及下拉框组件等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="./css/nav.css">

2. HTML代码

    <div style="height: 100px;text-align: center;font-size: 22px;font-weight: bold;padding-top: 30px;">
        滚动导航:滚动后自动切换为左侧图标模式<br>
        首发自17素材网,其他网站均未发布,盗用自重
    </div>
    <div id="nav" data-scroll="1">
        <div class="center">
            <a href="#">
                <span>
                    <img src="./imgs/home.png" alt="">
                </span>
                <dl>
                    <dt>首页</dt>
                    <dd>Home</dd>
                </dl>
            </a>
            <a href="#">
                <span>
                    <img src="./imgs/instruction.png" alt="">
                </span>
                <dl>
                    <dt>新闻中心</dt>
                    <dd>News</dd>
                </dl>
            </a>
            <a href="#">
                <span>
                    <img src="./imgs/products.png" alt="">
                </span>
                <dl>
                    <dt>产品中心</dt>
                    <dd>Products</dd>
                </dl>
            </a>
            <a href="#">
                <span>
                    <img src="./imgs/video.png" alt="">
                </span>
                <dl>
                    <dt>视频中心</dt>
                    <dd>Videos</dd>
                </dl>
            </a>
            <a href="#">
                <span>
                    <img src="./imgs/about.png" alt="">
                </span>
                <dl>
                    <dt>关于我们</dt>
                    <dd>About</dd>
                </dl>
            </a>
            <a href="#">
                <span>
                    <img src="./imgs/honor.png" alt="">
                </span>
                <dl>
                    <dt>荣誉资质</dt>
                    <dd>honnor</dd>
                </dl>
            </a>
            <a href="#">
                <span>
                    <img src="./imgs/contact.png" alt="">
                </span>
                <dl>
                    <dt>联系我们</dt>
                    <dd>Contact</dd>
                </dl>
            </a>
        </div>
    </div>
    <div style="height: 1100px;"></div>
    <script>
        window.onscroll = function () {
            var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body
                .scrollTop;
            var nav = document.querySelector("#nav");
            if (scrollTop <= 100) {
                nav.setAttribute('data-scroll', '1');
            } else {
                nav.setAttribute('data-scroll', '0');
            }
        }
    </script>

相关推荐

发表评论

相关文章