jQuery实现 自动滚屏操作
2024-05-17 03:17:08
实现自动滚屏思路：
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>转载于:https://www.cnblogs.com/wang--yang/p/10096669.html
jQuery实现 自动滚屏操作相关推荐
- 帆软报表调用python脚本_帆软报表（finereport）实现自动滚屏效果
例如Demo:IOS平台年度数据报表. 展示内容丰富,一个页面中存在多个图表.内容,超出了浏览器窗口的大小导致内容展示不全. 为了能够预览这个报表的全部内容,可以使用JS滚屏效果来实现. 操作步骤: ...
- 大屏html自动滚动,Automatic Scrolling Tabs - 网页自动滚屏
Automatic Scrolling Tabs插件背景简介 最近有网友在网上提问求一个脱离鼠标仍可网页自动向下滚动,然后鼠标去操作其他东西的插件,最好能设置滚动速度的.之前我们会推荐一些鼠标手势插件 ...
- echart 时间滚动_基于 ECharts 封装甘特图并实现自动滚屏
项目中需要用到甘特图组件,之前的图表一直基于 EChart 开发,但 EChart 本身没有甘特图组件,需要自行封装 经过一番鏖战,终于完成了... 我在工程中参考 v-chart 封装了一套图表组件 ...
- VC编辑框（EDIT）的自动换行、自动滚屏 、到指定行数自动清空
From: http://getyoureyes.blog.163.com/blog/static/101716622201083081914305/ 经过多次测试,总结出VC编辑框(EDIT)的自动 ...
- Qt4小技巧——QTextEdit自动滚屏
CuteQt Blog » Blog Archive » Qt4小技巧--QTextEdit自动滚屏 Qt4小技巧--QTextEdit自动滚屏 本站所有文章由本站和原作者保留一切权力,仅在保留本 ...
- Android拖动实现（一个流畅的拖动排序DragSortGridView,自动滚屏）
https://github.com/huxq17/HandyGridView 先上效果 流畅效果超越了网易新闻和UC浏览器的栏目收藏.gif图和实际效果有差距 1.拖拽可以移动item,并且其他it ...
- 实现智能读报（逐字朗读+自动滚屏）
序言 最近在研究读报的功能,想实现自动阅读,即能朗读,还能提示读到什么地方,反正是越方便越好.通过多次试验终于成功了.实现了逐字朗读变色,自动滚屏,屏幕常亮等功能.接下来你们将我再一次见识我的聪明才智 ...
- MFC EDIT的使用———自动滚屏
在自动换行设置的时候,要在EDIT控件的属性中选中＂multiline"的属性和Auto_HScroll.Vertical scroll. 经过多次测试,总结出VC编辑框(EDIT)的自动换 ...
- 基于qt的udp聊天发送信息 有四处要设置自动滚屏 --------------- 续上
上次写博客,我说有两处设置自动滚屏,但经过实际和板子通讯发现,还应有两处自动滚屏.总结如下: 第一处滚屏:receive()槽函数的开始,也就是显示text之前,要自动滚屏下.防止用户在上一时刻将鼠标 ...
最新文章
- hpm128无法共享打印_办公室打印机如何共享给同事使用呢？常见共享打印问题及解决方法...
- MicroRNA Ranking（Tehran2016）
- python线程任务run_python线程、进程知识梳理
- Spring的@Autowired和@Resource
- #JAVA# 判断从键盘输入的字符串是否为回文
- 厄米高斯光束 matlab,拉盖尔高斯光束_厄米高斯光束MATLAB仿真
- 爆款预定！雷军再曝小米12 Pro：首发自研芯片澎湃P1
- python读取文件乱码
- 风变Python8编程时，两大思维模式
- JavaScript Tree 功能强大,包含checkbox,自动选择子节点和父节点.
- 论文Express | 把你的口哨变成莫扎特风，Facebook发布通用音乐迁移网络
- alidoing --使用JS实现多语言框架、喜欢的请进、、瓦特平台！
- 判断平面内两直线平行c语言,5.2 平行线及其判定教学设计模板
- wap手机网页（网站）自适应中部悬浮小广告代码【靠右侧】
- JQuery.Gantt（甘特图） 开发指南
- 从大自然得到色彩的启示
- 4个知识点帮你理清ARM开发思路！
- 【并行计算-CUDA开发】GPU 的硬体架构
- win10如何手动强制关联某个类型文件的默认程序打开方式
- CUDA out of memory（CUDA显存不足）