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


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 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
Javascript中的变量使用说明
May 18 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
个人小程序接入支付解决方案
May 23 Javascript
原生JS实现相邻月份日历
Oct 13 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 Javascript
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
php adodb介绍
2009/03/19 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
php实现简单的上传进度条
2015/11/17 PHP
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
jQuery timers计时器简单应用说明
2010/10/28 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
python画微信表情符的实例代码
2019/10/09 Python
python变量的作用域是什么
2020/05/26 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
美国领先的在线旅游网站:Orbitz
2018/11/05 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
应届本科生推荐信范文
2013/12/25 职场文书
学生干部的自我评价分享
2014/01/18 职场文书
学历公证委托书
2014/04/09 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
店面出租协议书范本
2014/11/28 职场文书
python 提取html文本的方法
2021/05/20 Python