jQuery Mobile 滚屏开始（Scrollstart）

最新推荐文章于 2020-07-19 13:53:42 发布
最新推荐文章于 2020-07-19 13:53:42 发布
阅读量475 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46582421/article/details/106631584
版权

scrollstart 事件是在用户开始滚动页面时触发
在这里插入图片描述

在这里插入图片描述
前端程序员路易
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
better-scroll踩坑之scrollStart、scroll与scrollEnd-工作笔记
simper_boy的博客
08-16 3348
前两天老板说新增一个效果 在滑动的时候让底部导航slidedown(下滑隐藏)、滑动停止的时候slidup(上移显示)； 基于原项目使用的better-scroll实现。 动画效果是使用animate库 + vue实现的，这个跟坑没关系，代码就不贴了。 一开始实现思路是这样的： 在滑动的时候我就让他下滑隐藏，滑动停止的时候就上移显示，em，正常来说是这样的 /*初始化 import Scroll...
监听屏幕滚动开始和结束事件(scroll start 和scroll stop)
wh_xmy的博客
07-16 5109
背景：最近在写一个专题页，产品要求右边导航栏在滑动的时候收起，滑动停止时显示，这样就需要监听到屏幕滚动（scroll start）事件和滚动结束(scroll end)事件，但是又不能为了这个功能专门引入jQuery mobile这个库，所以找到以下方法进行实现，基于jQuery 封装的插件。 解决方案：（jQuery1.9版本及以后）插件代码如下 /** * 函数：scrollstart...
扩展jquery scroll事件，支持 scroll start 和 scroll stop
qq_19595103的博客
06-26 139
javascript里有一个事件是滚动事件，只要拖动滚动条，就会触发事件。 用jquery的话，这个事件scroll 可以查看jquery api ：http://api.jquery.com/scroll/ 但scroll 事件有一个缺陷，就是只能判断滚动条滚动，而不能监控滚动条停止滚动时的事件。 现用jquery扩展一下scroll 事件，新增 不多说，直接上代码实在点。
jQuery 事件 scroll() 方法的使用教程
cuishouming的博客
11-13 6002
当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。scroll() 函数触发 scroll 事件。或者如果设置了 function 函数，则规定当发生 scroll 事件时执行的代码。 首先介绍一下(document).height()与$(window).height()的区别： $(document).heig...
jQueryMobile的(二十) 滚屏事件(scrollstart、scrollstop)
无名的专栏
11-04 3172
scrollstart：当屏幕滚动开始的时候触发。苹果的设备会在滚屏时冻结DOM的操作，当滚屏结束时按队列执行这些dom操作，我们现在正在研究方法让苹果的设备在滚屏开始前执行dom操作。 $(document).ready(function(){ $('body').bind('scrollstart', function(event) { // Add scroll start
sjqzhang#webtech#jQuery Mobile 滚屏事件1
07-25
jQuery Mobile 滚屏开始（Scrollstart）scrollstart 事件是在用户开始滚动页面时触发：实例尝试一下 »| 注意：iOS 设备在滚
jquerymobile滚动加载内容
08-13
在jQuery Mobile中，可以监听页面的`scrollstart`和`scrollstop`事件来实现滚动加载内容的功能。`scrollstart`事件在用户开始滚动时触发，而`scrollstop`事件在用户停止滚动后触发。我们可以结合这两个事件来决定...
jQuery mobile 移动web(6)
11-23
- `scrollstart`：滚动开始时触发。 - `scrollend`：滚动停止时触发。 4. **页面显示/隐藏事件**： - `pagebeforeshow`：页面开始动画显示前触发，可以用于预加载数据或做页面准备。 - `pagebeforehide`：页面...
jqueryMobile事件
05-19
18. **scrollstart**：用户开始滚动页面时触发，可用于实现滚动相关的功能。 19. **scrollstop**：用户停止滚动时触发，可以用来更新页面内容或停止动画。 20. **swipe**、**swipeleft**、**swiperight**：当用户...
JQuery移动页面开发之屏幕方向改变与滚屏的实现
10-23
在JQuery移动页面开发中，为了实现屏幕方向改变与滚屏的响应式效果，开发者需要理解和利用特定的事件。本文将详细阐述这两个关键点，并提供实际应用示例。 首先，让我们探讨“方向改变事件”（orientationchange）...
Scroller中的startScroll方法的理解
Elvis写代码
04-21 5725
/** * Start scrolling by providing a starting point and the distance to travel. * The scroll will use the default value of 250 milliseconds for the * duration. * * @param sta
个人对Scroller中的startScroll方法的理解
tenpage的专栏
11-24 7992
API如下： public void startScroll (int startX, int startY, int dx, int dy) 　　以提供的起始点和将要滑动的距离开始滚动。滚动会使用缺省值250ms作为持续时间。     　　参数         　　startX 水平方向滚动的偏移值，以像素为单位。正值表明滚动将向左滚动 　　startY 垂直方向滚
jquery scroll_jQuery scroll（）
从零开始的教程世界
07-19 693
jquery scrolljQuery scroll() function triggers when the element is scrolled. This method attaches a handler, which executes when the scroll event is fired. A scroll event fires for all elements which ...
jquery mobile + iscroll + iscrollview 开发滚动翻页功能
热门推荐
Freeplay的专栏
04-29 1万+
https://github.com/watusi/jquery-mobile-iscrollview
jQuery 滚动到指定位置触发动画
王颜华的博客
04-25 1万+
项目需求：将某一个div在滑动的时候固定在顶端，滑动到顶端的时候回到原来位置。 如gif所示：   所需jQuery文件：https://pan.baidu.com/s/1qXTEifU   1.css加上active    .active { position: fixed; top: -10px;//根据需要可以调整 就是活跃分区距离顶端的距离 lef...
Jquery Mobile 插件 iscroll的使用
jone741852963的专栏
07-02 979
iscroll 下拉 上拉刷新效果的实现，这是在网上找到的De
Scroller startScroll() fling() 参数详解
王智博
03-20 1280
fling() /** * Start scrolling based on a fling gesture. The distance travelled will * depend on the initial velocity of the fling. * * @param startX Starting point of the scroll (...
通过鼠标向下滚动使得图片开始旋转且自动加速，过5m后，图片停止旋转恢复初始状态
最新发布
05-24
这是一个比较复杂的交互效果，需要使用JavaScript和CSS来实现。以下是一种可能的实现方式： 1. 首先，在HTML中添加一个需要旋转的图片，并给它一个ID，例如： ```html <img id="rotate-image" src="image.jpg" /> ``` 2. 然后，在CSS中给这个图片添加旋转的动画效果，例如： ```css #rotate-image { transition: transform 2s ease-in-out; } .rotate { transform: rotate(360deg); } ``` 这里使用了CSS的transform属性来实现旋转，同时使用了transition属性来控制动画时间和缓动效果。 3. 接下来，在JavaScript中监听鼠标滚动事件，并在滚动时动态修改图片的CSS样式，例如： ```javascript var image = document.getElementById('rotate-image'); var scrollStart = null; window.addEventListener('scroll', function() { if (scrollStart === null) { scrollStart = window.pageYOffset; } var scrollDistance = window.pageYOffset - scrollStart; var rotateAngle = Math.min(scrollDistance / 10, 180); image.style.transform = 'rotate(' + rotateAngle + 'deg)'; if (scrollDistance >= 5000) { image.classList.add('rotate'); } }); ``` 这里使用了pageYOffset属性来获取页面滚动距离，根据滚动距离计算旋转角度，并通过修改CSS样式来实现旋转效果。当滚动距离超过5000像素时，添加一个rotate类来触发停止旋转的动画效果。 4. 最后，在CSS中添加停止旋转的动画效果，例如： ```css .stop { animation: stop-rotate 2s ease-in-out; } @keyframes stop-rotate { from { transform: rotate(180deg); } to { transform: rotate(0deg); } } ``` 这里使用了CSS的animation属性来实现停止旋转的动画效果，同时使用了keyframes定义动画过程。 完整的代码如下： ```html <!DOCTYPE html> <html> <head> <style> #rotate-image { transition: transform 2s ease-in-out; } .rotate { transform: rotate(360deg); } .stop { animation: stop-rotate 2s ease-in-out; } @keyframes stop-rotate { from { transform: rotate(180deg); } to { transform: rotate(0deg); } } </style> </head> <body> <img id="rotate-image" src="image.jpg" /> <script> var image = document.getElementById('rotate-image'); var scrollStart = null; window.addEventListener('scroll', function() { if (scrollStart === null) { scrollStart = window.pageYOffset; } var scrollDistance = window.pageYOffset - scrollStart; var rotateAngle = Math.min(scrollDistance / 10, 180); image.style.transform = 'rotate(' + rotateAngle + 'deg)'; if (scrollDistance >= 5000) { image.classList.add('rotate'); image.classList.add('stop'); } }); </script> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值