[Web]回到首页及QQ客服 按钮悬浮实现

利用CSS样式及JS控制，实现回到首页及QQ客服的按钮悬浮及动态效果。

图一

 

图二

 

主要属性如下：

position:fixed;//绝对定位
transition:all 1s;//实现动效

主要逻辑思路:先写出如图二的样式。

/* fixed back_to_top */
.fixed_back_to_top
{
	display: block;
	position: fixed;

	left:90%;
	bottom:30px;

	-moz-opacity:0.6; 
	opacity:0.6;

	z-index: 99;

	cursor: pointer;
}
/* fixed back_to_top Ends */

/* fixed contact_us */
.fixed_contact_us
{
	display: block;
	position: fixed;

	left:90%;
	bottom:120px;

	-moz-opacity:0.6; 
	opacity:0.6;

	z-index: 99;
}

为得到图一样式只需给 QQ客服按钮增加一个moved的类。

.fixed_contact_us_moved
{
	bottom:30px;	
}

为实现移动中的渐变，使用transition属性

	transition:all 1s;
	-moz-transition:all 1s; /* Firefox 4 */
	-webkit-transition:all 1s; /* Safari and Chrome */
	-o-transition:all 1s; /* Opera */

上面这段代码的后面三个样式，实现了trasition属性在各游览器中的适应

动态控制的实现

判断什么时候是图一状态，什么时候是图二状态需要用到两个属性。1、窗口（页面）高度2、滚动条高度

    var win_height=0;
    var scr_top=0;
    scr_top=$(window).scrollTop();
    win_height=$(window).height();

使用上面的语句来获取页面高度和滚动条高度，当然用offsetHeight属性会更好一些。

简单来说判断两者值的关系就可以确定状态，让top按钮显示隐藏，让客服按钮变换位置。

 

    $(function(){
<span style="white-space:pre">	</span>//TODO初始判断
        
        $(window).scroll(
            function(){
<pre name="code" class="javascript">		//TODO获取滚动条高度变化
		//TODO执行判定函数

}); $(window).resize( function(){ //TODO获取窗口大小变化、滚动条高度变化
//TODO执行判定函数 }); });

 

填充语句之后

 

 

<!-- fixed contact_us -->
    <div class="fixed_contact_us handpoint" id="fcu">
        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=3229802753&site=qq&menu=yes">
            <img src="assets/images/index/fcu.png" ></img>
        </a>
    </div>
    <!-- fixed contact_us script -->
    <script type="text/javascript">
    var win_height=0;
    var scr_top=0;
    $(function(){
        if(scr_top>win_height)
                {
                    $("#fcu").removeClass("fixed_contact_us_moved");
                }
                else
                {
                    $("#fcu").addClass("fixed_contact_us_moved");
                }
        
        $(window).scroll(
            function(){
                scr_top=$(window).scrollTop();
                win_height=$(window).height();
                if(scr_top>win_height)
                {
                    $("#fcu").removeClass("fixed_contact_us_moved");
                }
                else
                {
                    $("#fcu").addClass("fixed_contact_us_moved");
                }
            });
        $(window).resize(
            function(){
                scr_top=$(window).scrollTop();
                win_height=$(window).height();
                if(scr_top>win_height)
                {
                    $("#fcu").removeClass("fixed_contact_us_moved");
                }
                else
                {
                    $("#fcu").addClass("fixed_contact_us_moved");
                }
            });
    });
    </script>
    <!-- fixed contact_us script ends -->
<!-- fixed contact_us ends -->
    <!-- fixed back_to_top -->
    <div class="fixed_back_to_top handpoint" id="fbtt">
        <img src="assets/images/index/fbtt.png"></img>
    </div>
    <!-- fixed back_to_top script -->
    <script type="text/javascript">
    var current_first_menu='<?php echo isset($current_first_menu)?$current_first_menu:'jjjjjj';?>';
    var win_height=0;
    var scr_top=0;
    $(function(){
        $("#fbtt").hide();
        $(window).scroll(
            function(){
                scr_top=$(window).scrollTop();
                win_height=$(window).height();
                if(scr_top>win_height)
                {

                    $("#fbtt").fadeIn(1000,function(){});   
                }
                else
                {
                    $("#fbtt").fadeOut(1000,function(){});   
                }
            });
        $(window).resize(
            function(){
                scr_top=$(window).scrollTop();
                win_height=$(window).height();
                if(scr_top>win_height)
                {

                    $("#fbtt").fadeIn(1000,function(){});   
                }
                else
                {

                    $("#fbtt").fadeOut(1000,function(){});   
                }
            });
        $("#fbtt").click(function(){
            // $(window).scrollTop(0);
            $('html,body').animate({scrollTop: '0px'}, 800)
        });

        $('#nav_header').find('a').css({"color":"#ffffff","font-size":"14px"});

        if((document.location.href.split('?').length>1)&&(document.location.href.split('?')[1]=='pro')){
        $("#menu_2").find('a').css({"color":"#d25e43","font-size":"16px"});
        }
        else{
              $("#"+current_first_menu).find('a').css({"color":"#d25e43","font-size":"16px"});
        }
    });
    </script>
    <!-- fixed back_to_top script ends -->
<!-- fixed back_to_top ends -->

这里因为笔者是先实现了一个按钮后，被更改的需求，所以将两个按钮分开写了，其实可以放在一个函数中来处理。

 

 

以上就是 回到首页及QQ客服 按钮动态悬浮实现 的过程