jQuery火箭圖標返回頂部代碼

来源:https://www.cnblogs.com/hxun/archive/2019/06/30/11108541.html
-Advertisement-
Play Games

在網上找來段使用jQuery火箭圖標返回頂部代碼，感覺比較酷，比較炫，大概樣式如下， 很酷炫哦！ 如果第一次自定義博客園，需要申請許可權 點擊博客園的【管理】 → 【設置】→ 一直往下拉, 找到【博客側邊欄公告（支持HTML代碼）（申請JS許可權）】 向[email protected] 發送郵件， ...


 

在網上找來段使用jQuery火箭圖標返回頂部代碼，感覺比較酷，比較炫，大概樣式如下，

 

很酷炫哦！

如果第一次自定義博客園，需要申請許可權

點擊博客園的【管理】 → 【設置】→ 一直往下拉, 找到【博客側邊欄公告（支持HTML代碼）（申請JS許可權）】

向[email protected] 發送郵件， 為了儘快通過許可權申請， 郵件模板如下： 

尊敬的博客園管理員：

請問是否可以幫我開通js許可權，我需要一些簡單的js來解決問題，例如滑鼠點擊特效、代碼高亮等外觀調整。

謝謝您的支持！

如圖：

 

 

申請成功後可以進行一下操作

第一步：

點擊博客園的【管理】  → 【設置】 → 一直往下拉, 找到【頁腳Html代碼】，添加如下代碼內容

<div style="display:none;" id="rocket-to-top">
    <div style="opacity:0;display:block;" class="level-2"></div>
    <div class="level-3"></div>
</div>

<script type="text/javascript">
// jQuery火箭圖標返回頂部代碼
$(function() {
    var e = $("#rocket-to-top"),
    t = $(document).scrollTop(),
    n,
    r,
    i = !0;
    $(window).scroll(function() {
        var t = $(document).scrollTop();
        t == 0 ? e.css("background-position") == "0px 0px" ? e.fadeOut("slow") : i && (i = !1, $(".level-2").css("opacity", 1), e.delay(100).animate({
            marginTop: "-1000px"
        },
        "normal",
        function() {
            e.css({
                "margin-top": "-125px",
                display: "none"
            }),
            i = !0
        })) : e.fadeIn("slow")
    }),
    e.hover(function() {
        $(".level-2").stop(!0).animate({
            opacity: 1
        })
    },
    function() {
        $(".level-2").stop(!0).animate({
            opacity: 0
        })
    }),
    $(".level-3").click(function() {
        function t() {
            var t = e.css("background-position");
            if (e.css("display") == "none" || i == 0) {
                clearInterval(n),
                e.css("background-position", "0px 0px");
                return
            }
            switch (t){
            case "0px 0px":
                e.css("background-position", "-298px 0px");
                break;
            case "-298px 0px":
                e.css("background-position", "-447px 0px");
                break;
            case "-447px 0px":
                e.css("background-position", "-596px 0px");
                break;
            case "-596px 0px":
                e.css("background-position", "-745px 0px");
                break;
            case "-745px 0px":
                e.css("background-position", "-298px 0px");
            }
        }
        if (!i) return;
        n = setInterval(t, 50),
        $("html,body").animate({scrollTop: 0},"slow");
    });
});
</script>

 

第二步：

找到 -> 頁面定製CSS代碼

CSS代碼部分  ↓↓↓↓↓

/* 置頂小火箭樣式  start  */
body{height:3000px;}

#rocket-to-top div {
    left: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: 0;
    width: 149px;
}
#rocket-to-top .level-2 {
    background: url("http://images.cnblogs.com/cnblogs_com/hxun/1493052/o_o_rocket_button_up.png") no-repeat scroll -149px 0 transparent;
    display: none;
    height: 250px;
    opacity: 0;
    z-index: 1;
}
#rocket-to-top .level-3 {
    background: none repeat scroll 0 0 transparent;
    cursor: pointer;
    display: block;
    height: 150px;
    z-index: 2;
}
#rocket-to-top {
    background: url("http://images.cnblogs.com/cnblogs_com/hxun/1493052/o_o_rocket_button_up.png") no-repeat scroll 0 0 transparent;
    cursor: default;
    display: block;
    height: 250px;
    margin: -125px 0 0;
    overflow: hidden;
    padding: 0;
    position: fixed;
    right: 0;
    top: 80%;
    width: 149px;
    z-index: 11;
}
/* 置頂小火箭樣式  end */

最後拉到下麵點保存即可。

 

註意，css部分的圖片路徑可自行下載到自己的博客園，方式：

把圖片另存本地 然後進博客園 -> 管理 -> 相冊 -> 添加相冊然後命名 -> ADD -> 管理照片 -> 上傳本地圖片 -> ADD

滑鼠點擊圖片，會進入圖片展示頁，再點滑鼠右鍵，在新標簽頁中打開圖片，會看到地址欄路徑：http://images.cnblogs.com/cnblogs_com/xxxxx/1493052/xxxx.png 然後替換 

 

 

參考站長之家源碼：（處理過靜態文件路徑可直接保存打開看效果）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery火箭圖標返回頂部代碼 - 站長素材</title>
<link href="css/zzsc.css" rel="stylesheet" type="text/css" />
<!-- <script src="js/jquery.js?v=1.83.min" type="text/javascript"></script> -->
<script src="https://blog-static.cnblogs.com/files/hxun/jquery-1.8.3.min.js" type="text/javascript"></script>

<style type="text/css">
body{height:3000px;}

/*回到頂部*/
#rocket-to-top div {
    left: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: 0;
    width: 149px;
}
#rocket-to-top .level-2 {
    background: url("http://images.cnblogs.com/cnblogs_com/hxun/1493052/o_o_rocket_button_up.png") no-repeat scroll -149px 0 transparent;
    display: none;
    height: 250px;
    opacity: 0;
    z-index: 1;
}
#rocket-to-top .level-3 {
    background: none repeat scroll 0 0 transparent;
    cursor: pointer;
    display: block;
    height: 150px;
    z-index: 2;
}
#rocket-to-top {
    background: url("http://images.cnblogs.com/cnblogs_com/hxun/1493052/o_o_rocket_button_up.png") no-repeat scroll 0 0 transparent;
    cursor: default;
    display: block;
    height: 250px;
    margin: -125px 0 0;
    overflow: hidden;
    padding: 0;
    position: fixed;
    right: 0;
    top: 80%;
    width: 149px;
    z-index: 11;
}
</style>


<script type="text/javascript">

// jQuery火箭圖標返回頂部代碼
$(function() {
    var e = $("#rocket-to-top"),
    t = $(document).scrollTop(),
    n,
    r,
    i = !0;
    $(window).scroll(function() {
        var t = $(document).scrollTop();
        t == 0 ? e.css("background-position") == "0px 0px" ? e.fadeOut("slow") : i && (i = !1, $(".level-2").css("opacity", 1), e.delay(100).animate({
            marginTop: "-1000px"
        },
        "normal",
        function() {
            e.css({
                "margin-top": "-125px",
                display: "none"
            }),
            i = !0
        })) : e.fadeIn("slow")
    }),
    e.hover(function() {
        $(".level-2").stop(!0).animate({
            opacity: 1
        })
    },
    function() {
        $(".level-2").stop(!0).animate({
            opacity: 0
        })
    }),
    $(".level-3").click(function() {
        function t() {
            var t = e.css("background-position");
            if (e.css("display") == "none" || i == 0) {
                clearInterval(n),
                e.css("background-position", "0px 0px");
                return
            }
            switch (t){
            case "0px 0px":
                e.css("background-position", "-298px 0px");
                break;
            case "-298px 0px":
                e.css("background-position", "-447px 0px");
                break;
            case "-447px 0px":
                e.css("background-position", "-596px 0px");
                break;
            case "-596px 0px":
                e.css("background-position", "-745px 0px");
                break;
            case "-745px 0px":
                e.css("background-position", "-298px 0px");
            }
        }
        if (!i) return;
        n = setInterval(t, 50),
        $("html,body").animate({scrollTop: 0},"slow");
    });
});
</script>

</head>
<body>
<center>
<h2>jQuery火箭圖標返回頂部代碼</h2>
<h3>滾動滑動條後，查看右下角查看效果。很炫哦！！</h3>
</center>

<!-- 火箭 -->
<div style="display: none;" id="rocket-to-top">
    <div style="opacity:0;display: block;" class="level-2"></div>
    <div class="level-3"></div>
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>來源：<a href="http://sc.chinaz.com/" target="_blank">站長素材</a></p>
</div>
</body>
</html>

完畢！

創作不易，留個贊再走唄！

 

參考出處：http://sc.chinaz.com/jiaoben/140429325430.htm


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • linux:清空文件內容與批量kill 指定程式名的進程
    1.常規的清空文件內容方法 1）使用 cat命令顯示 /dev/null 的內容然後重定向輸出到某個文件，來清空 2）清空一個文件可以通過 shell 重定向 null （不存在的事物）到該文件 3）另一種清空文件的方法是將 : 或者 true 內置命令的輸出重定向到文件 4）使用echo命令 2. ...
  • MySQL 總結篇 [在Oracle基礎上學習的MySQL]
    一、學習環境MySQL 5.7社區版Navicat for MySQL百度網盤下載鏈接：https://pan.baidu.com/s/1yGnznwoZ8CaMgrCsDBhKAQ二、MySQL 與 Oracle 的區別實例區別：MySQL 是輕量型資料庫，開源免費。Oracle 是收費的而且價格... ...
  • 02、MySQL—資料庫基本操作
    資料庫是數據存儲的最外層（最大單元） 1、創建資料庫 基本語法：create database 資料庫名字 [庫選項]; 範例：使用create database 創建資料庫 庫選項：資料庫的相關屬性 字元集：charset 字元集，代表著當前資料庫下的所有表存儲的數據預設指定的字元集（如果當前不指 ...
  • DQL---條件查詢、單行函數、多行函數、分組函數、數據類型
    一、DQL 1、基本規則： （1）對於日期型數據，做 *，/ 運算不合法，可以進行 +， - 運算。比如給日期加一天或減一個月，結果仍為一個日期。兩個日期間只能為減法，返回兩個日期相差的天數，兩個日期間做加法沒任何意義。 （2）包含空值（null）的數學表達式計算結果均為空值。 （3）給欄位取別名時 ...
  • DDL、DML、TCL
    一、DDL 1、創建表（CREATE） （1）資料庫對大小寫不敏感，只對字元串大小寫敏感。 （2）使用create關鍵字創建表。（-- 表示註釋）。 （3）將一個查詢結果集作為一張表。可用於將多張表連成一張表的操作。 2、刪除表（DROP）、DESC關鍵字、TRUNCATE關鍵字 （1）使用DESC ...
  • python3連接oracle資料庫
    之前用python連過mysql資料庫，但是沒連過oracle資料庫，所以來練習一波 ...
  • 利用sp_addlinkedserver實現遠程資料庫鏈接
    --查看當前鏈接情況： select * from sys.servers; --使用 sp_helpserver 來顯示可用的伺服器 Exec sp_helpserver --刪除已經存在的某個鏈接 Exec sp_droplinkedsrvlogin 伺服器別名,NullExec sp_drop ...
  • 01、MySQL_簡介
    資料庫概念 資料庫(Database)是按照數據結構來組織、存儲和管理數據的建立在電腦存儲設備上的倉庫。 資料庫：存儲數據的倉庫 資料庫分類 網路資料庫 網路資料庫是指把資料庫技術引入到電腦網路系統中，藉助於網路技術將存儲於資料庫中的大量信息及時發佈出去；而電腦網路藉助於成熟的資料庫技術對網路 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類