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

原创 2015年11月17日 18:12:01

利用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客服 按钮动态悬浮实现 的过程

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

分享一个可展开收缩的右侧悬浮QQ在线客服代码

分享长沙写字楼网的一个用JQuery 实现的可展开收缩的右侧悬浮QQ在线客服代码 源代码见附件 在线演示: www.cslou.com 转载请注明出处 本代码仅限于学习交流,请勿用于商业...

名企动态网站开发--右侧悬浮二维码+QQ客服

js(jQuery)动态网站开发,悬浮二维码+QQ客服功能--jquery+html+css

分享一个可展开收缩的右侧悬浮QQ在线客服代码

顶0踩 分享一个用JQuery 实现的可展开收缩的右侧悬浮QQ在线客服代码  源代码见附件  在线演示: www.cslou.com  转载请注明出处 本代码仅限于学习交流,请勿用于商...

【JS】网页悬浮广告及联系QQ客服侧边栏

网页悬浮广告及联系QQ客服侧边栏,广告跳动效果,及QQ客服隐藏效果 var w3c = (document.getElementById) ? true : false; var agt = ...

悬浮的QQ客服__例图

【百行代码话应用】flex WebService应用之QQ在线客服实现

1.应用了flex中的webservice 组件,来调用QQ在线监测的接口  qqwebService.qqCheckOnline(qq_id.text);    qq_id.text 为输入的QQ号...

使用超链接实现企业QQ在线客服

使用超链接的形式嵌入在线客服,可以实现文本形式或图片形式等,这种方法比较简单灵活。完全可以先将需要添加在线客服的地方把内容设置好,然后以超链接的方式把代码嵌入就可以了。 公司网站以前使用的是这个代码...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)