[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客服 按鈕動態懸浮實現 的過程