腾讯滑动验证-缩小适配小页面方案 - Go语言中文社区

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


由于公司的注册使用场景一般是特别小的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();     
          }
        },{fwidth:Fw});
        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);
}

复制代码

 最终效果:

 

复杂的事情简单化,简单的事情重复做。

版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/THMAIL/article/details/104238636
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2020-03-01 21:39:09
  • 阅读 ( 1438 )
  • 分类:职场

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢