业务经理

微信扫描以上二维码

028-61286886

技术咨询

网站悬浮窗的js伸出缩进问题

迅睿框架 更新 2022-08-09 10:58:04 干掉上帝


请教一下大家,这是悬浮窗的js,但是每次打开我也悬浮窗都是缩进去的,怎么改让悬浮窗在每次打开网页是展开的呢?

$('.kf .kf-side').click(function(){
        //$('.kf').animate({ right: '-208' }, "slow");
        var rt = $('.kf').css("right");
        //alert(rt);
        var num = parseInt(rt);
        //alert(num);
        if(num < 0){
            $('.kf').animate({ right: '20px' }, "slow");
            $('.kf .kf-side span.arrow').addClass('on');
        }else{
            $('.kf').animate({ right: '-208px' }, "slow");
            $('.kf .kf-side span.arrow').removeClass('on');
        }
    });
    $('.kt-top span.close').click(function(){
        $('.kf').animate({ right: '-208px' }, "slow");
    });

    //返回顶部
    $('.kf .backTop').click(function() {
        $("html,body").stop().animate({ scrollTop: '0' }, 500);
    });

    
});


方案

  • geekcode #1 · 2022-08-04 10:18:03
    把那个'on'位置换下呢,默认添加,点击移除 on
  • helloweb #2 · 2022-08-04 10:18:09
    $('.kf .kf-side').click(function(){
            //$('.kf').animate({ right: '-208' }, "slow");
            var rt = $('.kf').css("right");
            //alert(rt);
            var num = parseInt(rt);
            //alert(num);
            if(num < 0){
                $('.kf').animate({ right: '-280px' }, "slow");
                $('.kf .kf-side span.arrow').removeClass('on');
            }else{
                $('.kf').animate({ right: '20px' }, "slow");
                $('.kf .kf-side span.arrow').addClass('on');
            }
        });
        $('.kt-top span.close').click(function(){
            $('.kf').animate({ right: '20px' }, "slow");
        });
        //返回顶部
        $('.kf .backTop').click(function() {
            $("html,body").stop().animate({ scrollTop: '0' }, 500);
        });
        
    });
  • 悦笙 #3 · 2022-08-04 10:24:03
    $('.kf').css( 'right', '20px' );
    $('.kf .kf-side span.arrow').addClass('on');加在这段js前面
  • 干掉上帝 #4 · 2022-08-04 16:55:06
    满意答案
    helloweb 二楼失败,按照你的代码浮窗所在里面了,点页点不开了
    image
  • 干掉上帝 #5 · 2022-08-09 10:58:04
    @干掉上帝:直接调整CSS样式就可以了,无需动js

迅睿系统漏洞

AI文章生成器
AI文章生成器(2026-09-20)
任务拆分独立配置 新增AI生成关键词 新增指令模板 新增品牌信...
GEO系统
GEO系统(2026-09-20)
后台 AEO 与运营端对齐:区域、跑批、CSV、补强、剧本均可在迅睿...
多语言翻译Seolang
多语言翻译Seolang(2026-09-18)
1. HTML lang 无需修改模板,自动适配当前语种页面 lan...
GeoSeo工具箱
GeoSeo工具箱(2026-09-18)
修正菜单规范
后台二次登陆验证
后台二次登陆验证(2026-09-18)
新增邮箱验证 新增短信验证
京东云短信
京东云短信(2026-09-17)
- 验证码有效期改只读展示 - 有效期旁新增系统设置按钮 - 保...
创蓝短信
创蓝短信(2026-09-17)
- 验证码有效期改只读展示 - 有效期旁新增系统设置按钮 - 保...
火山引擎短信
火山引擎短信(2026-09-17)
- 验证码有效期改只读展示 - 有效期旁新增系统设置按钮 - 保...
外贸多语言建站
外贸多语言建站(2026-09-17)
优化独立内容过滤机制