jQuery實現網頁側欄工具條

時間 2020-03-06

原文原文鏈接

效果圖javascript

toolbar.htmlcss

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>toolbar</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/toolbar.css">
</head>
<body>
    頂部
    <div class="toolbar">
        <a href="javascript:;" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe617;</i>
            <span class="toolbar-text transition">會員</span>
        </a>
        <a href="javascript:;" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe613;</i>
            <span class="toolbar-text transition">購物車</span>
        </a>
        <a href="javascript:;" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe616;</i>
            <span class="toolbar-text transition">個人關注</span>
        </a>
        <a href="javascript:;" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe614;</i>
            <span class="toolbar-text transition">個人消息</span>
        </a>
        <!-- href屬性設置爲#，能夠點擊直接回到頂部 -->
        <a href="#" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe615;</i>
            <span class="toolbar-text transition">頂部</span>
        </a> 
    </div>
</body>
</html>

base.css http://www.javashuo.com/article/p-hddyogwd-by.html
toolbar.csshtml

html,body{
    height:2000px;
    background-color:pink;
}
.transition{
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    -ms-transition:all .5s;
    -o-transition:all .5s;
    transition:all .5s;
}
/*icon*/
@font-face {
    font-family: "iconfont";
    src: url('../test/font/iconfont.eot?t=1477124206');
    /* IE9*/
    src: url('../test/font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../test/font/iconfont.woff?t=1477124206') format('woff'), /* chrome, firefox */
    url('../test/font/iconfont.ttf?t=1477124206') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('../test/font/iconfont.svg?t=1477124206#iconfont') format('svg');
    /* iOS 4.1- */
}

.icon {
    font-family: "iconfont" !important;
    font-size: 14px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
/*toolbar*/
.toolbar{
    position: fixed;
    right:0;
    top:50%;
    margin-top:-102px;
    z-index:2;
}
.toolbar-item{
    display: block;
    width:40px;
    height:40px;
    line-height:40px;
    text-align:center;
    color:#fff;
    border-bottom:1px solid #fff;
    position: relative;
}
.toolbar-icon{
    display: block;
    background-color:#b7bbbf;
    font-size:20px;
    position: relative;
    z-index:2;
}
.toolbar-text{
    width:62px;
    height:40px;
    position: absolute;
    top:0;
    left:0;
}
.toolbar-item:hover .toolbar-icon{
    background-color:#71777d;
}
.toolbar-item:hover .toolbar-text{
    background-color:#71777d;
    left:-62px;
}

這種方式不須要用到js，給a連接添加href="#" 便可java

不過這樣點擊以後在網址欄上會出現#，若是不但願出現的話，也能夠用js來實現jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>toolbar</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/toolbar.css">
</head>
<body>
    頂部
    <div class="toolbar">
        <a href="javascript:;" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe617;</i>
            <span class="toolbar-text transition">會員</span>
        </a>
        <a href="javascript:;" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe613;</i>
            <span class="toolbar-text transition">購物車</span>
        </a>
        <a href="javascript:;" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe616;</i>
            <span class="toolbar-text transition">個人關注</span>
        </a>
        <a href="javascript:;" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe614;</i>
            <span class="toolbar-text transition">個人消息</span>
        </a>
        <a href="javascript:;" class="toolbar-item" id="backToTop">
            <i class="toolbar-icon icon">&#xe615;</i>
            <span class="toolbar-text transition">頂部</span>
        </a>
    </div>

    <script src="../js/jquery.js"></script>
    <script src="../js/toolbar.js"></script>
</body>
</html>

css跟上面的同樣web

toolbar.jschrome

// 不要暴露在全局，使用匿名函數自執行
(function($){

    "use strict";

    //回到頂部
    $("#backToTop").on("click",function(){
        $("html,body").animate({
            scrollTop:0
        })
    })


})(jQuery);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。