jQuery實現 自動滾屏操作


實現自動滾屏思路:

  1.滾屏即:文本的往上移動一段距離; 
  2.那么我們使文本每過一段時間就往上移動一段固定距離,就可實現滾屏;
  3.直到文本底部出現在瀏覽器窗口中,專業點就是 文本移動的距離 + 瀏覽器的高度 >= 文本實際高度,滾屏結束。

  使用到的方法有: scrollTop():文本向上滾動,也就是橫向滾動條向下拉。該方法可以獲取移動的距離,也可以設置移動的距離;
             setInterval(f,timemills):定時執行,f表示要執行的操作,timemills多長時間執行一次。如果f的位置是個函數的話,帶上括號(比如f())那么該函數只會執行一次,所以要執行多次不要帶括號;
          clearInterval(timer):用來結束重復執行函數timer參數指的是一個setInterval(f,timemills)函數返回的對象。

  代碼如下:

  

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7     <title>自動滾屏</title>
  8     <style>
  9         body{
 10             margin: 0;
 11             width: 800px;
 12         }
 13     </style>
 14 </head>
 15 <body>
 16     <div>
 17             天地玄黃 (tiān dì xuán huáng),宇宙洪荒 (yǔ zhòu hóng huāng)。
 18             日月盈昃 (rì yuè yíng zè),辰宿列張 (chén xiù liè zhāng)。
 19             寒來暑往 (hán lái shǔ wǎng),秋收冬藏 (qiū shōu dōng cáng)。
 20             閏余成歲 (rùn yú chéng suì), 律呂調陽 (lǜ lǚ tiáo yáng)。
 21             雲騰致雨 (yún téng zhì yǔ), 露結為霜 (lù jié wéi shuāng)。
 22             金生麗水 (jīn shēng lì shuǐ), 玉出昆岡 (yù chū kūn gāng)。
 23             劍號巨闕 (jiàn hào jù què), 珠稱夜光 (zhū chēng yè guāng)。
 24             果珍李柰 (guǒ zhēn lǐ nài), 菜重芥姜 (cài zhòng jiè jiāng)。
 25             海咸河淡 (hǎi xián hé dàn), 鱗潛羽翔 (lín qián yǔ xiáng)。
 26             龍師火帝 (lóng shī huǒ dì), 鳥官人皇 (niǎo guān rén huáng)。
 27             始制文字 (shǐ zhì wén zì), 乃服衣裳 (nǎi fú yī cháng)。
 28             推位讓國 (tuī wèi ràng guó), 有虞陶唐 (yǒu yú táo táng)。
 29             吊民伐罪 (diào mín fá zuì), 周發殷湯 (zhōu fā yīn tāng)。
 30             坐朝問道 (zuò cháo wèn dào), 垂拱平章 (chuí gǒng píng zhāng)。
 31             愛育黎首 (ài yù lí shǒu), 臣伏戎羌 (chén fú róng qiāng)。
 32             遐邇一體 (xiá ěr yī tǐ), 率賓歸王 (shuài bīn guī wáng)。
 33             鳴鳳在竹 (míng fèng zài zhú), 白駒食場 (bái jū shí chǎng)。
 34             化被草木 (huà bèi cǎo mù), 賴及萬方 (lài jí wàn fāng)。
 35             蓋此身發 (gài cǐ shēn fà), 四大五常 (sì dà wǔ cháng)。
 36             恭惟鞠養 (gōng wéi jū yǎng), 豈敢毀傷 (qǐ gǎn huǐ shāng)。
 37             女慕貞潔 (nǚ mù zhēn jié), 男效才良 (nán xiào cái liáng)。
 38             知過必改 (zhī guò bì gǎi), 得能莫忘 (dé néng mò wàng)。
 39             罔談彼短 (wǎng tán bǐ duǎn), 靡恃己長 (mí shì jǐ cháng)。
 40             信使可覆 (xìn shǐ kě fù), 器欲難量 (qì yù nán liáng)。
 41             墨悲絲染 (mò bēi sī rǎn), 詩贊羔羊 (shī zàn gāo yáng)。
 42             景行維賢 (jǐng xíng wéi xián), 克念作聖 (kè niàn zuò shèng)。
 43             德建名立 (dé jiàn míng lì), 形端表正 (xíng duān biǎo zhèng)。
 44             空谷傳聲 (kōng gǔ chuán shēng), 虛堂習聽 (xū táng xí tīng)。
 45             禍因惡積 (huò yīn è jí), 福緣善慶 (fú yuán shàn qìng)。
 46             尺璧非寶 (chǐ bì fēi bǎo), 寸陰是競 (cùn yīn shì jìng)。
 47             資父事君 (zī fù shì jūn), 曰嚴與敬 (yuē yán yǔ jìng)。
 48             孝當竭力 (xiào dāng jié lì), 忠則盡命 (zhōng zé jìn mìng)。
 49             臨深履薄 (lín shēn lǚ bó), 夙興溫凊 (sù xīng wēn qìng)。
 50             似蘭斯馨 (sì lán sī xīn), 如松之盛 (rú sōng zhī shèng)。
 51             川流不息 (chuān liú bù xī), 淵澄取映 (yuān chéng qǔ yìng)。
 52             容止若思 (róng zhǐ ruò sī), 言辭安定 (yán cí ān dìng)。
 53             篤初誠美 (dǔ chū chéng měi), 慎終宜令 (shèn zhōng yì lìng)。
 54             榮業所基 (róng yè suǒ jī), 籍甚無竟 (jí shèn wú jìng)。
 55             學優登仕 (xué yōu dēng shì), 攝職從政 (shè zhǐ cóng zhèng)。
 56             存以甘棠 (cún yǐ gān táng), 去而益詠 (qù ér yì yǒng)。
 57             樂殊貴賤 (yuè shū guì jiàn), 禮別尊卑 (lǐ bié zūn bēi)。
 58             上和下睦 (shàng hé xià mù), 夫唱婦隨 (fū chàng fù suí)。
 59             外受傅訓 (wài shòu fù xùn), 入奉母儀 (rù fèng mǔ yí)。
 60             諸姑伯叔 (zhū gū bó shú), 猶子比兒 (yōu zǐ bǐ ér)。
 61             孔懷兄弟 (kǒng huái xiōng dì), 同氣連枝 (tóng qì lián zhī)。
 62             交友投分 (jiāo yǒu tóu fēn), 切磨箴規 (qiē mó zhēn guī)。
 63             仁慈隱惻 (rén cí yǐn cè), 造次弗離 (zào cì fú lí)。
 64             節義廉退 (jié yì lián tuì),顛沛匪虧 (diān pèi fěi kuī)。
 65             性靜情逸 (xìng jìng qíng yì),心動神疲 (xīn dòng shén pí)。
 66             守真志滿 (shǒu zhēn zhì mǎn),逐物意移 (zhú wù yì yí)。
 67             堅持雅操 (jiān chí yǎ cāo),好爵自縻 (hǎo jué zì mí)。
 68             都邑華夏 (dū yì huá xià),東西二京 (dōng xī èr jīng)。
 69             背邙面洛 (bèi máng miàn luò),浮渭據涇 (fú wèi jù jīng)。
 70             宮殿盤郁 (gōng diàn pán yù),樓觀飛驚 (lóu guàn fēi jīng)。
 71             圖寫禽獸 (tú xiě qín shòu),畫彩仙靈 (huà cǎi xiān líng)。
 72             丙舍旁啟 (bǐng shè páng qǐ),甲帳對楹 (jiǎ zhàng duì yíng)。
 73             肆筵設席 (sì yán shè xí),鼓瑟吹笙 (gǔ sè chuī shēng)。
 74             升階納陛 (shēng jiē nà bì),弁轉疑星 (biàn zhuàn yí xīng)。
 75             右通廣內 (yòu tōng guǎng nèi),左達承明 (zuǒ dá chéng míng)。
 76             既集墳典 (jì jí fén diǎn),亦聚群英 (yì jù qún yīng)。
 77             杜稿鍾隸 (dù gǎo zhōng lì),漆書壁經 (qī shū bì jīng)。
 78             府羅將相 (fǔ luó jiàng xiàng),路俠槐卿 (lù jiā huái qīng)。
 79             戶封八縣 (hù fēng bā xiàn),家給千兵 (jiā jǐ qiān bīng)。
 80             高冠陪輦 (gāo guān péi niǎn),驅轂振纓 (qū gǔ zhèn yīng)。
 81             世祿侈富 (shì lù chǐ fù),車駕肥輕 (chē jià féi qīng)。
 82             策功茂實 (cè gōng mào shí),勒碑刻銘 (lè bēi kè míng)。
 83             磻溪伊尹 (pán xī yī yǐn),佐時阿衡 (zuǒ shí ē héng)。
 84             奄宅曲阜 (yǎn zhái qū fù),微旦孰營 (wēi dàn shú yíng)。
 85             桓公匡合 (huán gōng kuāng hé), 濟弱扶傾 (jì ruò fú qīng)。
 86             綺回漢惠 (qǐ huí hàn huì), 說感武丁 (yuè gǎn wǔ dīng)。
 87             俊乂密勿 (jùn yì mì wù), 多士實寧 (duō shì shí níng)。
 88             晉楚更霸 (jìn chǔ gēng bà), 趙魏困橫 (zhào wèi kùn héng)。
 89             假途滅虢 (jiǎ tú miè guó), 踐土會盟 (jiàn tǔ huì méng)。
 90             何遵約法 (hé zūn yuē fǎ), 韓弊煩刑 (hán bì fán xíng)。
 91             起翦頗牧 (qǐ jiǎn pō mù), 用軍最精 (yòng jūn zuì jīng)。
 92             宣威沙漠 (xuān wēi shā mò), 馳譽丹青 (chí yù dān qīng)。
 93             九州禹跡 (jiǔ zhōu yǔ jì), 百郡秦並 (bǎi jùn qín bìng)。
 94             岳宗泰岱 (yuè zōng tài dài), 禪主雲亭 (shàn zhǔ yún tíng)。
 95             雁門紫塞 (yàn mén zǐ sài), 雞田赤城 (jī tián chì chéng)。
 96             昆池碣石 (kūn chí jié shí), 鉅野洞庭 (jù yě dòng tíng)。
 97             曠遠綿邈 (kuàng yuǎn mián miǎo), 岩岫杳冥 (yán xiù yǎo míng)。
 98             治本於農 (zhì běn yú nóng), 務茲稼穡 (wù zī jià sè)。
 99             俶載南畝 (chù zǎi nán mǔ), 我藝黍稷 (wǒ yì shǔ jì)。
100             稅熟貢新 (shuì shú gòng xīn), 勸賞黜陟 (quàn shǎng chù zhì)。
101             孟軻敦素 (mèng kē dūn sù), 史魚秉直 (shǐ yú bǐng zhí)。
102             庶幾中庸 (shù jǐ zhōng yōng), 勞謙謹敕 (láo qiān jǐn chì)。
103             聆音察理 (líng yīn chá lǐ), 鑒貌辨色 (jiàn mào biàn sè)。
104             貽厥嘉猷 (yí jué jiā yóu), 勉其祗植 (miǎn qí zhī zhí)。
105             省躬譏誡 (xǐng gōng jī jiè), 寵增抗極 (chǒng zēng kàng jí)。
106             殆辱近恥 (dài rǔ jìn chǐ), 林皋幸即 (lín gāo xìng jí)。
107             兩疏見機 (liǎng shū jiàn jī), 解組誰逼 (jiě cú shuí bī)。
108             索居閑處 (suǒ jū xián chǔ), 沉默寂寥 (chén mò jì liào)。
109             求古尋論 (qiú gǔ xún lùn), 散慮逍遙 (sǎn lǜ xiāo yáo)。
110             欣奏累遣 (xīn zòu lèi qiǎn), 戚謝歡招 (qī xiè huān zhāo)。
111             渠荷的歷 (qú hé dì lì), 園莽抽條 (yuán mǎng chōu tiáo)。
112             枇杷晚翠 (pí pá wǎn cuì), 梧桐蚤凋 (wú tóng zǎo diāo)。
113             陳根委翳 (chén gēn wěi yì), 落葉飄搖 (luò yè piāo yáo)。
114             游鵾獨運 (you kūn dú yùn), 凌摩絳霄 (líng mó jiàng xiāo)。
115             耽讀玩市 (dān dú wán shì), 寓目囊箱 (yù mù náng xiāng)。
116             易輶攸畏 (yì yóu yōu wèi), 屬耳垣牆 (zhǔ ěr yuán qiáng)。
117             具膳餐飯 (jù shàn cān fàn), 適口充腸 (shì kǒu chōng cháng)。
118             飽飫烹宰 (bǎo yù pēng zǎi), 飢厭糟糠 (jī yàn zāo kāng)。
119             親戚故舊 (qīn qì gù jiù), 老少異糧 (lǎo shào yì liáng)。
120             妾御績紡 (qiè yù jì fǎng), 侍巾帷房 (shì jīn wéi fáng)。
121             紈扇圓潔 (wán shàn yuán jié), 銀燭煒煌 (yín zhú wěi huáng)。
122             晝眠夕寐 (zhòu mián xī mèi), 藍筍象床 (lán sǔn xiàng chuáng)。
123             弦歌酒宴 (xián gē jiǔ yàn), 接杯舉觴 (jié bēi jǔ shāng)。
124             矯手頓足 (jiǎo shǒu dùn zú), 悅豫且康 (yuè yù qiě kāng)。
125             嫡后嗣續 (dí hòu sì xù), 祭祀烝嘗 (jì sì zhēng cháng)。
126             稽顙再拜 (qǐsǎng zài bài), 悚懼恐惶 (sǒng jù kǒng huáng)。
127             箋牒簡要 (jiān dié jiǎn yào), 顧答審詳 (gù dá shěn xiáng)。
128             骸垢想浴 (hái gòu xiǎng yù), 執熱願涼 (zhí rè yuàn liáng)。
129             驢騾犢特 (lǘ luó dú tè), 駭躍超驤 (hài yuè chāo xiāng)。
130             誅斬賊盜 (zhū zhǎn zéi dào), 捕獲叛亡 (pǔ huò pàn wáng)。
131             布射僚丸 (bù shè liáo wán), 嵇琴阮嘯 (jī qín ruǎn xiào)。
132             恬筆倫紙 (tián bǐ lún zhǐ), 鈞巧任釣 (jūn qiǎo rén diào)。
133             釋紛利俗 (shì fēn lì sú), 並皆佳妙 (bìng jiē jiā miào)。
134             毛施淑姿 (máo shī shū zī), 工顰妍笑 (gōng pín yán xiào)。
135             年矢每催 (niánshǐměicuī), 曦暉朗曜 (xī huī lǎng yào)。
136             璇璣懸斡 (xuán jī xuán wò), 晦魄環照 (huì pò huán zhào)。
137             指薪修祜 (zhǐ xīn xiū hù), 永綏吉劭 (yǒng suí jí shào)。
138             矩步引領 (jù bù yǐn lǐng), 俯仰廊廟 (fǔ yǎng láng miào)。
139             束帶矜庄 (shù dài jīn zhuāng), 徘徊瞻眺 (pái huái zhān tiào)。
140             孤陋寡聞 (gū lòu guǎ wén), 愚蒙等誚 (yú méng děng qiào)。
141             謂語助者 (wèi yǔ zhù zhě),焉哉乎也 (yān zāi hū yě)。 
142             
143     </div>
144     <script src="jquery-3.3.1.slim.js"></script>
145     <script>
146         var newTop ; 
147         //使用定時器
148         var timer = setInterval(function(){
149             //文本是否已經到底部(底部出現在瀏覽器窗口中)
150             if($(document).scrollTop() + $(window).height() >= $('body').height()){
151                 //清除定時器
152                 clearInterval(timer);
153                
154             }else{
155        
156                 //每次在原來的基礎上移動
157                 newTop =  $(document).scrollTop();
158                 $(document).scrollTop(newTop + 5);
159             }
160             
161         },200);
162     </script>
163 </body>
164 </html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM