仿凡科网站右侧悬浮窗代码

可以自己自定义图标,在css更改图片链接即可(背景图标和鼠标hover浮动图标)。

如果要自己添加在css里写好就可以了。图标可以使用https://www.iconfont.cn

演示图片:

仿凡科网站右侧悬浮窗代码

代码:

<div class="wapnone fk_service">
<ul>
<li>
<div class="fk_service_consult_cont1" style="display: none;"> <span class="fk_service_triangle"></span> 在线咨询 </div>
</li>
<li class="fk_service_box fk_service_consult">
<div class="fk_service_consult_cont"> <span class="fk_service_triangle"></span>
<div class="fk_service_consult_cont_top"> <span class="fk_service_hint"> <span class="fk_service_icon"></span>
<span> 如遇问题,请联系站长 </span> </span> <span class="fk_service_button" onclick="window.open('https://wpa.qq.com/msgrd?v=3&uin=20838641&site=qq&menu=yes')">QQ联系</span>
<span class="fk_service_button" onclick="window.open('https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=cpol@qq.com')">在线邮件</span>
</div> <span class="fk_service_phone"> QQ 请注明来意 :20838641 </span> <span class="fk_service_check_site"> <span class="fk_service_icon"></span>
<span onclick="window.open('http://tool.zmki.cn')">更多:极客导航</span> </span>
</div>
</li>
<li class="fk_service_box fk_service_qr">
<div class="fk_service_qr_cont"> <span class="fk_service_triangle"></span>
<div class="fk_service_qrimg"> <span class="fk_service_qrimg_site"></span> 微信公众号 </div>
<div class="fk_service_qrtext"><span>奇思妙想 · 科技小新</span></div>
</div>
</li>
<!-- 不需要图标的注释或删除即可 -->
<li class="fk_service_box fk_service_ax" onclick="window.open('https://tool.zmki.cn/index.php/t.html')">
<div class="fk_service_ax_cont"> <span class="fk_service_triangle"></span> 提交收录,站长收到留言后即刻处理! </div>
</li>
<li class="fk_service_box fk_service_dh" onclick="window.open('https://tool.zmki.cn/index.php/t.html')">
<div class="fk_service_dh_cont"> <span class="fk_service_triangle"></span> 提交收录,站长收到留言后即刻处理! </div>
</li>
<li class="fk_service_box fk_service_jk" onclick="window.open('https://tool.zmki.cn/index.php/t.html')">
<div class="fk_service_jk_cont"> <span class="fk_service_triangle"></span> 提交收录,站长收到留言后即刻处理! </div>
</li>
<li class="fk_service_box fk_service_ws" onclick="window.open('https://tool.zmki.cn/index.php/t.html')">
<div class="fk_service_ws_cont"> <span class="fk_service_triangle"></span> 提交收录,站长收到留言后即刻处理! </div>
</li>
<li class="fk_service_box fk_service_sd" onclick="window.open('https://tool.zmki.cn/index.php/t.html')">
<div class="fk_service_sd_cont"> <span class="fk_service_triangle"></span> 提交收录,站长收到留言后即刻处理! </div>
</li>
<li class="fk_service_box fk_service_dz" onclick="window.open('https://tool.zmki.cn/index.php/t.html')">
<div class="fk_service_dz_cont"> <span class="fk_service_triangle"></span> 提交收录,站长收到留言后即刻处理! </div>
</li>
<li class="fk_service_box fk_service_feedback" onclick="window.open('https://tool.zmki.cn/index.php/t.html')">
<div class="fk_service_feedback_cont"> <span class="fk_service_triangle"></span> 提交收录,站长收到留言后即刻处理! </div>
</li>
<li class="fk_service_box fk_service_upward" onclick="FkService.fk_upWard();" style="display: block;">
<div class="fk_service_upward_cont"> <span class="fk_service_triangle"></span> <span> 返回顶部 </span> </div>
</li>
</ul>
</div>

对应的css

.fk_service ul{position:absolute;right:0;margin:0;padding:0}
.fk_service li{list-style-type:none}
.fk_service li>div,.fk_service_box{box-sizing:border-box;box-shadow:0 0 9px 0 rgba(0,0,0,.1)}
.fk_service_box{margin-bottom:10px;width:40px;height:40px;border-radius:4px;background:#fff}
.fk_service_triangle{position:absolute;top:12px;right:-11px;z-index:1010;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid #e1e6ec}
.fk_service_triangle:after{position:absolute;top:-6px;right:1px;z-index:1000;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid #fff;content:"\20"}
.fk_service_triangle:before{position:absolute;top:-20px;right:-52px;width:80px;height:45px;background:0 0;content:"\20"}
@keyframes fade-in{0%{right:82px;opacity:.4}
to{right:62px;opacity:1}
}
.fk_service_consult{background:url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -366px -16px #fff}
.fk_service_consult:hover{border:0;background:url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -410px -16px #4f7cfc}
.fk_service_consult:hover .fk_service_consult_cont{display:block;opacity:1;transition:.2s linear;animation-name:fade-in;animation-duration:.3s;animation-iteration-count:1;animation-delay:0s}
.fk_service_consult_cont{width:200px;max-height:268px;min-height:210px;border:1px solid #e1e6ec;border-radius:3px;opacity:0}
.fk_service_consult_cont,.fk_service_consult_cont1{position:absolute;right:62px;display:none;background:#fff;text-align:center}
.fk_service_consult_cont1{width:70px;height:40px;border:1px solid #e1e6ec;border-radius:5px;line-height:40px}
.fk_service_consult_cont1 .fk_service_triangle:before{width:0!important}
.fk_service_consult_cont>.fk_service_triangle:after{border-left:10px solid #f6f8fb!important}
.fk_service_consult_cont span{float:left}
.fk_service_consult_cont_top{width:100%;height:157px;border-bottom:1px solid #eef2f8;border-radius:3px;background:#f6f8fb}
.fk_service_hint{width:100%;height:40px;color:#9aa8c2;text-align:center;font-size:12px;line-height:40px}
.fk_service_hint>.fk_service_icon{margin:13px 2px 0 18px;width:15px;height:15px;background:url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -460px -25px}
.fk_service_button{margin:5px 0 10px 20px;width:160px;height:38px;border-radius:18px;background:#4f7cfc;color:#fff;text-align:center;line-height:38px;cursor:pointer}
.fk_service_button:hover{background:#618aff}
.fk_service_phone{width:100%;height:53px;text-align:center;font-size:14px;line-height:53px}
.fk_service_check_site{width:100%;height:48px;border-top:1px solid #eaeef5;color:#3b6bf4;line-height:48px;cursor:pointer}
.fk_service_check_site>.fk_service_icon{margin:15px 2px 0 45px;width:20px;height:20px;background:url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -461px -75px}
.fk_service_feedback{background:url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -363px -64px #fff}
.fk_service_feedback:hover{border:0;background:url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -407px -64px #4f7cfc;cursor:pointer}
.fk_service_feedback:hover .fk_service_feedback_cont{display:block;opacity:1;transition:.2s linear;animation-name:fade-in;animation-duration:.3s;animation-iteration-count:1;animation-delay:0s}
.fk_service_feedback_cont{position:absolute;right:62px;display:none;width:264px;height:40px;border:1px solid #e1e6ec;border-radius:5px;background:#fff;text-align:center;line-height:40px}
.fk_service_qr{background:url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -365px -113px #fff}
.fk_service_qr:hover{border:0;background:url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -409px -113px #4f7cfc}
.fk_service_qr:hover .fk_service_qr_cont{display:block;opacity:1;transition:.2s linear;animation-name:fade-in;animation-duration:.3s;animation-iteration-count:1;animation-delay:0s}
.fk_service_qr_cont{position:absolute;right:62px;display:none;width:143px;height:202px;border:1px solid #e1e6ec;border-radius:3px;background:#fff;background-color:#f6f8fb;text-align:center;opacity:0}
.fk_service_qr_cont>.fk_service_triangle:after{border-left:10px solid #f6f8fb!important}
.fk_service_qr_cont>.fk_service_qrimg{float:left;width:100%;height:164px}
.fk_service_qrimg_site{background:url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -41px -26px}
.fk_service_qrimg_hd,.fk_service_qrimg_site{float:left;margin:12px 12px 5px;width:119px;height:119px}
.fk_service_qrimg_hd{background:url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -198px -26px}
.fk_service_qrimg_wxast{background:url(../image/fk_service.png?v=201905151200) no-repeat -198px -328px}
.fk_service_qrimg_flyer,.fk_service_qrimg_wxast{float:left;margin:12px 12px 5px;width:119px;height:119px}
.fk_service_qrimg_flyer{background:url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -41px -177px}
.fk_service_qrimg_wxapp{background:url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -198px -177px}
.fk_service_qrimg_fkmall,.fk_service_qrimg_wxapp{float:left;margin:12px 12px 5px;width:119px;height:119px}
.fk_service_qrimg_fkmall{background:url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -41px -326px}
.fk_service_qr_cont>.fk_service_qrtext{bottom:0;float:left;display:table;width:100%;height:35px;background-color:#fff;color:#7b89a6;font-size:12px}
.fk_service_qr_cont>.fk_service_qrtext>span{display:table-cell;vertical-align:middle}
.fk_service_upward{display:none;background:url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -363px -159px #fff}
.fk_service_upward:hover{border:0;background:url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -407px -159px #4f7cfc;cursor:pointer}
.fk_service_upward:hover .fk_service_upward_cont{display:block;opacity:1;transition:.2s linear;animation-name:fade-in;animation-duration:.3s;animation-iteration-count:1;animation-delay:0s}
.fk_service_upward_cont{position:absolute;right:62px;display:none;width:84px;height:40px;border:1px solid #e1e6ec;border-radius:3px;background:#fff;text-align:center;line-height:40px;opacity:0}
.fk_service_upward_cont span{font-size:14px}
.fk_service_jk{background:url(https://a-oss.zmki.cn/2019/20191218-c9feba3074fcf.png) no-repeat 50% #fff;background-size:40%40%}
.fk_service_jk:hover{border:0;background:url(https://a-oss.zmki.cn/2019/20191218-9e8acd5341cdc.png) no-repeat 50% #4f7cfc;background-size:40%40%;cursor:pointer}
.fk_service_jk:hover .fk_service_jk_cont{display:block;opacity:1;transition:.2s linear;animation-name:fade-in;animation-duration:.3s;animation-iteration-count:1;animation-delay:0s}
.fk_service_jk_cont{position:absolute;right:62px;display:none;width:264px;height:40px;border:1px solid #e1e6ec;border-radius:5px;background:#fff;text-align:center;line-height:40px}
.fk_service_ws{background:url(https://a-oss.zmki.cn/2019/20191218-61b4baac98ee7.png) no-repeat 50% #fff;background-size:50%50%}
.fk_service_ws:hover{border:0;background:url(https://a-oss.zmki.cn/2019/20191218-8ded04c01bb3c.png) no-repeat 50% #4f7cfc;background-size:50%50%;cursor:pointer}
.fk_service_ws:hover .fk_service_ws_cont{display:block;opacity:1;transition:.2s linear;animation-name:fade-in;animation-duration:.3s;animation-iteration-count:1;animation-delay:0s}
.fk_service_ws_cont{position:absolute;right:62px;display:none;width:264px;height:40px;border:1px solid #e1e6ec;border-radius:5px;background:#fff;text-align:center;line-height:40px}
.fk_service_sd{background:url(https://a-oss.zmki.cn/2019/20191218-94664bd399372.png) no-repeat 50% #fff;background-size:50%50%}
.fk_service_sd:hover{border:0;background:url(https://a-oss.zmki.cn/2019/20191218-fab840acee28b.png) no-repeat 50% #4f7cfc;background-size:50%50%;cursor:pointer}
.fk_service_sd:hover .fk_service_sd_cont{display:block;opacity:1;transition:.2s linear;animation-name:fade-in;animation-duration:.3s;animation-iteration-count:1;animation-delay:0s}
.fk_service_sd_cont{position:absolute;right:62px;display:none;width:264px;height:40px;border:1px solid #e1e6ec;border-radius:5px;background:#fff;text-align:center;line-height:40px}
.fk_service_dh{background:url(https://a-oss.zmki.cn/2019/20191218-711bcdc875f32.png) no-repeat 50% #fff;background-size:60%60%}
.fk_service_dh:hover{border:0;background:url(https://a-oss.zmki.cn/2019/20191218-8d9cf4c72a239.png) no-repeat 50% #4f7cfc;background-size:60%60%;cursor:pointer}
.fk_service_dh:hover .fk_service_dh_cont{display:block;opacity:1;transition:.2s linear;animation-name:fade-in;animation-duration:.3s;animation-iteration-count:1;animation-delay:0s}
.fk_service_dh_cont{position:absolute;right:62px;display:none;width:264px;height:40px;border:1px solid #e1e6ec;border-radius:5px;background:#fff;text-align:center;line-height:40px}
.fk_service_ax{background:url(https://a-oss.zmki.cn/2019/20191218-bf1792e790a39.png) no-repeat 50% #fff;background-size:40%40%}
.fk_service_ax:hover{border:0;background:url(https://a-oss.zmki.cn/2019/20191218-f379809ce7aef.png) no-repeat 50% #4f7cfc;background-size:40%40%;cursor:pointer}
.fk_service_ax:hover .fk_service_ax_cont{display:block;opacity:1;transition:.2s linear;animation-name:fade-in;animation-duration:.3s;animation-iteration-count:1;animation-delay:0s}
.fk_service_ax_cont{position:absolute;right:62px;display:none;width:264px;height:40px;border:1px solid #e1e6ec;border-radius:5px;background:#fff;text-align:center;line-height:40px}
.fk_service_dz{background:url(https://a-oss.zmki.cn/2019/20191218-3d077e8df0bf0.png) no-repeat 50% #fff;background-size:50%50%}
.fk_service_dz:hover{border:0;background:url(https://a-oss.zmki.cn/2019/20191218-986a9393f3e9e.png) no-repeat 50% #4f7cfc;background-size:50%50%;cursor:pointer}
.fk_service_dz:hover .fk_service_dz_cont{display:block;opacity:1;transition:.2s linear;animation-name:fade-in;animation-duration:.3s;animation-iteration-count:1;animation-delay:0s}
.fk_service_dz_cont{position:absolute;right:62px;display:none;width:264px;height:40px;border:1px solid #e1e6ec;border-radius:5px;background:#fff;text-align:center;line-height:40px}
@media screen and (max-width:1221px){.wapnone{display:none}
}
赞(0) 打赏
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《仿凡科网站右侧悬浮窗代码》
文章链接:https://www.qqooo.cn/446.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。
本站资源均来源于网络,若侵犯您的权益,请来信 xsds@vip.qq.com 删除!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏