jQuery实现 自动滚屏操作
实现自动滚屏思路：
1.滚屏即：文本的往上移动一段距离；
2.那么我们使文本每过一段时间就往上移动一段固定距离，就可实现滚屏；
3.直到文本底部出现在浏览器窗口中，专业点就是 文本移动的距离 + 浏览器的高度 >= 文本实际高度，滚屏结束。
使用到的方法有： scrollTop()：文本向上滚动，也就是横向滚动条向下拉。该方法可以获取移动的距离，也可以设置移动的距离；
setInterval（f,timemills）：定时执行，f表示要执行的操作，timemills多长时间执行一次。如果f的位置是个函数的话，带上括号（比如f（））那么该函数只会执行一次，所以要执行多次不要带括号；
clearInterval(timer)：用来结束重复执行函数timer参数指的是一个setInterval（f,timemills）函数返回的对象。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自动滚屏</title>
<style>
body{
margin: 0;
width: 800px;
}
</style>
</head>
<body>
<div>
天地玄黄 （tiān dì xuán huáng），宇宙洪荒 （yǔ zhòu hóng huāng）。
日月盈昃 （rì yuè yíng zè），辰宿列张 （chén xiù liè zhāng）。
寒来暑往 （hán lái shǔ wǎng），秋收冬藏 （qiū shōu dōng cáng）。
闰余成岁 （rùn yú chéng suì）， 律吕调阳 （lǜ lǚ tiáo yáng）。
云腾致雨 （yún téng zhì yǔ）， 露结为霜 （lù jié wéi shuāng）。
金生丽水 （jīn shēng lì shuǐ）， 玉出昆冈 （yù chū kūn gāng）。
剑号巨阙 （jiàn hào jù què）， 珠称夜光 （zhū chēng yè guāng）。
果珍李柰 （guǒ zhēn lǐ nài）， 菜重芥姜 （cài zhòng jiè jiāng）。
海咸河淡 （hǎi xián hé dàn）， 鳞潜羽翔 （lín qián yǔ xiáng）。
龙师火帝 （lóng shī huǒ dì）， 鸟官人皇 （niǎo guān rén huáng）。
始制文字 （shǐ zhì wén zì）， 乃服衣裳 （nǎi fú yī cháng）。
推位让国 （tuī wèi ràng guó）， 有虞陶唐 （yǒu yú táo táng）。
吊民伐罪 （diào mín fá zuì）， 周发殷汤 （zhōu fā yīn tāng）。
坐朝问道 （zuò cháo wèn dào）， 垂拱平章 （chuí gǒng píng zhāng）。
爱育黎首 （ài yù lí shǒu）， 臣伏戎羌 （chén fú róng qiāng）。
遐迩一体 （xiá ěr yī tǐ）， 率宾归王 （shuài bīn guī wáng）。
鸣凤在竹 （míng fèng zài zhú）， 白驹食场 （bái jū shí chǎng）。
化被草木 （huà bèi cǎo mù）， 赖及万方 （lài jí wàn fāng）。
盖此身发 （gài cǐ shēn fà）， 四大五常 （sì dà wǔ cháng）。
恭惟鞠养 （gōng wéi jū yǎng）， 岂敢毁伤 （qǐ gǎn huǐ shāng）。
女慕贞洁 （nǚ mù zhēn jié）， 男效才良 （nán xiào cái liáng）。
知过必改 （zhī guò bì gǎi）， 得能莫忘 （dé néng mò wàng）。
罔谈彼短 （wǎng tán bǐ duǎn）， 靡恃己长 （mí shì jǐ cháng）。
信使可覆 （xìn shǐ kě fù）， 器欲难量 （qì yù nán liáng）。
墨悲丝染 （mò bēi sī rǎn）， 诗赞羔羊 （shī zàn gāo yáng）。
景行维贤 （jǐng xíng wéi xián）， 克念作圣 （kè niàn zuò shèng）。
德建名立 （dé jiàn míng lì）， 形端表正 （xíng duān biǎo zhèng）。
空谷传声 （kōng gǔ chuán shēng）， 虚堂习听 （xū táng xí tīng）。
祸因恶积 （huò yīn è jí）， 福缘善庆 （fú yuán shàn qìng）。
尺璧非宝 （chǐ bì fēi bǎo）， 寸阴是竞 （cùn yīn shì jìng）。
资父事君 （zī fù shì jūn）， 曰严与敬 （yuē yán yǔ jìng）。
孝当竭力 （xiào dāng jié lì）， 忠则尽命 （zhōng zé jìn mìng）。
临深履薄 （lín shēn lǚ bó）， 夙兴温凊 （sù xīng wēn qìng）。
似兰斯馨 （sì lán sī xīn）， 如松之盛 （rú sōng zhī shèng）。
川流不息 （chuān liú bù xī）， 渊澄取映 （yuān chéng qǔ yìng）。
容止若思 （róng zhǐ ruò sī）， 言辞安定 （yán cí ān dìng）。
笃初诚美 （dǔ chū chéng měi）， 慎终宜令 （shèn zhōng yì lìng）。
荣业所基 （róng yè suǒ jī）， 籍甚无竟 （jí shèn wú jìng）。
学优登仕 （xué yōu dēng shì）， 摄职从政 （shè zhǐ cóng zhèng）。
存以甘棠 （cún yǐ gān táng）， 去而益咏 （qù ér yì yǒng）。
乐殊贵贱 （yuè shū guì jiàn）， 礼别尊卑 （lǐ bié zūn bēi）。
上和下睦 （shàng hé xià mù）， 夫唱妇随 （fū chàng fù suí）。
外受傅训 （wài shòu fù xùn）， 入奉母仪 （rù fèng mǔ yí）。
诸姑伯叔 （zhū gū bó shú）， 犹子比儿 （yōu zǐ bǐ ér）。
孔怀兄弟 （kǒng huái xiōng dì）， 同气连枝 （tóng qì lián zhī）。
交友投分 （jiāo yǒu tóu fēn）， 切磨箴规 （qiē mó zhēn guī）。
仁慈隐恻 （rén cí yǐn cè）， 造次弗离 （zào cì fú lí）。
节义廉退 （jié yì lián tuì），颠沛匪亏 （diān pèi fěi kuī）。
性静情逸 （xìng jìng qíng yì），心动神疲 （xīn dòng shén pí）。
守真志满 （shǒu zhēn zhì mǎn），逐物意移 （zhú wù yì yí）。
坚持雅操 （jiān chí yǎ cāo），好爵自縻 （hǎo jué zì mí）。
都邑华夏 （dū yì huá xià），东西二京 （dōng xī èr jīng）。
背邙面洛 （bèi máng miàn luò），浮渭据泾 （fú wèi jù jīng）。
宫殿盘郁 （gōng diàn pán yù），楼观飞惊 （lóu guàn fēi jīng）。
图写禽兽 （tú xiě qín shòu），画彩仙灵 （huà cǎi xiān líng）。
丙舍旁启 （bǐng shè páng qǐ），甲帐对楹 （jiǎ zhàng duì yíng）。
肆筵设席 （sì yán shè xí），鼓瑟吹笙 （gǔ sè chuī shēng）。
升阶纳陛 （shēng jiē nà bì），弁转疑星 （biàn zhuàn yí xīng）。
右通广内 （yòu tōng guǎng nèi），左达承明 （zuǒ dá chéng míng）。
既集坟典 （jì jí fén diǎn），亦聚群英 （yì jù qún yīng）。
杜稿钟隶 （dù gǎo zhōng lì），漆书壁经 （qī shū bì jīng）。
府罗将相 （fǔ luó jiàng xiàng），路侠槐卿 （lù jiā huái qīng）。
户封八县 （hù fēng bā xiàn），家给千兵 （jiā jǐ qiān bīng）。
高冠陪辇 （gāo guān péi niǎn），驱毂振缨 （qū gǔ zhèn yīng）。
世禄侈富 （shì lù chǐ fù），车驾肥轻 （chē jià féi qīng）。
策功茂实 （cè gōng mào shí），勒碑刻铭 （lè bēi kè míng）。
磻溪伊尹 （pán xī yī yǐn），佐时阿衡 （zuǒ shí ē héng）。
奄宅曲阜 （yǎn zhái qū fù），微旦孰营 （wēi dàn shú yíng）。
桓公匡合 （huán gōng kuāng hé）， 济弱扶倾 （jì ruò fú qīng）。
绮回汉惠 （qǐ huí hàn huì）， 说感武丁 （yuè gǎn wǔ dīng）。
俊乂密勿 （jùn yì mì wù）， 多士实宁 （duō shì shí níng）。
晋楚更霸 （jìn chǔ gēng bà）， 赵魏困横 （zhào wèi kùn héng）。
假途灭虢 （jiǎ tú miè guó）， 践土会盟 （jiàn tǔ huì méng）。
何遵约法 （hé zūn yuē fǎ）， 韩弊烦刑 （hán bì fán xíng）。
起翦颇牧 （qǐ jiǎn pō mù）， 用军最精 （yòng jūn zuì jīng）。
宣威沙漠 （xuān wēi shā mò）， 驰誉丹青 （chí yù dān qīng）。
九州禹迹 （jiǔ zhōu yǔ jì）， 百郡秦并 （bǎi jùn qín bìng）。
岳宗泰岱 （yuè zōng tài dài）， 禅主云亭 （shàn zhǔ yún tíng）。
雁门紫塞 （yàn mén zǐ sài）， 鸡田赤城 （jī tián chì chéng）。
昆池碣石 （kūn chí jié shí）， 钜野洞庭 （jù yě dòng tíng）。
旷远绵邈 （kuàng yuǎn mián miǎo）， 岩岫杳冥 （yán xiù yǎo míng）。
治本于农 （zhì běn yú nóng）， 务兹稼穑 （wù zī jià sè）。
俶载南亩 （chù zǎi nán mǔ）， 我艺黍稷 （wǒ yì shǔ jì）。
税熟贡新 （shuì shú gòng xīn）， 劝赏黜陟 （quàn shǎng chù zhì）。
孟轲敦素 （mèng kē dūn sù）， 史鱼秉直 （shǐ yú bǐng zhí）。
庶几中庸 （shù jǐ zhōng yōng）， 劳谦谨敕 （láo qiān jǐn chì）。
聆音察理 （líng yīn chá lǐ）， 鉴貌辨色 （jiàn mào biàn sè）。
贻厥嘉猷 （yí jué jiā yóu）， 勉其祗植 （miǎn qí zhī zhí）。
省躬讥诫 （xǐng gōng jī jiè）， 宠增抗极 （chǒng zēng kàng jí）。
殆辱近耻 （dài rǔ jìn chǐ）， 林皋幸即 （lín gāo xìng jí）。
两疏见机 （liǎng shū jiàn jī）， 解组谁逼 （jiě cú shuí bī）。
索居闲处 （suǒ jū xián chǔ）， 沉默寂寥 （chén mò jì liào）。
求古寻论 （qiú gǔ xún lùn）， 散虑逍遥 （sǎn lǜ xiāo yáo）。
欣奏累遣 （xīn zòu lèi qiǎn）， 戚谢欢招 （qī xiè huān zhāo）。
渠荷的历 （qú hé dì lì）， 园莽抽条 （yuán mǎng chōu tiáo）。
枇杷晚翠 （pí pá wǎn cuì）， 梧桐蚤凋 （wú tóng zǎo diāo）。
陈根委翳 （chén gēn wěi yì）， 落叶飘摇 （luò yè piāo yáo）。
游鹍独运 （you kūn dú yùn）， 凌摩绛霄 （líng mó jiàng xiāo）。
耽读玩市 （dān dú wán shì）， 寓目囊箱 （yù mù náng xiāng）。
易輶攸畏 （yì yóu yōu wèi）， 属耳垣墙 （zhǔ ěr yuán qiáng）。
具膳餐饭 （jù shàn cān fàn）， 适口充肠 （shì kǒu chōng cháng）。
饱饫烹宰 （bǎo yù pēng zǎi）， 饥厌糟糠 （jī yàn zāo kāng）。
亲戚故旧 （qīn qì gù jiù）， 老少异粮 （lǎo shào yì liáng）。
妾御绩纺 （qiè yù jì fǎng）， 侍巾帷房 （shì jīn wéi fáng）。
纨扇圆洁 （wán shàn yuán jié）， 银烛炜煌 （yín zhú wěi huáng）。
昼眠夕寐 （zhòu mián xī mèi）， 蓝笋象床 （lán sǔn xiàng chuáng）。
弦歌酒宴 （xián gē jiǔ yàn）， 接杯举觞 （jié bēi jǔ shāng）。
矫手顿足 （jiǎo shǒu dùn zú）， 悦豫且康 （yuè yù qiě kāng）。
嫡后嗣续 （dí hòu sì xù）， 祭祀烝尝 （jì sì zhēng cháng）。
稽颡再拜 （qǐsǎng zài bài）， 悚惧恐惶 （sǒng jù kǒng huáng）。
笺牒简要 （jiān dié jiǎn yào）， 顾答审详 （gù dá shěn xiáng）。
骸垢想浴 （hái gòu xiǎng yù）， 执热愿凉 （zhí rè yuàn liáng）。
驴骡犊特 （lǘ luó dú tè）， 骇跃超骧 （hài yuè chāo xiāng）。
诛斩贼盗 （zhū zhǎn zéi dào）， 捕获叛亡 （pǔ huò pàn wáng）。
布射僚丸 （bù shè liáo wán）， 嵇琴阮啸 （jī qín ruǎn xiào）。
恬笔伦纸 （tián bǐ lún zhǐ）， 钧巧任钓 （jūn qiǎo rén diào）。
释纷利俗 （shì fēn lì sú）， 并皆佳妙 （bìng jiē jiā miào）。
毛施淑姿 （máo shī shū zī）， 工颦妍笑 （gōng pín yán xiào）。
年矢每催 （niánshǐměicuī）， 曦晖朗曜 （xī huī lǎng yào）。
璇玑悬斡 （xuán jī xuán wò）， 晦魄环照 （huì pò huán zhào）。
指薪修祜 （zhǐ xīn xiū hù）， 永绥吉劭 （yǒng suí jí shào）。
矩步引领 （jù bù yǐn lǐng）， 俯仰廊庙 （fǔ yǎng láng miào）。
束带矜庄 （shù dài jīn zhuāng）， 徘徊瞻眺 （pái huái zhān tiào）。
孤陋寡闻 （gū lòu guǎ wén）， 愚蒙等诮 （yú méng děng qiào）。
谓语助者 （wèi yǔ zhù zhě），焉哉乎也 （yān zāi hū yě）。 </div>
<script src="jquery-3.3.1.slim.js"></script>
<script>
var newTop ;
//使用定时器
var timer = setInterval(function(){
//文本是否已经到底部（底部出现在浏览器窗口中）
if($(document).scrollTop() + $(window).height() >= $('body').height()){
//清除定时器
clearInterval(timer); }else{ //每次在原来的基础上移动
newTop = $(document).scrollTop();
$(document).scrollTop(newTop + 5);
} },200);
</script>
</body>
</html>
jQuery实现 自动滚屏操作的更多相关文章
- jquery实现自动滚屏效果，适用用公告新闻等滚屏
从网络上找到的例子,自己做了下扩展,原示例是向上滚动,扩展了一个向下滚动的方法: <html xmlns="http://www.w3.org/1999/xhtml"> ...
- 基于 ECharts 封装甘特图并实现自动滚屏
项目中需要用到甘特图组件,之前的图表一直基于 EChart 开发,但 EChart 本身没有甘特图组件,需要自行封装 经过一番鏖战,终于完成了... 我在工程中参考 v-chart 封装了一套图表组件 ...
- 帆软报表（finereport）实现自动滚屏效果
例如Demo:IOS平台年度数据报表. 展示内容丰富,一个页面中存在多个图表.内容,超出了浏览器窗口的大小导致内容展示不全. 为了能够预览这个报表的全部内容,可以使用JS滚屏效果来实现. 操作步骤: ...
- FineReport中如何实现自动滚屏效果
对于一些特殊的模板,可能为了展示的更加丰富.全面会在一个页面放置很多图表.表格等内容.由于内容过多,超出了浏览器窗口的大小导致内容展示不全的情况.这样我们就需要用到JS滚屏效果来解决,这里主要介绍在F ...
- Android开源代码解读のOnScrollListener实现ListView滚屏时不加载数据
使用ListView过程中,如果滚动加载数据的操作比较费时,很容易在滚屏时出现屏幕卡住的现象,一个解决的办法就是不要在滚动时加载数据,而是等到滚动停止后再进行数据的加载.这同样要实现OnScrollL ...
- fcode-页面九宫格自动锁屏jquery插件
fcode.js 自动锁屏插件 fcode.js是什么? fcode.js是一款web页面九宫格自动锁屏js插件,依赖于jquery, 会在设置的范围里,判断用户有无操作,然后执行锁屏的功能. 就一个 ...
- 滚屏加载--jQuery+PHP实现浏览更多内容
滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其实 ...
- jQuery滚屏插件XSwitch.js
1.需要有基本的HTML结构 <div style="margin-top: 124px;" id="container" data-XSwitch> ...
- Ubuntu几秒钟没有任何操作自动黑屏
在鼠标或键盘30秒内没有做任何操作以后,显示器自动黑屏. 重新点击鼠标或键盘,屏幕唤醒. 设置中心各种设置方式都已经尝试过.无效. $xset -q // 执行该命令 Keyboard Control ...
随机推荐
- CSS 3篇（持续更新）
1.关于盒子模型 css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content).内边距(padding).边框(border).外边距(margin)几个要素.如图: 理解c ...
- latex 调整间隔
转自:http://blog.sina.com.cn/s/blog_4a4927c70100phsb.html,感谢分享! 一.LATEX调整公式与正文间距离,调整空白大小: 调整空白命令: \s ...
- java word转pdf 工具类
package com.elitel.hljhr.comm.web.main.controller; import java.io.File; import java.io.FileOutputStr ...
- 云计算之概念——IaaS、SaaS、PaaS、Daas
云计算通俗来说就是输入/输出和计算不在一个主机上.计算要用到计算设备,计算设备一般是指CPU.内存和硬盘,输入/输出设备一般是指键盘.鼠标.显示器.耳机.音响.话筒等外设.而我们的个人计算机是使用主板 ...
- Access 64-bit HKLM\Software Registry by 32-bit C#.NET Application
http://www.codeproject.com/Articles/1003177/Access-bit-HKLM-Software-Registry-by-bit-Csharp-NE While ...
- Ubuntu下python的第三方module无法在pycharm中导入
换了台笔记本,新安装的requests module无法在pycharm导入: Traceback (most recent call last): File "/home/winsterc ...
- AutoHotkey批量L版代码转H2的vim脚本
原脚本尽量用表达式的语法写,错误会比较少,比如"If a=", "fun(a=1)"这种语法在V2会出错文件放vim的autoload目录下,可使用以下map使 ...
- WebSphere Studio Application Developer 5.0 优化设置
公司有一个项目需要用到WebSphere Studio Application Developer 5.0 的开发环境,这个环境比较老,而且只能用JDK1.4. 项目开发的时候 总是报错: JVM t ...
- spring集成ehcache本地缓存
1.maven依赖 <!-- ehcache 相关依赖 --> <dependency> <groupId>net.sf.ehcache</groupId&g ...
- MySQL错误问题
启动Tomcat的时候报错:no suitable driver,MySql更新使用com.mysql.cj.jdbc.Driver,废弃老的com.mysql.jdbc.Driver驱动,需要将D: ...