• 腾讯滑动验证-缩小适配小页面方案


    由于公司的注册使用场景一般是特别小的iframe里面网站右飘
    腾讯验证码的实际弹窗大小是这么大

    需要放到:

    这里面怎么实现呢


    滑动验证版页面实现功能
    坑:一般浏览器使用transform scale缩放实现,ie8/9 Matrix -ms-transform缩放,拖到指定位置,无法识别通过验证。
    实现方法:fwidth 参数可以设置弹窗的宽度,用来降级适配ie8/9,其他用scale实现。

    每隔一秒检测一下验证码弹窗div是否存在,如果存在则修改缩放。

    //腾讯验证码动态修改,不支持缩放则宽度为210
    var Fw = 0;
    $(function(){
        Fw = document.body.style.transform == undefined?210:0;
        /*TCaptchaModify();
        var captcha1 = new TencentCaptcha('2009830335',
        function(res) {
            if(res.ret === 0){
               $('#authCodeSlide').val(res.ticket+','+res.randstr);
                  document.qForm.submit();     
              }
            },{fFw});
            captcha1.show(); // 显示验证码*/
        })
    /**
     * 腾讯验证码动态修改,通过判断是否支持transform,进行缩放,或者设置默认弹窗宽度
     */
    function TCaptchaModify(){
        setInterval(function(){
            if($(".tcaptcha-transform").length){
                var dom = $(".tcaptcha-transform").get(0);
                //fnRotateScale($(".tcaptcha-transform").get(0),0,0.6)
                //$(".tcaptcha-transform").css({transform:'scale(0.6)'})
                if (dom.style.transform == undefined ) {//是否支持scale ie8/ie9
                    $(dom).css({
                        //zoom:0.7,
                        top:"60px",
                        left:"3px"
                    })
                }else{
                    $(dom).css({
                        transform:"scale(0.6)"
                    })
                }
            }        
        },1000);
    }

     最终效果:

  • 相关阅读:
    uva129
    uva167
    【Linux】touch命令
    【Linux】od命令
    【Linux】tail命令
    【Linux】head命令
    【Linux】less命令
    【Linux】more命令
    【Linux】nl命令
    【Linux】cat命令
  • 原文地址:https://www.cnblogs.com/zhidong123/p/11543836.html
Copyright © 2020-2023  润新知