saber酱的抱枕

Fly me to the moon

11/3
12:15
学习

修改商务通弹窗元素的尺寸

最近做了两个手机站,美工的设计稿都是640px宽,但是商务通弹窗图片是260px宽,放在页面中显得很小。无奈进行放大。(我很好奇在商务通后台能不能把弹窗尺寸设置得比图片实际宽高大。那样就很省事了。)

商务通弹窗处的主要结构如下:

其中LR_swtbox是控制弹窗图片大小,图片是它的背景图。LR_swtchat和LR_swtchat a是打开咨询窗口的链接,LR_swtColse和LR_swtColse a是关闭弹窗的按钮。

css样式如下:

#LR_swtbox{width:520px !important;height: 310px !important;margin-left: -130px;margin-top: -77px;background-size: 100% !important;}
#LR_swtchat,#LR_swtchat a{width:520px !important;height: 310px !important;}
#LR_swtColse,#LR_swtColse a{width: 70px !important;height: 60px !important;}

一开始我是脑抽的用js写的,中间有些地方被坑了,例如有些元素无法覆盖它的样式,只好转而对♂付相邻的元素。效果出来之后才想到用css写多省事。用js设置css的时候写得真蛋疼,定时器也耗资源,还要引入jq。但是js有一个好,就是自由度高,如果以后拿到别的地方用,改一个参数就行了,css就都得改。

js代码如下:

<script>
    function img2b () {
        var trueW=260;
        if (!!document.getElementById("LR_swtbox")) {
        	if ($("#LR_swtbox").width()==trueW) {//如果是没有放大的情况下
        		var oldW=$("#LR_swtbox").width();
	            var oldH=$("#LR_swtbox").height();
	            $("#LR_swtbox").css({"width":oldW*2+"px","height":oldH*2+"px","marginLeft":"-"+oldW/2+"px","marginTop":"-"+oldH/2+"px","backgroundSize":"100%"});
	            $("#LR_swtchat").css({"width":oldW*2+"px","height":oldH*2+"px"});
	            $("#LR_swtchat a").css({"width":oldW*2+"px","height":oldH*2+"px"});
        		var oldCloseW=$("#LR_swtColse").width();
        		var oldCloseH=$("#LR_swtColse").height();
	            $("#LR_swtColse").css({"width":oldCloseW*2+"px","height":oldCloseH*2+"px"});
	            $("#LR_swtColse a").css({"width":oldCloseW*2+"px","height":oldCloseH*2+"px"});
        	};
        };
    }
    var img2bT=window.setInterval("img2b()", 100);
</script>

里面有两个要注意的地方,第一,判断元素是否存在的时候,不能使用jq的选择器,因为jq永远有返回值(即使返回值是空集合),条件会判断为true。如果为了方便可以用jq选择之后用length>0来判断。第二,不要关闭定时器,因为弹窗关闭之后,再次出现时还是原来的大小,需要再次放大。所以我设置了一个原本的宽度来作为判断条件。

话说我这代码高亮插件真是有病,好好地代码怎么成注释了。

修改商务通弹窗元素的尺寸