百度商桥自定义

百度商桥是由百度提供的一段js自动生成的内容,自带样式和js,提供的代码是一段js,修改样式需要在百度商桥官网进行皮肤更换。

下面提供一种,不使用百度商桥官网皮肤自定义样式的方法。

这里写图片描述
上图是百度商桥默认样式

这里写图片描述
上图是自定义之后样式

具体方法:

/*百度商桥代码*/
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?f6c6885ed6b8a99c743fd6a4b0706e87";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();

//联系我们显示
!function() {
    var timer = setInterval(function() {
        //处理免费电话
        if ($(".lxb-container").length > 0) {
            var btn = $(".lxb-close-btn"),
                icon = $(".lxb-container");

            btn.remove();
            icon.css({ "right": "61px","bottom": "auto","top": "40%","left":"auto"});
            var cssText = icon.attr("style") + ";display: none !important;";
            icon.css("cssText", cssText);
            icon.find(".lxb-hide-btn").remove();
            clearInterval(timer);
        }

        //隐藏在线客服图标
        if($("#nb_icon_wrap").length > 0){
            $("#nb_icon_wrap").hide();
        }
    }, 1);

    setTimeout(function() {
        clearInterval(timer);
    }, 30000);
} ();

$(".webService .tel").hover(function(){
    $(".lxb-container").show();
},function(){
    $(".lxb-container").hide();
});

案例地址:
R_上海软强信息资讯有限公司
http://www.li-king.cn/

A_上海爱数信息技术股份有限公司
https://www.eisoo.com/

猜你喜欢

转载自blog.csdn.net/bigbear00007/article/details/80742546
今日推荐