网站开发兼职_医院网站建设_织梦医院网站开发

当前位置: > 建站教程 > 使用技巧 >

动态对话框效果替换商务通手机端右侧默认浮动图标

发布时间:2018-02-19 作者:织梦兼职 浏览: 关键词: 商务通对话框

会害羞的动态对话框效果替换商务通默认

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

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

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

责任编辑:织梦兼职
共有人阅读,期待你的评论!评论
使用技巧
二次开发
使用技巧
调试安装
运营推广