正在加载中

最后更新于 2018年12月17日

搞这个本来是一帆风顺的,但是js就是出了一个问题,单向弹出的时候没有问题,但是返回原来位置的时候就会一直卡在某个位置然后前后移动,头疼,找了半天才发现,之前的动画封装有一个问题。

创建超时调用之前,我们做了一个clearInterval(window.timer);的操作,这个步骤第一个效果在window下创建了一个timer的超时调用,第二个效果是,当第二次运行的时候,会先清除之前的超时调用,而我这个卡住的bug就是因为没有清除到timer,因为我写成了var timer = setInterval(function() {},time);了,这样这个timer是函数里面的,而我们清除的是window下的timer,所以完全不是一回事,八竿子打不着,这就很尴尬了。

为什么要创建window下的timer?

虽然这个动画是原型里面的,你单次使用并不会出现问题,应为我们在元素达到要求的时候都做了clearInterval(timer);清理设置,但是如果我们这个动画是在hover的状态下,也就是使用mouseover和mouseout的时候,你的鼠标稍微那么移动一下下,就可能会创建N多的对应事件,这样你每个事件都调用一次这个动画函数,你每个动画函数都会创建一个timer调用,那么就会导致有几十个或者上百个timer在运行,这就解释了为什么出现了卡住某个位置然后前后移动的问题。

所以我们给这个timer设置为window下的,那么当重复运行的时候,会清除之前的调用,这样不管重复多少次,最终只会有一个timer在运行,加上我们的获取start在没有指定值得时候是即时获取的,所以不会有位置不同的影响,当然这也会有一个bug,如果你用的mouseover和mouseout,然后对这个元素设置了起始位置,那么鼠标在这个元素上时会不断的从起始位置移动,移动一点点又回到起始位置了,具体我刚刚说过了,所以就不多赘述。

不多说,先看看预览图吧:

JS 制作百度分享栏

HTML代码:

<div id="share">
    <h2>分享到:</h2>
    <ul>
        <li><a href="" class="share_one">一键分享</a></li>
        <li><a href="" class="share_weibo">新浪微博</a></li>
        <li><a href="" class="share_renren">人人网</a></li>
        <li><a href="" class="share_baidup">百度相册</a></li>
        <li><a href="" class="share_tenxun">腾讯朋友</a></li>
        <li><a href="" class="share_douban">豆瓣网</a></li>
        <li><a href="" class="share_baidus">百度收藏</a></li>
        <li><a href="" class="share_hexun">和讯微博</a></li>
        <li><a href="" class="share_qqkj">QQ空间</a></li>
        <li><a href="" class="share_baidunew">百度新首页</a></li>
        <li><a href="" class="share_tengxunwb">腾讯微博</a></li>
        <li><a href="" class="share_kaixin">开心网</a></li>
        <li><a href="" class="share_baidut">百度贴吧</a></li>
        <li><a href="" class="share_souhu">搜狐微博</a></li>
        <li><a href="" class="share_QQhy">QQ好友</a></li>
        <li><a href="" class="share_more">更多...</a></li>        
    </ul>
    <div class="share_footer"><a href="">百度分享</a></div>
    <span id="share_buttom" class="noselect">分享</span>
</div>

CSS代码:

这里要注意一下,ie8如果没有给#share 设置height,是无法触发mouseover和mouseout事件,由于要设置height,但是ie和其他浏览器默认字体不同,所以要统一字体,即便这样ie还是差一点点高度填满,查看css发现ul高度相差4px,索性ul的高度也固定成一样的(取最大)。

#share > h2,#share ul   {
        margin: 0;
        padding: 0;
    }
.noselect {
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Chrome/Safari/Opera */
        -khtml-user-select: none; /* Konqueror */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently not supported by any browser */
    }
#share {
    width: 220px;
    height: 288px;
    top: 0;
    left: -222px;
    background: #fff;
    border: 1px solid #2d373e;
    position: absolute;
    font-family: "微软雅黑";
}

#share>h2 {
    font-size: 16px;
    font-weight: normal;
    color: #666;
    line-height: 40px;
    background-color: #eee;
    text-indent: 10px;
}

#share ul {
    list-style: none;
    height: 208px;
    overflow:hidden;
    padding: 5px;
    font-size: 14px;
}

#share ul li {
    float: left;
    width: 50%;
    margin: 3px 0;
}

#share ul li a {
    display: block;
    color: #666;
    text-decoration: none;
    text-indent: 25px;
    background-image: url(images/share_bg.png);
    background-repeat: no-repeat;
    transition: color .3s;
}

#share ul li a:hover {
    color: #00AAFF;
}

#share ul li a.share_one {
    background-position: 0 2px;
}

#share ul li a.share_weibo {
    background-position: 0 -28px;
}

#share ul li a.share_renren {
    background-position: 0 -58px;
}

#share ul li a.share_baidup {
    background-position: 0 -88px;
}

#share ul li a.share_tenxun {
    background-position: 0 -118px;
}

#share ul li a.share_douban {
    background-position: 0 -148px;
}

#share ul li a.share_baidus {
    background-position: 0 -178px;
}

#share ul li a.share_hexun {
    background-position: 0 -208px;
}

#share ul li a.share_qqkj {
    background-position: 0 -238px;
}

#share ul li a.share_baidunew {
    background-position: 0 -268px;
}

#share ul li a.share_tengxunwb {
    background-position: 0 -298px;
}

#share ul li a.share_kaixin {
    background-position: 0 -328px;
}

#share ul li a.share_baidut {
    background-position: 0 -358px;
}

#share ul li a.share_souhu {
    background-position: 0 -388px;
}

#share ul li a.share_QQhy {
    background-position: 0 -418px;
}

#share ul li a.share_more {
    background-position: 0 -448px;
}

#share .share_footer {
    font-size: 14px;
    text-align: right;
    color: #666;
    line-height: 30px;
    background-color: #eee;
    text-indent: 15px;
    padding: 0 10px;
}

#share .share_footer a {
    display: inline-block;
    background-image: url(images/share_bg.png);
    background-repeat: no-repeat;
    background-position: 0 -468px;
    text-decoration: none;
    color: #666;
    transition: all .3s;
}

#share .share_footer a:hover {
    color: #00AAFF;
    opacity: .7;
    filter: alpha(opacity=70);
}

#share #share_buttom {
    position: absolute;
    top: 100px;
    right: 0;
    height: 70px;
    text-align: center;
    line-height: 25px;
    margin-right: -25px;
    letter-spacing: 5px;
    background-color: #2d373e;
    writing-mode: vertical-lr;
    writing-mode: tb-rl;
    color: #eee;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
}

图片文件:

下载

JS代码:

//设置百度分享菜单位置
    $('#share').css('top',(getInner().height - parseInt(getStyle($('#share').first(),'height')))/2 + 'px');

    //设置百度分享菜单弹出动画
    $('#share').hover(function () {
        $(this).animation({
            'attr' : 'x',
            'speed' : 10,
            'time' : 20,
            'end': 0
        });
    }, function () {
        $(this).animation({
            'attr' : 'x',
            'speed' : 10,
            'time' : 20,
            'end': -222
        });
    });


Base.prototype.animation = function(obj) {
    for (var i = 0; i < this.arr.length; i++) {
        var element = this.arr[i];
        var attr = obj['attr'] == 'x' ? 'left' : obj['attr'] == 'y' ? 'top' :
                    obj['attr'] == 'w' ? 'width' : obj['attr'] == 'h' ? 'height' :
                    obj['attr'] == 'o' ? 'opacity' : 'left';
        var start = obj['start'] != undefined ? obj['start'] :
                    attr == 'opacity' ? getOpacity() :
                    parseInt(getStyle(element, attr));            
        var step = obj['step'] != undefined ? obj['step'] : 20;
        var time = obj['time'] != undefined ? obj['time'] : 30;
        var add = obj['add'];
        var end = obj['end'];
        var type = obj['type'] == 0 ? 'constant' : obj['type'] == 1 ? 'buffer' : 'buffer';
        var speed = obj['speed'] != undefined ? obj['speed'] : 6;
        
        if(add != undefined && end == undefined) {
            end = add + start;
        }else if (add == undefined && end == undefined) {
            throw new Error('alter增量或target目标量必须传一个!');
        }
        if(start > end) step = -step;

        if(attr == 'opacity') {
            element.style.opacity = start / 100;
            element.style.filter = 'alpha(opacity=' + start +')';
        }else {
            element.style[attr] = start + 'px';
        }

        clearInterval(window.timer);
        timer = setInterval(function() {
            if(type == 'buffer') {
                step =  attr == 'opacity' ? (end - getOpacity())/speed :
                        (end - parseInt(getStyle(element, attr)))/speed;
                step = (step > 0) ? Math.ceil(step) : Math.floor(step);
            }
            //document.getElementById('dox').innerHTML += getStyle(element, attr) + 'px' + '<br/>';
            if (attr == 'opacity') {
                if (step == 0) {
                    setOpacity();
                }else if(step > 0 && Math.abs(getOpacity() - end) <= step) {
                    setOpacity();
                }else if(step < 0 && (getOpacity() - end) <= Math.abs(step)) {
                    setOpacity();
                }else {
                    var temp = getOpacity();
                    element.style.opacity = (temp + step) / 100;
                    element.style.filter = 'alpha(opacity=' + (temp + step) + ')'
                }
            }else {
                if (step == 0) {
                    setAttr();
                }else if(step > 0 && Math.abs(parseInt(getStyle(element, attr)) - end) <= step) {
                    setAttr();
                }else if(step < 0 && (parseInt(getStyle(element, attr)) - end) <= Math.abs(step)) {
                    setAttr();
                }else {
                    element.style[attr] = parseInt(getStyle(element, attr)) + step + 'px';
                }
            };
        },time);

        function setAttr() {
            element.style[attr] = end + 'px';
            clearInterval(timer);
        }

        function setOpacity() {
            element.style.opacity = parseInt(end) / 100;
            element.style.filter = 'alpha(opacity=' + parseInt(end) + ')';
            clearInterval(timer);
        }

        function getOpacity() {
            if (system.ie <= 8) {
                var op = getStyle(element, 'filter');
                var s = [];
                if (op.match(/opacity=([\d]+)/)) {
                    s = op.match(/\=([\d]+)/);
                } else {
                    throw new Error('ie8一下没有获取到filter中的opacity值');
                }
                return parseInt(s[1]);
            } else {
                return parseFloat(getStyle(element, 'opacity')) * 100;
            }
        }
    }
    return this;
}
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao