- 浏览: 1224853 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (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实现一个适应PC和移动设备,且兼容到IE7的"scrollTop"回到顶部库。 一、scrollTop属性 在JavaScript中,`scrollTop`属性用于获取或设置元素的垂直滚动位置。对于一个元素(如...
标题中的“实现变速回到顶部的JavaScript代码”是指在网页中添加一个功能,使得用户点击一个按钮后,网页能够以平滑、变速的方式逐渐滚动回页面顶部。这种效果常见于长页面设计,帮助用户轻松返回页面的起始位置,...
4. **动画效果**:为了让用户点击按钮后平滑地回到顶部,可以使用`requestAnimationFrame`或者CSS3的`transition`属性来实现平滑滚动。原生JavaScript中,可以利用定时器(`setInterval`或`setTimeout`)配合改变`...
以上就是使用JavaScript实现返回顶部功能的主要步骤和涉及的知识点。这个简单但实用的功能可以通过自定义CSS样式和JavaScript逻辑进行扩展,以适应不同网站的设计需求。通过阅读和理解上述代码,你可以创建自己的...
javascript 实现的进度条效果 javascript 实现的进度条效果
用javascript实现购物车特效
在JavaScript实现的类似淘宝网顶部导航菜单的项目中,我们主要关注的是前端开发技术,特别是JavaScript作为主要的脚本语言,以及ECMAScript规范对它的影响。这个demo旨在模拟淘宝网的用户界面,提供购物车、收藏夹、...
在这个项目中,我们探讨的是如何用JavaScript来实现一个页面下雪的效果,并且允许通过代码修改使雪花颜色从白色转变为彩色。 首先,我们需要理解JavaScript的基础知识。JavaScript是一种脚本语言,主要用于客户端的...
基于JavaScript实现三角格子棋盘五子棋.zip基于JavaScript实现三角格子棋盘五子棋.zip基于JavaScript实现三角格子棋盘五子棋.zip基于JavaScript实现三角格子棋盘五子棋.zip基于JavaScript实现三角格子棋盘五子棋.zip...
JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播...
基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的...
在JavaScript中实现“另存为”功能并不直接,因为出于安全考虑,浏览器并不提供直接调用“另存为”对话框的API。但是,我们可以通过一些技巧来模拟这一行为。以下是一些关键知识点: 1. **创建Blob对象**:首先,...
【标题】"用JavaScript实现的留言板模块"是一个利用JavaScript编程语言构建的互动功能,它允许用户在网站上发表留言,包含表情、图片以及各种文字处理功能。JavaScript是一种轻量级的解释型编程语言,常用于网页和...
然后,我们使用JavaScript来监听滚动事件并根据页面位置控制“回到顶部”按钮的显示和隐藏。当用户向下滚动一定距离后,按钮显示;当用户向上滚动时,按钮隐藏。可以使用以下代码: ```javascript document....
【基于Javascript实现返回顶部按钮】 在网页设计中,提高用户体验是一项关键任务,尤其是在内容丰富的页面上。当用户浏览到底部时,返回顶部的过程可能会显得不便。为了缓解这一问题,我们可以利用JavaScript来创建...
在本文中,我们将深入探讨如何使用JavaScript实现各种网页特效,以提升用户体验并使网站更具吸引力。 1. **页面加载动画** 当用户访问网页时,加载动画可以提供视觉反馈,表明页面正在加载。JavaScript可以通过...
爱心源码基于html和javascript实现的爱心源码爱心源码基于html和javascript实现的爱心源码爱心源码基于html和javascript实现的爱心源码爱心源码基于html和javascript实现的爱心源码爱心源码基于html和javascript实现...
这个实现是基于JavaScript,一种广泛用于构建交互式Web页面的脚本语言。虽然这个实现不包括自动搜索歌词的功能,但它依然展示了JavaScript在处理动态内容和实时更新方面的强大能力。 首先,JavaScript的核心在于DOM...
本文将介绍使用 JavaScript 实现页面打印的方法,并提供相关的代码示例。 一、使用 ExecWB() 函数实现打印 ExecWB() 函数是 IE 浏览器提供的一个函数,可以用来调用 IE 菜单下的打印命令。下面是一个使用 ExecWB()...