因为竞价站点需要,在右侧新加一个客服和关闭按钮,在此分享下步骤。
演示:
上代码:
<SCRIPT language=javascript type=text/javascript> function adv_close(){ document.getElementById("close").style.display="none"; document.getElementById("divAd").style.display="none"; } window.onload = function(){ var img1 = document.getElementById("divAd"); var top1 = img1.offsetTop; var left1 = img1.offsetLeft; var img2=document.getElementById("close"); var top2 = img2.offsetTop; var left2 = img2.offsetLeft; window.onscroll = function(){ img1.style.top = top1 + (document.documentElement.scrollTop || document.body.scrollTop) +"px"; img1.style.left = left1 + (document.documentElement.scrollLeft || document.body.scrollLeft) +"px"; img2.style.top = top2 + (document.documentElement.scrollTop || document.body.scrollTop) +"px"; img2.style.left = left2 + (document.documentElement.scrollLeft || document.body.scrollLeft) +"px"; } } </SCRIPT> <div class="divAd"> <a href="tel:{dede:global.cfg_dh/}" class="phone_tel" id="divAd"><img src="/skin/img/dh1.png"></a> <div id="close" onclick="adv_close()"><img src="/skin/img/close.png" width="20px" heitht="20px" alt="关闭"></img></div> </div>
css样式为:
/*移动客服代码*/ .phone_tel { border-radius: 50%; position: fixed; bottom: 220px; right: 6px; z-index: 666666; padding: 10px; } .phone_tel img { 120px; vertical-align: middle; } /*总体客服代码*/ .divAd{ border-radius: 50%; position: fixed; bottom: 200px; right: 6px; z-index: 666666; padding: 10px; }
这样就搞定了,可以进网站进行测试:http://yzmb.pengchenggroup.cn/