大家过年好，恭喜发财，
如果您打仗过商务通，百度商桥，快商通等软件，一定会以为默认的样式丑到爆。去找线上咨询软件官方定制自己喜好的样式又要花费大把的money，本日我教大家实现图1中的会含羞的对话框效果，只须要复制几行代码，请先关注我的头条号：前端技能分享，泡杯茶逐步看。
<div id=\公众rbutton\公众 style=\"大众right: 0px;\公众>
<svg width=\"大众100%\"大众 height=\"大众100%\"大众 id=\公众rot\"大众>
<circle r=\公众33\"大众 cx=\公众40\"大众 cy=\"大众40\"大众 stroke=\"大众red\公众 stroke-width=\"大众1\"大众 fill=\"大众transparent\"大众></circle>
<circle r=\"大众5\"大众 cx=\"大众35\"大众 cy=\公众6\公众 fill=\"大众red\"大众></circle>
<circle r=\"大众26\"大众 cx=\"大众50%\"大众 cy=\"大众50%\公众 fill=\"大众red\"大众></circle>
</svg>
<svg width=\"大众100%\"大众 height=\"大众100%\公众 id=\公众rot2\"大众>
<circle r=\公众33\"大众 cx=\"大众40\"大众 cy=\"大众40\"大众 stroke=\"大众red\"大众 stroke-width=\"大众1\"大众 fill=\"大众transparent\公众></circle>
<circle r=\公众6\"大众 cx=\"大众6\"大众 cy=\公众40\"大众 fill=\"大众red\公众></circle>
</svg>
<div class=\公众in\"大众>
<a href=\"大众/kst_wap.php?sText=wap_public_ask\"大众>
<span>点击</span><span>咨询</span>
</a>
</div>
</div>
<script>
$(window).scroll(function(){
var stop = $(document).scrollTop();
if(stop >= 200){
$(\"大众#rbutton\"大众).css({\"大众right\公众:\"大众0px\公众});
}else{
$(\"大众#rbutton\"大众).css({\"大众right\公众:\"大众-40px\"大众});
}
})
</script>
上面代码实现的效果是直接以svg的形式绘制出了图1中的效果，您可以直接拿过去就用。
上面的代码中还有一段js脚本，这段脚本实现的效果便是当前鼠标滚轮坐标位置大于即是200像素时显示图片，否则只显示一半。
像个含羞的女孩蒙着半边脸一样的动态交互效果，把稳利用这段脚本前一定要先引用JQuery.
在这个网址里，可以看到演示效果
http://www.mediab.cn/m/
演示网站里用了framework7框架，由于我想让网站打开快一些，以是没用JQuery和下面的js脚本。
把稳您在利用时颜色red可以更换成其他颜色，/kst_wap.php?sText=wap_public_ask这个链接须要更换成您自己的咨询软件的链接。
如果您有建站需求，欢迎联系我吧。
