- 浏览: 1220970 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (883)
- Spring (101)
- Swing (1)
- Mysql (21)
- Js (59)
- Jsp (2)
- Hibernate (19)
- Myeclipse (5)
- SqlServer 2000 (2)
- poi (15)
- Java (70)
- SSH (12)
- Html (47)
- Fusion Charts (1)
- C\C++ (2)
- 汇编 (36)
- Jquery (37)
- Struts2 (6)
- Ubuntu (16)
- powerDesinger (4)
- Jboss (3)
- JAX-RS (13)
- JAXB (5)
- JAX-WS (11)
- JMS (4)
- WebSocket (8)
- PHP (16)
- Flash (1)
- maven (3)
- Oracle (8)
- HttpClient (6)
- sqlserver (19)
- svn (5)
- Tomcat (3)
- Jdbc (3)
- EsayUi (11)
- 微信公众平台 (19)
- IIS (2)
- Freemarker (11)
- Comet (1)
- Spring MVC (85)
- JBoss Seam (3)
- 二维码 (9)
- Spring Security (4)
- Ehcache (3)
- Apache Shiro (7)
- jackson (16)
- JPA (8)
- jcaptcha (2)
- RSA (2)
- Ajax (6)
- 跟我学Shiro (0)
- Spring4 (19)
- 跟我学spring3 (0)
- css (32)
- excel (4)
- Filter (3)
- 微信公众帐号开发教程 (0)
- Android (6)
- log4j (6)
- 淘宝接口 (17)
- 支付集成 (3)
- 单点登录 (3)
- Html5 (27)
- 移动平台前端 (3)
- Linux (44)
- FusionCharts (27)
- Json Jackson Xml (5)
- 方培工作室-微信开发 (0)
- Apache与Tomcat与IIS整合 (10)
- Nginx (17)
- webService (2)
- apache (4)
- lucene (3)
- lodop (2)
- Shiro (3)
- zTree (2)
- ireport (12)
- Servlet3.0 (5)
- 前端美工 (19)
- AngularJS (1)
- C#开发微信门户及应用 (0)
- Shell (3)
- bat脚本 (16)
- Bootstrap (26)
- Less (10)
- photoshop (6)
- Redis (6)
- Mongodb (10)
- MyBatis (3)
- 数据结构 (0)
- 读写分离-主从复制 (0)
- JFinal (0)
- 百度地图api (3)
- hadoop-hbase-hive-spark (3)
- WebStorm (2)
- Quartz (5)
- ios (0)
- Mina (8)
- Android Studio (4)
- Ratchet教程 (0)
- 移动端重构系列 (1)
- cubic-bezier贝塞尔曲线CSS3动画工具 (1)
- nginx+tomcat+memcached集群 (0)
- 集群 (0)
- ZooKeeper (3)
- Dubbo (0)
- vpn (0)
- kafka (0)
- JVM垃圾回收机制 (0)
- 微信小程序 (0)
- Lua (0)
- Hystrix (0)
- Vue.js (0)
- mycat (0)
- Openresty (0)
- springBoot (0)
- 新分类 (0)
- guava (0)
- 大数据 (0)
- Sentinel (0)
最新评论
-
JackMacing:
中文怎么解决?
SpringMVC与iReport(JasperReports) 5.6整合开发实例 -
18335864773:
用pageoffice把.可以实现在线的文档操作.直接转pdf ...
转:使用jasperreport动态生成pdf,excel,html -
linhao0907:
推荐一款轻量开源的支付宝组件:https://github.c ...
关于Alipay支付宝接口(Java版) -
songronghu:
太好了,非常有用,谢谢分享~
Java ConcurrentModificationException 异常分析与解决方案 -
wzwahl36:
http://www.atool.org/json2javab ...
Java下利用Jackson进行JSON解析和序列化
一般网页的下方都会放置一个置顶按钮, 尤其是页面底部没有导航的网页, 这样可以帮助访客重新找到导航或者重温一遍广告 (想得真美). 随着近几年来 JavaScript 的应用日渐广泛, 滑动效果无处不在, 于是我也跟跟风, 将置顶功能做成了滑动效果. 后来为了更贴合物理特征, 改造做成了减速的滑动效果.
首先说一下原理吧. 我们会获取滚动条到页面顶部的距离, 然后上移一定的距离; 再获取滚动条到页面顶部的距离, 上移一定的距离 (比上一次小一点); ...
JavaScript 代码:
/** * 回到页面顶部 * @param acceleration 加速度 * @param time 时间间隔 (毫秒) **/ function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; var x1 = 0; var y1 = 0; var x2 = 0; var y2 = 0; var x3 = 0; var y3 = 0; if (document.documentElement) { x1 = document.documentElement.scrollLeft || 0; y1 = document.documentElement.scrollTop || 0; } if (document.body) { x2 = document.body.scrollLeft || 0; y2 = document.body.scrollTop || 0; } var x3 = window.scrollX || 0; var y3 = window.scrollY || 0; // 滚动条到页面顶部的水平距离 var x = Math.max(x1, Math.max(x2, x3)); // 滚动条到页面顶部的垂直距离 var y = Math.max(y1, Math.max(y2, y3)); // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小 var speed = 1 + acceleration; window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); // 如果距离不为零, 继续调用迭代本函数 if(x > 0 || y > 0) { var invokeFunction = "goTop(" + acceleration + ", " + time + ")"; window.setTimeout(invokeFunction, time); } }
document.documentElement.scrollTop, document.body.scrollTop, window.scrollY 其实都是一样的, 但它们只在某些浏览器中起作用. 至于那哪个在哪些浏览器起作用可以自己调试一下.
HTML 代码:
<a href="#" onclick="goTop();return false;">TOP</a>
发表评论
-
前端js和css的压缩合并之wro4j
2018-05-15 11:55 0http://fantaxy025025.iteye. ... -
易百教程
2017-06-07 14:00 0http://www.yiibai.com/lua/l ... -
已测试-幻灯滑动+滚动列表
2017-01-13 10:25 0<!DOCTYPE html> < ... -
iscroll4升级到iscroll5全攻略笔记 (博主已改行,不再更新)
2017-01-12 15:38 0http://blog.csdn.net/gcz ... -
IScroll5实现下拉刷新上拉加载更
2017-01-12 15:32 0http://blog.csdn.net/chenzh ... -
iscroll5 上下拉动刷新
2017-01-12 15:28 0http://www.cnblogs.com/mrxi ... -
html页面滚动到最底部时,无限滚动
2016-12-19 14:23 0<!DOCTYPE html> & ... -
原生JS实现addClass,removeClass,toggleClass
2016-12-08 18:45 0jQuery操作class的方式非常强大,但是目前还有 ... -
简约时尚的纯CSS3 Tabs选项卡特效
2016-12-05 11:17 0插件描述:这是一款使用纯CSS3制作的Ta ... -
JS组件系列——表格组件神器:bootstrap table
2016-11-30 11:54 0JS组件系列——表格组件神器:bootstra ... -
Bootstrap可编辑表格
2016-11-30 11:46 0http://blog.csdn.net/lzxad ... -
HTML5中的Range对象的研究
2016-11-24 18:34 0http://www.alixixi.com/web ... -
js createRange与createTextRange的一些用法实例
2016-11-24 13:39 0一、返回createTextRange的text和ht ... -
JS Range HTML文档/文字内容选中、库及应用介绍
2016-11-24 11:49 0http://www.jb51.net/articl ... -
JavaScript中textRange对象使用方法小结
2016-11-24 11:39 0http://www.jb51.net/article ... -
javascript Range对象跨浏览器常用操作第1/2页
2016-11-24 10:48 0http://www.jb51.net/article ... -
JS获取节点的兄弟,父级,子级元素
2016-11-23 18:22 0先说一下JS的获取方法,其要比jQuery的方法麻烦很 ... -
javascript 包裹节点 提高效率
2016-11-23 18:02 0模仿jQuery,创建几个包裹节点的方法,发现jQue ... -
js添加视频并获取视频时间
2016-09-18 19:49 0<!DOCTYPE html> < ... -
js添加视频并获取视频时间
2016-09-02 18:09 0<!DOCTYPE html> < ...
相关推荐
本篇文章将详细探讨如何使用JavaScript(JS)来实现这一功能,并且讨论如何实现变速滚动,即在滚动过程中具有平滑过渡的效果,提升用户的交互体验。 首先,我们需要在HTML中创建一个“返回顶部”的按钮元素。可以...
至此,一个基本的JavaScript"回到顶部"功能已经实现。这个功能可以根据需求进行优化,例如添加动画效果、改变按钮的显示状态(如颜色变化)或者调整触发显示按钮的滚动距离。 在实际项目中,为了代码组织的清晰,...
然后,我们用JavaScript监听滚动事件,当页面滚动到一定高度时显示“回到顶部”按钮。可以设置一个阈值,如500像素: ```javascript window.onscroll = function() { var scrollTop = document.documentElement....
以上就是使用JavaScript实现返回顶部功能的主要步骤和涉及的知识点。这个简单但实用的功能可以通过自定义CSS样式和JavaScript逻辑进行扩展,以适应不同网站的设计需求。通过阅读和理解上述代码,你可以创建自己的...
javascript 实现的进度条效果 javascript 实现的进度条效果
用javascript实现购物车特效
在JavaScript实现的类似淘宝网顶部导航菜单的项目中,我们主要关注的是前端开发技术,特别是JavaScript作为主要的脚本语言,以及ECMAScript规范对它的影响。这个demo旨在模拟淘宝网的用户界面,提供购物车、收藏夹、...
基于JavaScript实现三角格子棋盘五子棋.zip基于JavaScript实现三角格子棋盘五子棋.zip基于JavaScript实现三角格子棋盘五子棋.zip基于JavaScript实现三角格子棋盘五子棋.zip基于JavaScript实现三角格子棋盘五子棋.zip...
JavaScript 实现的 Tab 切换效果是一种常见的网页交互设计,用于在不同的内容区域之间进行切换,通常用在页面顶部或侧边的导航菜单。在这个例子中,我们将详细讲解如何使用 JavaScript 和 CSS 实现这一功能。 首先...
JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播...
web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页...
基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的...
在JavaScript中实现“另存为”功能并不直接,因为出于安全考虑,浏览器并不提供直接调用“另存为”对话框的API。但是,我们可以通过一些技巧来模拟这一行为。以下是一些关键知识点: 1. **创建Blob对象**:首先,...
银行家算法-javascript实现.zip 银行家算法-javascript实现.zip银行家算法-javascript实现.zip银行家算法-javascript实现.zip银行家算法-javascript实现.zip银行家算法-javascript实现.zip银行家算法-javascript实现...
基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的...
JavaScript实现的俄罗斯方块是一款基于浏览器的经典游戏,它利用了JavaScript这门强大的客户端脚本语言,为用户在网页上提供了一种重温经典游戏的方式。在本文中,我们将深入探讨JavaScript如何构建这样的游戏,并...
"用JavaScript实现跨平台棋牌游戏" 本文将分享开发一款JavaScript多人联机棋牌游戏的过程,并讨论如何使用JavaScript实现跨平台棋牌游戏。该游戏可以在iOS和Android系统下流畅运行,使用Cocos2d-x作为游戏引擎,并...
Javascript实现的简单的转盘抽奖小案例+Javascript编程+Javascript小案例+转盘抽奖程序案例Javascript实现的简单的转盘抽奖小案例+Javascript编程+Javascript小案例+转盘抽奖程序案例Javascript实现的简单的转盘抽奖...
JavaScript实现的可视化表单设计器源码.zip JavaScript实现的可视化表单设计器源码.zip JavaScript实现的可视化表单设计器源码.zip JavaScript实现的可视化表单设计器源码.zip JavaScript实现的可视化表单设计器源码...
爱心源码基于html和javascript实现的爱心源码爱心源码基于html和javascript实现的爱心源码爱心源码基于html和javascript实现的爱心源码爱心源码基于html和javascript实现的爱心源码爱心源码基于html和javascript实现...