彩世界开奖app官网-彩世界平台官方网址(彩票平台)
做最好的网站
来自 彩世界平台官方网址 2019-11-28 05:52 的文章
当前位置: 彩世界开奖app官网 > 彩世界平台官方网址 > 正文

多如牛毛效果达成之重回最上部(结合淡入、淡出

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

 

返回顶部

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

结合淡入/淡出/减速运动效果实现的返回顶部功能

返回顶部是经常会见到的效果,代码比较简单,使用2个对象和一个主函数。职责明确方便复用。在性能方面考虑了由于连续触发onscroll事件,频繁调用回调函数而产生的性能问题。可以将回调函数缓存一段时候后执行,即当这段时间内多次触发了onscroll事件,但回调函数只会执行一次。 

多如牛毛效果达成之重回最上部(结合淡入、淡出、减速滚动)【彩世界平台官方网址】。在性能方面考虑了由于连续触发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>

多如牛毛效果达成之重回最上部(结合淡入、淡出、减速滚动)【彩世界平台官方网址】。多如牛毛效果达成之重回最上部(结合淡入、淡出、减速滚动)【彩世界平台官方网址】。placeholder

 兼容性和bugs相关问题: 

本文由彩世界开奖app官网发布于彩世界平台官方网址,转载请注明出处:多如牛毛效果达成之重回最上部(结合淡入、淡出

关键词: 脚本 效果 常见 前端技术 之家