1. 程式人生 > >jQuery——滾動條位置的獲取與設定

jQuery——滾動條位置的獲取與設定

1、scroll() 方法

$(selector).scroll()

當用戶滾動指定的元素時,會發生 scroll 事件。

scroll 事件適用於所有可滾動的元素和 window 物件(瀏覽器視窗)。

scroll() 方法觸發 scroll 事件,或規定當發生 scroll 事件時執行的函式。

將函式繫結到 scroll 事件

語法

$(selector).scroll(function)
function可選。規定當發生 scroll 事件時執行的函式。

2、滾動條位置的獲取與設定

scrollTop() 方法返回或設定匹配元素的滾動條的垂直位置

scrollLeft() 方法返回或設定匹配元素的滾動條的水平位置


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滾動條位置的獲取與設定</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            overflow: scroll;
        }
        p{
            text-indent: 2em;
            width: 1000px;
        }
    </style>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            //獲取滾動條的位置
           $("button:eq(0)").click(function () {
               console.log($("div").scrollTop());
               console.log($("div").scrollLeft());
           });
           //設定滾動條的位置
            var i = 0;
            $("button:eq(1)").click(function () {
                i += 100;
                $("div").scrollTop(i);
                $("div").scrollLeft(i);
            });
        });
    </script>
</head>
<body>
    <button>獲取滾動條的位置</button>
    <button>設定滾動條的位置</button>
    <div>
        <h1>魯迅簡介</h1>
        <p>魯迅〔1881年9月25日~1936年10月19日〕,中國文學家、思想家和革命家。原名周樹人,字豫才,浙江紹興人。出身於破落封建家庭。青年時代受進化論、尼采超人哲學和托爾斯泰博愛思想的影響。1902年去日本留學,原在仙台醫學院學醫, 後從事文藝工作,企圖用以改變國民精神。
            1905-1907年,參加革命黨人的活動, 發表了《摩羅詩力說》、《文化偏至論》等論文。期間曾回國奉母命結婚,夫人朱安。 1909年,與其弟周作人一起合譯《域外小說集》,介紹外國文學。同年回國, 先後在杭州、紹興任教。辛亥革命後,曾任南京臨時政府和北京政府教育部部員、
            僉事等職,兼在北京大學、女子師範大學等校授課。1918年5月,首次用"魯迅"的筆名,發表中國現代文學史上第一篇白話小說《狂人日記》,奠定了新文學運動的 基石。五四運動前後,參加《新青年》雜誌工作,成為"五四"新文化運動的主將。 1918年到1926年間,陸續創作出版了
            小說集《吶喊》、《彷徨》、論文集《墳》、 散文詩集《野草》、散文集《朝花夕拾》、雜文集《熱風》、《華蓋集》、《華蓋集續編》等專集。其中,1921年12月發表的中篇小說《阿Q正傳》,是中國現代文學 史上的不朽傑作。1926年8月,因支援北京學生愛國運動,為北洋軍閥政
            府所通緝, 南下到廈門大學任中文系主任。1927年1月,到當時的革命中心廣州,在中山大學任教務主任。1927年10月到達上海,開始與其學生許廣平同居。1929年,兒子周海嬰 出世。1930年起,先後參加中國自由運動大同盟、中國左翼作家聯盟和中國民權保障同盟,反抗國民黨政
            府的獨裁統治和政治迫害。從1927年到1936年,創作了歷史 小說集《故事新編》中的大部分作品和大量的雜文,收輯在《而已集》、《三閒集》、 《二心集》、《南腔北調集》、《偽自由書》、《準風月談》、《花邊文學》、 《且介亭雜文》、《且介亭雜文二編》、《且介亭雜文末編》、
            《集外集》和《集外集拾遺》等專集中。魯迅的一生,對中國文化事業作出了巨大的貢獻:他領導並支援了"未名社"、"朝花社"等文學團體;主編了《國民新報副刊》〔乙種〕、 《莽原》、《語絲》、《奔流》、《萌芽》、《譯文》等文藝期刊;熱忱關懷、積極培養青年作者;大力翻譯外國
            進步文學作品和介紹國內外著名的繪畫、木刻;搜 集、研究、整理了大量的古典文學,編著《中國小說史略》、《漢文學史綱要》,整 理《嵇康集》,輯錄《會稽郡故書雜錄》、《古小說鉤沈》、《唐宋傳奇錄》、 《小說舊聞鈔》等等。1936年10月19日因肺結核病逝於上海,上海民眾
            上萬名自發 舉行公祭、送葬,葬於虹橋萬國公墓。1956年,魯迅遺體移葬虹口公園,毛澤東為重建的魯迅墓題字。1938年出版《魯迅全集》〔二十卷〕。中華人民共和國成立後, 魯迅著譯已分別編為《魯迅全集》〔十卷〕,《魯迅譯文集》〔十卷〕,《魯迅日記》〔二卷〕,《魯迅書信集》,
            並重印魯迅編校的古籍多種。1981年出版了《魯迅全集》〔十六卷〕。北京、上海、紹興、廣州、廈門等地先後建立了魯迅博物館、 紀念館等。魯迅的小說、散文、詩歌、雜文共數十篇〔首〕被選入中、小學語文課 本。小說《祝福》、《阿Q正傳》、《藥》等先後被改編成電影。</p>
        <h1>文藝影響</h1>
        <p>魯迅是20世紀的文化巨人,他在小說、散文、雜文、木刻、現代詩、舊體詩、名著翻譯、古籍校勘和現代學術等多個領域都有巨大貢獻。作為中國現代文學的偉大奠基者,魯迅創作的為數不多的小說建立了中國小說的新形式;他所創作散文更是“顯示了文學革命的實績”;他的所開創的雜文文體富有現代性、
        自由性、批判性和戰鬥性,是後世作家最常使用的“批判武器”,他所創作的雜文更是中國社會、政治、歷史、法律、宗教、道德、哲學、文學、藝術乃至文化心理、民性、民情、民俗……的百科全書。幾乎所有的中國作家都在魯迅開創的基礎上,發展了不同的方面的文學風格體式。作為翻譯家他大量的翻譯了
        外國的文學作品、科學自然作品為開啟民智,引入先進的科學文化思想做出了巨大的貢獻。而作為美術愛好者魯迅大量引進了西方木刻、版畫作品,並在精神、理論和精神等多方面支援青年人學習木刻、版畫藝術,極大的推進了現代木刻、版畫在現代中國的傳播與發展,為現代中國的美術事業做出卓越的貢獻。</p>
        <h1>學術影響</h1>
        <p>作為一名學術研究者,一方面,魯迅運用西方的文學觀念研究中國古典小說撰寫了《中國小說史略》,其不僅結束了“中國之小說自來無史”的時代,也創造了文學史著作的典型範例,“為後學開示無數法門”,郭沫若將其與王國維的《宋元戲曲史》並稱為為中國近代學術史上的雙璧。另一方面他整理校對勘正了
        《古小說鉤沉》《嵇康集》《漢畫像集》《會稽郡故書雜集》等數十部古籍,為後世的古典文學研究留下了一筆巨大財富。</p>
        <h1>精神影響</h1>
        <p>魯迅堪稱現代中國的民族魂,他的精神深刻影響著他的讀者、研究者,以至一代又一代的中國現代作家、現代知識分子。魯迅同時又是20世紀世界文化巨人之一。他創造了“內外兩面,都和世界的時代思潮合流,而又並未梏亡中國的民族性”,並具有獨特的個人風格的“現今想要參與世界上的事業的中國人”的文學。
        他與同時期的世界傑出的思想家和文學家一樣,在關注本民族的同時,也在關注著人類共同面臨的問題,並做出了自己的獨特貢獻。</p>
        <h1>政治影響</h1>
        <p>魯迅一生追求民主,早在新文學運動伊始時期便向封建舊文化宣戰,不斷與壓迫民眾的舊思想舊文化鬥爭。“女師大學潮”發生後與迫害學生的軍閥進行論爭,魯迅不畏強暴執筆對戰,顯示出一個正直文人的氣概。爾後國民黨統治之下又大膽披露其黑暗統治。三十年代又與共產黨內左傾的錯誤文藝路線進行鬥爭,
            其後與黨領導下的文藝工作者合作成立了無產階級文藝思想領導的左翼作家聯盟,魯迅作為左聯的盟主,領導左聯粉碎了國民黨反動文藝妄圖絞殺無產階級文藝的陰謀。</p>
    </div>
</body>
</html>

應用:

1、jQuery——固定導航欄:點選開啟連結

2、jQuery——瀏覽器視窗兩側跟隨的廣告案例:點選開啟連結