- 浏览: 3322335 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (567)
- Web前端-html/表单 (19)
- Web前端-CSS (24)
- Web前端-CSS框架 (4)
- Web前端-JS语言核心 (50)
- Web前端-JS客户端 (26)
- nodejs生态+grunt (10)
- seajs和requirejs (9)
- backbone等框架 (7)
- 模板基础 (7)
- Web前端-deps(不改动) (6)
- Web前端-component (10)
- Web前端-jquery-plugin (13)
- 浏览器兼容性 (6)
- Web前端-使用jQuery (25)
- Web前端-使用jqueryui (6)
- Web前端-性能优化 (3)
- Web协议-HTTP (6)
- ExtJS (13)
- PHP (22)
- PHP面向对象 (4)
- PHP扩展-SOAP (6)
- PHP扩展-curl (4)
- PHP与HTML(导出) (5)
- PHP扩展-综合 (7)
- mysql基础应用 (18)
- 技术心情 (18)
- 算法和面试题 (17)
- 工具(开发)使用 (36)
- memcached原理 (2)
- session和cookie (4)
- UML (2)
- Web前端_FusionCharts (5)
- Web前端_Flex (4)
- Web前端_JSP (3)
- JavaSE (10)
- JavaEE (4)
- tomcat (2)
- Servlet开发 (3)
- Spring开发 (1)
- REST相关 (2)
- 大访问量、高并发 (2)
- 网络编程 (1)
- YII (21)
- linux命令和内核 (12)
- yii与数据库 (10)
- yii与表单 (12)
- yii view层 (1)
- perl (7)
- yii扩展 (7)
- shell (4)
- photoshop (7)
- 视觉设计 (2)
- 我关注的名人在路上 (4)
- 1-自学能力 (1)
- 2-人际沟通能力 (3)
- 3-职业规划能力 (7)
- 4-项目管理能力 (2)
- python (3)
- django (4)
- Mysql高级应用 (6)
- prototype.js (4)
- Web系统安全 (1)
- Web前端-mobile (2)
- egret (6)
- jQuery源码分析 (5)
- fis (4)
最新评论
-
yzq21056563:
感谢作者分享~请教下,http://www.lisa33xia ...
CSS基础:text-overflow:ellipsis溢出文本 -
u012206458:
$.ajax的error,complete,success方法 -
DEMONU:
谢谢,虽然不能给你赞助,但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes:
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础:text-overflow:ellipsis溢出文本 -
zenmshuo:
用过SpreadJS,也包含数据可视化的图表
推荐几个web中常用js图表插件
作者:zccst
有时候需要用到,判断页面是向上还是向下滚动了,兼容比较低版本的浏览器如IE6、7等。
原理:拿当前的scrollTop和之前的scrollTop对比
如果变大了,表示向下滚动(scrollTop值变大);
如果变小了,表示向上滚动(scrollTop值变小)。
难点是理解setTimeout=0时的运行机制。
查看demo页:
http://www.uiej.com/demo/demo1171.html
setTimeout=0时的运行机制:
有时候需要用到,判断页面是向上还是向下滚动了,兼容比较低版本的浏览器如IE6、7等。
原理:拿当前的scrollTop和之前的scrollTop对比
如果变大了,表示向下滚动(scrollTop值变大);
如果变小了,表示向上滚动(scrollTop值变小)。
难点是理解setTimeout=0时的运行机制。
$(document).ready(function(){ var p=0,t=0; $(window).scroll(function(e){ p = $(this).scrollTop(); if(t<=p){//下滚 ....... } else{//上滚 ....... } setTimeout(function(){t = p;},0); }); });
查看demo页:
http://www.uiej.com/demo/demo1171.html
setTimeout=0时的运行机制:
发表评论
-
js浏览器端判断当期是否在线
2015-04-17 20:50 2370作者:zccst 纯浏览器端解决办法就是轮询,img轮询和a ... -
[BOM]navigator知识点
2015-03-20 14:42 4849作者:zccst 历史 最早的时候有一个浏览器叫NCSA ... -
[html5]navigator.online属性检测用户是否在线
2015-03-20 14:11 5347作者:zccst navigator.online属性检测用 ... -
document.body、document.documentElement和window获取视窗大小的区别
2015-03-04 15:12 27660作者:zccst 参考网址:http://www.ido32 ... -
Document,Node,Element,HTMLDocument ,HTMLCollection,HTMLElement,NodeList
2015-01-05 15:38 7563作者:zccst 这个问题如 ... -
doctype和compatModel相关
2015-01-04 19:30 714作者:zccst 一、doctype 1,严格模式与混杂模 ... -
window.history
2014-12-23 10:37 10067作者:zccst 旧版: f ... -
js 页面刷新location.reload和location.replace的区别小结
2014-12-02 20:57 129608作者:zccst reload 方法,该方法强迫浏览器刷新当 ... -
又一次掉进encodeURIComponent的坑里了
2014-11-05 18:21 22492作者:zccst 原坑: get请求 ajax.get ( ... -
DOM元素在浏览器中的位置参数,如offset,ownerDocument
2014-10-08 17:07 4254作者:zccst 2014-10-21 区分clientX ... -
js跨域的多种解决办法
2014-09-20 09:41 945作者:zccst 2015-3-11 JavaScript ... -
[Event]事件(高程版)(二)事件处理程序
2014-06-17 18:00 766作者:zccst <input type=" ... -
[Event]事件(高程版)(一)事件类型
2014-06-17 17:59 726作者:zccst 一、UI事件 1,load 两种添加方式 ... -
target与currentTarget的区别(jqueryui方式获取z-Index)
2014-06-17 12:00 15939作者:zccst 2014-6-25 今天看了jQuery ... -
JSONP原理及实现
2014-06-09 16:47 12362作者:zccst 2015-04-30 更新 跨域实现的 ... -
事件基础(高程版)
2014-06-09 16:37 1025作者:zccst 2014-5-4 一、事件流 标准:DOM ... -
DOM0-节点关系,节点操作API
2014-06-09 15:29 950作者:zccst 2014-09-20 补 ... -
document操作iframe
2013-12-13 16:26 1269作者:zccst //在iframe内获取父页面节点 win ... -
js-location对象
2013-12-11 17:05 1506zccst总结 2015-04-14 获取location的 ... -
document.body.scrollTop和document.documentElement.scrollTop
2013-09-14 14:44 1372作者:zccst 网页可见区域宽: document.bo ...
相关推荐
//定义默认的向上滚与向下滚的边界 [removed] = [removed] = function(){ var oScrollTop=$(window).scrollTop(); if ( oScrollTop > 80) { //write your code } if ( oScrollTop < 80) { //write your ...
在JavaScript(JS)编程中,控制滚动条自动向下滚动是一种常见的需求,特别是在实时聊天、论坛或者日志更新等场景中,我们希望用户能够始终保持看到最新的内容。本篇将详细讲解如何利用JavaScript实现这一功能,以及...
在这个场景中,"js文字滚动制作js scroll单排文字滚动向上间歇滚动"涉及到的是使用JavaScript实现一种常见的网页特效——文字滚动。 文字滚动是一种常见的网页动态效果,它可以使页面上的文本按照设定的方向(如...
jQuery带按钮向上滚动向下滚动代码是基于流行的JavaScript库jQuery实现的一种网页滚动效果。这个功能通常用于网站页面,尤其是内容较多的页面,以便用户能够轻松地浏览页面内容而无需手动滚动鼠标或触摸屏幕。这种...
当用户向下滚动并且导航栏离开屏幕顶部时,我们可以恢复其原始样式,使导航栏返回到正常位置。 为了实现这一功能,可以编写如下jQuery代码示例: ```javascript $(document).ready(function() { var $nav = $('#...
主要介绍了vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起...
【文字列表无缝向上滚动】是一种常见的网页动态效果,它能够为用户提供流畅的视觉体验,尤其在展示大量文本信息时,如新闻更新、公告或者产品列表等。这种效果通过编程技术实现,使得文字列表在到达顶部时不是突然...
"JS不间断向下滚动"通常是指利用JavaScript实现页面内容持续自动滚动的效果,这种效果常见于新闻滚动、公告滚动等应用场景,能够使用户在不手动操作的情况下看到不断更新的信息。 在实现JS不间断向下滚动的过程中,...
这种技术允许用户在向下滚动页面时,内容以平滑、动态的方式呈现,增加了视觉吸引力。本文将深入探讨如何实现"向下滚动下一个元素时将出现滚动动画"的效果,主要涉及HTML、CSS和JavaScript。 首先,HTML是网页的...
在`单行滚动.html`中,jQuery可能使用了`.slideUp()`和`.slideDown()`方法来模拟向上或向下的滚动效果。这些方法会改变元素的高度,从而实现内容的隐藏和显示。同时,通过设置定时器(如`setInterval`)来周期性地...
在网页设计中,"js页面向下滚动浮动层"是一种常见的用户体验优化技术,它使得特定的元素(如导航菜单)在用户滚动页面时始终保持在屏幕的可见区域。这种效果可以增加用户的交互性和易用性,特别是在内容丰富的长页面...
然后,创建一个定时器(`setInterval`函数),在每次间隔时间后更新容器的`top`值,使其向下移动一段距离,从而模拟向上滚动的效果。当容器的顶部到达某个位置时,我们可以将其`top`值重置为初始值,实现无缝循环...
接着定义了一个`scrollContent`函数,该函数通过`animate`方法平滑地将公告内容向上滚动,当滚动到底部时,将其恢复到初始位置并再次调用自身,形成无缝循环。 请注意,`5000`是动画的持续时间,单位为毫秒,可以...
2. **方向检测**:插件可以区分向上滚动和向下滚动,这样你可以根据滚动方向执行不同的操作。 3. **防抖动优化**:为了提高性能,插件可能包含了防抖(debounce)或节流(throttle)机制,防止在用户快速滚动时频繁...
在处理滚动事件时,我们需要根据具体需求来判断滚动的方向(向上或向下)以及是否到达顶部或底部。在上述代码中,我们检查了垂直偏移量`VerticalOffset`,并与可视区域高度`ExtentHeight`和视口高度`ViewportHeight`...
如果向上滚动,需要调整`top`属性。 ```javascript var index = 0; var container = document.getElementById('scroll-container'); var imagesDOM = container.getElementsByTagName('img'); function ...
3. **滚动方向判断**:我们需要判断用户是向上滚动还是向下滚动。这可以通过比较当前滚动位置(`$(window).scrollTop()`)和上一次滚动位置来实现。如果当前滚动位置大于上一次位置,说明是向下滚动,反之则是向上...
3. **计算滚动距离**:在`onScrollChange`方法中,我们需要比较当前滚动位置`scrollY`和上一次滚动位置`oldScrollY`,判断是向上还是向下滚动。如果`scrollY > oldScrollY`,表示正在向下滚动,此时可以逐渐隐藏标题...