首页
学习
活动
专区
圈层
工具
发布

使用 fartscroll.js 让你的网页在滚动时放屁

放屁绝对不是一个很高雅的行为,但是如果你比较喜欢恶搞,或者在愚人节,或者是一些比较特殊的网页设计中,可以通过 fartscroll.js 这个插件让你的网页在滚动的过程中 放屁。...直接打开 fatscroll.js 的官方页面(http://theonion.github.io/fartscroll.js/),滚动一下,你就可以听到了放屁声音了,你滚动的距离和速度不同,放屁的声音也不同...使用方法也很简单,先下载插件包,解压出来之后,在网页中引入 fartscroll.min.js 这个文件,然后配置下面的参数等,启用这个插件: // 在文档中滚动 400 像素就放屁 $(document...).fartscroll(); // 文档中每滚动 800 像素就放屁 $(document).fartscroll(800); // 网页中没滚动 100 像素就放屁 $("body").fartscroll...(100); // 很多很多的屁 $("body").fartscroll(5); 仅供娱乐和恶搞哈,相信应该没有太多人喜欢在访问你网页的时候,听到你网页在放屁哈哈。

1.3K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    动态网格布局进阶篇

    1.3 网格滚动控制 Grid组件提供了丰富的滚动控制属性: Grid() { // GridItems } .scrollBar(BarState.Auto) // 自动显示滚动条 .scrollBarColor...(Color.Gray) // 滚动条颜色 .scrollBarWidth(10) // 滚动条宽度 .edgeEffect(EdgeEffect.Spring) // 滚动到边缘时的效果 滚动效果(edgeEffect...和yOffset是当前滚动位置 }) .onScrollStop(() => { // 滚动停止时触发 }) .onReachStart(() => { // 滚动到顶部时触发 }) ....onReachEnd(() => { // 滚动到底部时触发,可用于实现加载更多 }) 这些事件可以用于实现各种高级功能,例如: 滚动到底部时加载更多数据 滚动时显示/隐藏顶部导航栏 滚动停止时加载图片...高级交互功能 3.1 下拉刷新 我们可以结合Refresh组件实现下拉刷新功能: @State refreshing: boolean = false build() { Refresh({

    13710

    在Python 2.7即将停止支持时,我们为你准备了一份3.x迁移指南

    2019 年底,Numpy 等很多科学计算工具都将停止支持 Python 2,而 2018 年后 Numpy 的所有新功能版本将只支持 Python 3。...明确了解哪些类型方法适合大型系统很有帮助,它会在函数未得到此类参数时给出提醒。...sorted([2, '1', 3]) # invalid for Python 3, in Python 2 returns [2, 3, '1'] 在处理原始数据时帮助发现存在的问题。...数据科学特有的代码迁移问题(以及如何解决它们) 停止对嵌套参数的支持: map(lambda x, (y, z): x, z, dict.items()) 然而,它依然完美适用于不同的理解: {x:z...但我们不应等到流行工具包开始停止支持 Python 2 才开始行动,提前享受新语言的功能吧。

    1.5K40

    在Docker守护进程停机期间保持容器运行(即重启Docker时,正在运行的容器不会停止)

    前言: 在默认情况下,当 Docker 守护进程终止时,它将关闭正在运行的容器。不过,我们可以配置该守护进程,以便在该守护进程不可用时容器仍在运行。这种功能称为实时恢复。...在 Linux 上,默认的配置文件为/etc/docker/daemon.json vim /etc/docker/daemon.json { "live-restore": true } 2.Docker...kill -SIGHUP $(pidof dockerd) 3.检查上面的配置是否成功 docker info | grep -i live 4.重启Docker,此时重启Docker时就容器就不会停止了...配置是否成功 [root@localhost ~]# docker info | grep -i live Live Restore Enabled: true 5.重启Docker,验证容器是否会停止...Docker后,上面在运行的两个容器的运行时间分别为1小时、32分钟,容器并没有在我们重启Docker时停止,而是一直保持运行状态 。

    5K20

    HarmonyOS 开发实践——滑动页面占位符加载完成时延问题分析思路&案例

    场景导入滑动页面占位符加载完成时延:可滚动页面中,滚动停止开始算起,到屏幕内占位符(一般为图片)加载完成。2. 性能指标2.1 性能指标介绍滑动页面占位符加载完成时延的S标为40ms。...滑动页面占位符加载完成,是以滑动停止为起始点,在Trace中APP_LIST_FLING泳道可以体现滚动视图的FLING惯性滚动状态的起止,惯性滚动停止则滚动停止,此时开始计算占位符加载时延。...滑动页面滚动停止后,会出现两种情形。1、未触发上拉加载,滚动停止后的第一帧,分析异常帧。...因为在长列表应用中,一般使用分页加载功能实现更多数据,在滚动停止或者将要停止时触发加载更多功能,发送网络请求,收到响应数据后解析并刷新数据源,驱动页面刷新。...4.2 因组件渲染导致占位符加载完成时延不满足S标4.2.1问题场景分析在滚动到底部时,上拉加载更多的网络请求,等待网络请求数据完成后驱动UI刷新。

    35110

    【愚公系列】《微信小程序与云开发从入门到实践》034-页面滚动与下拉刷新相关接口

    在小程序的开发过程中,如何实现流畅的页面滚动和高效的下拉刷新功能,成为了提升用户体验的重要环节。 本篇文章将深入探讨微信小程序中页面滚动与下拉刷新相关接口的使用。...我们将详细介绍如何利用小程序提供的API,实现页面的滚动效果,以及如何通过下拉刷新机制,让用户在浏览内容时获得更为顺畅和愉悦的体验。...一、页面滚动与下拉刷新相关接口 1.通过 API接口使页面滚动到指定的位置 1.1 默认页面滚动 在小程序开发中,当页面内容的高度超出页面本身的高度时,页面会自动启用滚动条,允许用户通过滑动来查看页面内容...在页面上执行 上下拉 动作时,顶部会显示下拉刷新组件,并提示用户正在刷新。...// pages/example/example.json { "enablePullDownRefresh": true } 2.3 触发下拉刷新 当用户在页面上进行 下拉刷新 时,会触发一个回调方法

    35410

    超级实用!,掌握这9个鲜为人知的CSS属性

    mandatory :容器会自动吸附到最近的吸附点,确保在滚动过程中始终处于吸附位置。 proximity :如果滚动停止在特定的阈值内,容器会自动对齐到最近的对齐点。...scroll-snap-align scroll-snap-align 属性控制滚动容器中捕捉位置的对齐方式。它决定了滚动停止时滚动容器与捕捉点的对齐方式。...这是一个将捕捉位置与滚动容器的起始位置对齐的示例: .container { scroll-snap-align: start; } 使用这个CSS,当滚动停止时,滚动容器将会将捕捉位置对齐到容器的起始位置...在这种情况下,渐变从0%开始为红色,过渡到50%时为蓝色,最后在100%时为绿色。...记住,在使用这些属性时,考虑浏览器支持和潜在的跨浏览器问题是至关重要的。始终使用“Can I use”等工具检查这些属性的兼容性,以确保在不同浏览器上获得一致的体验。

    1.1K30

    我如何用一行Css代码使谷歌浏览器的数据网格滚动快10倍

    因此,我打开并开始录制,向下滚动列表一点,然后停止录制。...这就是我所看到的:DevTools / Performance 滚动"顶部链接站点"数据网格的性能配置文件,非常低的 FPS "任务"块上的那些红耳朵表明,在滚动时,某些东西需要的时间比可接受的时间要长...第 4 步 - 检查 DOM 不幸的是,DOM 在包含许多元素时不是很出色。如果是这样,则不需要在网络上各种流行的 JS 数据网格中实现虚拟化技术。在这一点上,一个有根据的猜测是,表呈现了很多元素。...第 5 步 - 改善情况 基于性能配置文件中的数据,我怀疑在滚动网格时,整个页面都已布局。并且指出许多要素的成本很高。要是有办法限制效果就好了 ... ......了解更多关于CSS contain 在 MDN. 植入广告:如果您需要一个可执行的数据网格处理 10 万+行与平滑滚动,请务必查看 Bryntum 网格 (由我和我的同事开发).

    2.9K10

    ExtJs学习笔记(22)-XTemplate + WCF 打造无刷新数据分页

    本文将讲解如何用XTemplate结合WCF与服务端交互,生成数据列表,同时加上无刷新分页功能(默认情况下ExtJs并没有为XTemplate并没有提供分页功能) 1.先做一些准备工作,写一个通用的类...前端完整代码: Code ExtJs.XTemplate + WCF 打造无刷新数据分页 刷新数据分页 <!...("Y-m-d H:i:s")} (2).服务端返回字符格式的处理: 因为JavaScriptConvert.SerializeObject(_PageData)这里已经成功序列化了,但是wcf的服务在返回时...相信也有不少人跟我有一样的疑问,后来我想了想,至少有二个好处:    a.updatepannel默认会引起大量的数据回发,虽然页面没刷新,但是客户端跟服务端之间的传输数据量很大,而用ExtJs+Wcf

    1.6K50

    移动端滚动研究

    滚动和下拉刷新 方案1:借助iscroll的原理,整个页面使用模拟滚动,将下拉刷新元素放在顶部,当页面滚动到顶部下拉时,下拉刷新元素随着页面的滚动出现,当手指离开时收回,此方案实现起来较为简单直接借助iscoll...tranlateY值,将两者同时位移来将下拉刷新元素显示出来,手指离开时(touchend)收回,这种方案满足了在正常列表滚动时使用原生的滚动节省性能,只在下拉刷新时使用模拟滚动来实现效果。...还会有一个性能上的问题就是:当页面的列表过长,dom元素过多时,在模拟滚动,下拉刷新这段时间内,页面也会有卡顿现象,这里采取了一个优化策略即: 列表较长时dom数量较多时,在触发下拉刷新的时机时将页面视窗之外的...在刷新完成之后手指离开(touchend)时将隐藏的元素显示出来。 需要注意的是,隐藏和显示视窗外的元素这个操作在下拉刷新时只会执行一次,并且只有在下拉刷新时才会执行。...大概的做法就是在页面滚动的时候, 给 添加上 .disable-hover 样式,那么在滚动停止之前, 所有鼠标事件都将被禁止。当滚动结束之后,再移除该属性。

    3.6K20

    ExtJs学习笔记(2)_Basic GridPanel

    调用时无法正确序列成JSON字符串,需要手动在类前加上数据契约 [DataContract],在属性前加上[DataMember] 如下: [Table(Name="dbo.T_Class")] ...Ajax_WCF.MyServiceAspNetAjaxBehavior">          说明一下:(3),(4)二步是必须的,目的是为了生成Restful WCF,可以在ExtJs... dataIndex: 'F_ReadMe'}],             height: 350,             width: 600,             title: '基本网格示例...中,否则网格上右击,设置显示列时,报JS错误,原因不明。...JSON时的bug. 5.为了减少生成的JSON字符串的大小,可以仅在需要输出的类属性上标记[DataMember],这样在生成的JSON字符串,不会包含未标记为[DataMember]的字段

    1.9K90
    领券