大家过年好，恭喜发财，小编助您在新的一年里效率提升百倍，一杯茶的功夫完成工作，剩下时间就可以歇着了！开个玩笑。

如果您接触过商务通，百度商桥，快商通等软件，一定会觉得默认的样式丑到爆。去找线上咨询软件官方定制自己喜欢的样式又要花费大把的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.yywzjs.com/m/

演示网站里用了framework7框架，因为我想让网站打开快一些，所以没用JQuery和下面的js脚本。

注意您在使用时颜色red可以替换成其他颜色，/kst_wap.php?sText=wap_public_ask这个链接需要替换成您自己的咨询软件的链接。

如果您有建站需求，欢迎联系我吧。