常见效果实现之返回顶部(结合淡入、淡出、减速滚动)


Posted in Javascript onJanuary 04, 2012

在性能方面考虑了由于连续触发onscroll事件,频繁调用回调函数而产生的性能问题。可以将回调函数缓存一段时候后执行,即当这段时间内多次触发了onscroll事件,但回调函数只会执行一次。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="gb2312" /> 
<title>结合淡入/淡出/减速运动效果实现的返回顶部功能</title> 
<style> 
.fixed{ 
position:fixed; bottom:100px; width:20px; right:100px; height:80px; font-size:12px; 

 cursor:pointer; background-color:#ccc; opacity:0; filter: alpha(opacity=0); 
} 
.placeholder{ height:2000px;} 
</style> 
</head> 
<body> 
<div id="gotop" class="fixed"> 
返回顶部 
</div> 
<script> 
var tool = { 
//此方法为了避免在 ms 段时间内,多次执行func。常用 resize、scoll、mousemove等连续性事件中 
buffer: function(func, ms, context){ 
var buffer; 
return function(){ 
if(buffer) return; 
buffer = setTimeout(function(){ 
func.call(this) 
buffer = undefined; 
},ms); 
}; 
}, 
/*读取或设置元素的透明度*/ 
opacity: function(elem, val){ 
var setting = arguments.length > 1; 
if("opacity" in elem.style){//elem.style["opacity"] 读取不到CSS class中的值 
return setting ? elem.style["opacity"] = val : elem.style["opacity"]; 
}else{ 
if(elem.filters && elem.filters.alpha) { 
return setting ? elem.filters.alpha["opacity"] = val*100 : elem.filters.alpha["opacity"]/100; 
} 
} 
}, 
//获取或设置文档对象的scrollTop 
//function([val]) 
documentScrollTop: function(val){ 
var elem = document; 
return (val!== undefined) ? 
elem.documentElement.scrollTop = elem.body.scrollTop = val : 
Math.max(elem.documentElement.scrollTop, elem.body.scrollTop); 
} 
}; 
//动画效果 
var effect = { 
//淡入 
fadein: function (elem){ 
var val = 0; 
var interval = 25; 
setTimeout(function(){ 
val += 0.1; 
if(val>1){ 
tool.opacity(elem, 1) 
return; 
}else { 
tool.opacity(elem, val) 
setTimeout(arguments.callee, interval); 
} 
},interval); 
}, 
//淡出 
fadeout: function (elem){ 
var val = 1; 
var interval = 25; 
setTimeout(function(){ 
val -= 0.1; 
if(val < 0){ 
tool.opacity(elem, 0) 
return; 
}else { 
tool.opacity(elem,val) ; 
setTimeout(arguments.callee, interval); 
} 
},interval); 
}, 
//减速移动滚动条 
move: function(scrollTop){ 
setTimeout(function(){ 
scrollTop = Math.floor((scrollTop * 0.65)); 
tool.documentScrollTop(scrollTop); 
if(scrollTop !=0 ){ 
setTimeout(arguments.callee, 25); 
} 
},25); 
} 
}; 
//主程序 
(function(){//gotop 
var visible = false; 
var elem = document.getElementById("gotop"); 
function onscroll(){ 
var scrollTop = tool.documentScrollTop(); 
if(scrollTop > 0){ 
if(!visible){ 
effect.fadein(elem) 
visible = true; 
} 
}else{ 
if(visible){ 
effect.fadeout(elem); 
visible = false; 
} 
} 
} 
function onclick(){ 
var scrollTop = tool.documentScrollTop(); 
effect.move(scrollTop); 
} 
elem.onclick = onclick; 
window.onscroll = tool.buffer(onscroll, 200, this); 
})(); 
</script> 
<div class="placeholder">placeholder</div> 
</body> 
</html>

兼容性和bugs相关问题:
1 opacity: function(elem, val){

if(val){//使用这种判断方式当传0,空字符串时会产生BUG 。
2:document.documentElement.scrollTop chrome取不到值 。
3: elem.style.opacity 读取不到在CSS Class中定义的值。
4:IE6不支持fixed定位,虽然可以使用absolute模拟。不过很有很多网站都它进行了降级处理。

Javascript 相关文章推荐
写自已的js类库需要的核心代码
Jul 16 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
node.js中的favicon.ico请求问题处理
Dec 15 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
Textarea与懒惰渲染实现代码
Jan 04 #Javascript
js中有关IE版本检测
Jan 04 #Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 #Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 #Javascript
js变量以及其作用域详解
Jul 18 #Javascript
分享一个asp.net pager分页控件
Jan 04 #Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 #Javascript
You might like
图书管理程序(二)
2006/10/09 PHP
在PHP中使用redis
2013/11/04 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
JQuery中each()的使用方法说明
2010/08/19 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
Python 下载及安装详细步骤
2019/11/04 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
python自动生成sql语句的脚本
2021/02/24 Python
高中生毕业自我鉴定
2013/10/10 职场文书
白酒市场营销方案
2014/02/25 职场文书
搞笑的获奖感言
2014/08/16 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书