“腾讯分析”网站前端分析

.fix-content-hover .computer-www,.computer:hover .computer-www{
	-webkit-animation-name:show-word;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-duration:3s;
	-moz-animation-name:show-word;
	-moz-animation-timing-function:ease-in-out;
	-moz-animation-duration:3s;
}

@-webkit-keyframes show-word{
	0%{	
		opacity:0;
		0;
		left:80px;
	}
	100%{
		opacity:1;
		178px;
		left:130px;
	}
}
@-moz-keyframes show-word{
	0%{
		opacity:0;
		0;
		left:80px;
	}
	100%{
		opacity:1;
		178px;
		left:130px;
	}
}


.fix-content-hover .stopwatch-pointer,.index2-pciture-bg:hover .stopwatch-pointer{
	-webkit-animation-name:rotate;
	-webkit-animation-timing-function:linear;
	-webkit-animation-duration:1s;
	-moz-animation-name:rotate;
	-moz-animation-timing-function:linear;
	-moz-animation-duration:1s;
	-moz-transform-origin:14px 64px;
	-webkit-transform-origin:14px 64px;
	-moz-animation-iteration-count:1;
	-webkit-animation-iteration-count:1;
}

@-webkit-keyframes rotate{
	0%{	

		-webkit-transform:rotate(0deg);
		
	}
	100%{

		-webkit-transform:rotate(360deg);
	}
}
@-moz-keyframes rotate{
	0%{

		-moz-transform:rotate(0deg);
	}
	100%{

		-moz-transform:rotate(360deg);
	}
}


.fix-content-hover .man,.index3-pciture-bg:hover .man{
	-webkit-animation:1s .2s ease-out both;
	-moz-animation:1s .2s ease-out both;
   -webkit-animation-name:fadeInUp2;  
	-moz-animation-name:fadeInUp2; 
}
@-webkit-keyframes fadeInUp2{
	0%{
	bottom:-100%;
	}
	100%{
	bottom:0px;
	}
}
@-moz-keyframes fadeInUp2{
	0%{
	bottom:-100%;
	}
	100%{
	bottom:0px;
	}
}

.fix-content-hover .group-man-left, .group2:hover .group-man-left{
	-webkit-animation-name:fadeleft2;
	-webkit-animation-timing-function:ease-in;
	-webkit-animation-duration:1.5s;
	-moz-animation-name:fadeleft2;
	-moz-animation-timing-function:ease-in;
	-moz-animation-duration:1.5s;
}
.fix-content-hover .group-man-right, .group2:hover .group-man-right{
	-webkit-animation-name:faderight2;
	-webkit-animation-timing-function:ease-in;
	-webkit-animation-duration:1.5s;
	-moz-animation-name:faderight2;
	-moz-animation-timing-function:ease-in;
	-moz-animation-duration:1.5s;
}
@-webkit-keyframes fadeleft2{
	0%{
	left:-10%;
	opacity:0;
	}
	100%{
	left:0px;
	opacity:1;
	}
}
@-moz-keyframes fadeleft2{
	0%{
	left:-10%;
	opacity:0;
	}
	100%{
	left:0px;
	opacity:1;
	}
}
@-webkit-keyframes faderight2{
	0%{
	right:-10%;
	opacity:0;
	}
	100%{
	right:0px;
	opacity:1;
	}
}
@-moz-keyframes faderight2{
	0%{
	right:-10%;
	opacity:0;
	}
	100%{
	right:0px;
	opacity:1;
	}
}

.fix-content-hover .monitor-heartbeat,.monitor:hover .monitor-heartbeat{
	-webkit-animation-name:show2;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-duration:3s;
	-moz-animation-name:show2;
	-moz-animation-timing-function:ease-in-out;
	-moz-animation-duration:3s;
}
.fix-content-hover .monitor-star,.monitor:hover .monitor-star{
	-webkit-animation-name:star;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-iteration-count:2;
	-webkit-animation-duration:2s;
	-moz-animation-name:star;
	-moz-animation-timing-function:ease-in-out;
	-moz-animation-duration:2s;
	-moz-animation-iteration-count:2;

}


@-webkit-keyframes show2{
	0%{	
		opacity:0;
		0;
	}
	100%{
		opacity:1;
		407px;
	}
}
@-moz-keyframes show2{
	0%{
		opacity:0;
		0;
	}
	100%{
		opacity:1;
		407px;
	}
}
@-webkit-keyframes star{
	0%{	

		opacity:0;
		-webkit-transform:scale(1);
	}
	50%{
		opacity:1;
		-webkit-transform:scale(1.1);
	}
	100%{
		opacity:0;
		-webkit-transform:scale(1);
	}
}
@-moz-keyframes star{
	0%{
		opacity:0;
		-moz-transform:scale(1);
	}
	50%{
		opacity:1;
		-moz-transform:scale(1.1);
	}
	100%{
		opacity:0;
		-moz-transform:scale(1);
	}
}

.fix-content-hover .action-bg-login{
	-webkit-animation-name:fadeleft;
	-webkit-animation-timing-function:ease-in;
	-webkit-animation-duration:2s;
	-moz-animation-name:fadeleft;
	-moz-animation-timing-function:ease-in;
	-moz-animation-duration:2s;
}
.fix-content-hover .action-bg-add{
	-webkit-animation-name:faderight;
	-webkit-animation-timing-function:ease-in;
	-webkit-animation-duration:2s;
	-moz-animation-name:faderight;
	-moz-animation-timing-function:ease-in;
	-moz-animation-duration:2s;
}
@-webkit-keyframes fadeleft{
	0%{
	left:-10%;
	opacity:0;
	}
	100%{
	left:0px;
	opacity:1;
	}
}
@-moz-keyframes fadeleft{
	0%{
	left:-10%;
	opacity:0;
	}
	100%{
	left:0px;
	opacity:1;
	}
}
@-webkit-keyframes faderight{
	0%{
	right:-10%;
	opacity:0;
	}
	100%{
	right:0px;
	opacity:1;
	}
}
@-moz-keyframes faderight{
	0%{
	right:-10%;
	opacity:0;
	}
	100%{
	right:0px;
	opacity:1;
	}
}

  

; (function() {
    jQuery(document).ready(function($) {
        var FIX_CONTENT_HEIGHT = 442,
        LOGIN_HEIGHT = $('#div_login').height();
        function updateContent(index) {
            var st = $(document).scrollTop(),
            top = 0;
            top = LOGIN_HEIGHT + index * FIX_CONTENT_HEIGHT;
            scrollTo(top);
            return false;
        }
        function scrollTo(top) {
            var time = Math.abs(top - $(document).scrollTop());
            time = Math.min(Math.max(time, 500), 800);
            var body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $("html") : $("body")) : $("html,body");
            body.animate({
                scrollTop: top
            },
            time);
        }
        function postToWb() {
            var _t = '';
            var _link = '';
            var _url = encodeURIComponent(_link);
            var _assname = encodeURI("");
            var _appkey = encodeURI("ce7fb946290e4109bdc9175108b6db3a");
            var _imgPath = '';
            var _pic = encodeURI(_imgPath);
            var _site = '';
            var _u = '';
            window.open(_u, '', 'width=700, height=680, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, location=yes, resizable=no, status=no');
        }
        $('#back-top,#btn_login').click(function() {
            sendHotClick('TAV2.Index.Button.' + this.id);
            scrollTo(0);
        });
        $('#ul_menu a').each(function(index) {
            $(this).attr('href', 'javascript:void(0);');
            $(this).click(function() {
                sendHotClick('TAV2.Index.MenuBar.' + index);
                if (index == 5) {
                    postToWb();
                } else {
                    updateContent(index);
                }
                return false;
            });
        });
        $('#btn_addSite').click(function() {
            sendHotClick('TAV2.Index.Button.AddSite');
            document.location.href = '/bind/site';
        });
        $(window).scroll(function() {
            var st = $(document).scrollTop();
            if (st >= LOGIN_HEIGHT) {
                $('#menubar').addClass('fix-menu-fixed');
                $('#fix_wrapper .fix-content:first').addClass('fix-content-fixed');
                $('#back-top').show();
                for (var i = 4; i >= 0; i--) {
                    if (st >= (LOGIN_HEIGHT + i * FIX_CONTENT_HEIGHT)) {
                        $('#fix_wrapper .fix-content').removeClass('fix-content-hover');
                        $('#fix_wrapper .fix-content:eq(' + i + ')').addClass('fix-content-hover');
                        $('#ul_menu li').removeClass('current');
                        $('#ul_menu li:eq(' + i + ')').addClass('current');
                        if (i == 4) {
                            $('#fix_wrapper .fix-content:eq(5)').addClass('fix-content-hover');
                        }
                        break;
                    }
                }
            } else {
                $('#back-top').hide();
                $('.fix-content').removeClass('fix-content-fixed');
                $('#menubar').removeClass('fix-menu-fixed');
            }
        });
    });
})();

  

原文地址:https://www.cnblogs.com/chenyongyang/p/7708292.html