凡科右侧悬浮菜单定位瞄点

释放双眼,带上耳机,听听看~!

目录

    正好用到,还挺好看。就扒来了。

    效果在: https://tool.zmki.cn/

    简单修改了一下,演示如下:

    %title插图%num

    二维码图片链接在css里,自行替换即可。

    代码:
    <!-- <link rel="stylesheet" href="https://fe.faisys.com/fkService_1_0/css/fk_service.min.css?v=201908151449">
     -->
    
    <style>
    	.fk_service {
    		max-height: 232px;
    		position: fixed;
    		right: 10px;
    		top: 60%;/* 垂直位置 */
    		font-family: "寰蒋闆呴粦";
    		font-size: 14px;
    		color: #243558;
    		z-index: 10000
    	}
    
    	.fk_service ul {
    		margin: 0;
    		padding: 0;
    		position: absolute;
    		right: 0
    	}
    
    	.fk_service li {
    		list-style-type: none
    	}
    
    	.fk_service li>div {
    		box-sizing: border-box;
    		box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1)
    	}
    
    	.fk_service_box {
    		width: 40px;
    		height: 40px;
    		background: #fff;
    		margin-bottom: 10px;
    		border-radius: 4px;
    		box-sizing: border-box;
    		box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1)
    	}
    
    	.fk_service_triangle {
    		top: 12px;
    		right: -11px;
    		position: absolute;
    		border-top: 7px solid transparent;
    		border-bottom: 7px solid transparent;
    		border-left: 11px solid #e1e6ec;
    		z-index: 1010
    	}
    
    	.fk_service_triangle:after {
    		content: "\20";
    		top: -6px;
    		right: 1px;
    		position: absolute;
    		border-top: 6px solid transparent;
    		border-bottom: 6px solid transparent;
    		border-left: 10px solid #fff;
    		z-index: 1000
    	}
    
    	.fk_service_triangle:before {
    		content: "\20";
    		width: 80px;
    		height: 45px;
    		top: -20px;
    		right: -52px;
    		position: absolute;
    		background: rgba(0, 0, 0, 0)
    	}
    
    	@keyframes fade-in {
    		0% {
    			opacity: .4;
    			right: 82px
    		}
    
    		100% {
    			opacity: 1;
    			right: 62px
    		}
    	}
    
    	.fk_service_consult {
    		background: url(https://www.zmki.cn/wp-content/uploads/2019/20190827-5d652476ab305.png) no-repeat -366px -16px #fff
    	}
    
    	.fk_service_consult:hover {
    		border: 0;
    		background: url(https://www.zmki.cn/wp-content/uploads/2019/20190827-5d652476ab305.png) no-repeat -410px -16px #4f7cfc
    	}
    
    	.fk_service_consult:hover .fk_service_consult_cont {
    		display: block;
    		opacity: 1;
    		transition: linear .2s;
    		animation-name: fade-in;
    		animation-duration: .3s;
    		animation-iteration-count: 1;
    		animation-delay: 0s
    	}
    
    	.fk_service_consult_cont {
    		width: 200px;
    		min-height: 210px;
    		max-height: 268px;
    		border-radius: 3px;
    		background: #fff;
    		right: 62px;
    		position: absolute;
    		text-align: center;
    		border: 1px solid #e1e6ec;
    		display: none;
    		opacity: 0
    	}
    
    	.fk_service_consult_cont1 {
    		width: 70px;
    		height: 40px;
    		line-height: 40px;
    		background: #fff;
    		border-radius: 5px;
    		right: 62px;
    		text-align: center;
    		position: absolute;
    		display: none;
    		border: 1px solid #e1e6ec
    	}
    
    	.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;
    		background: #f6f8fb;
    		border-radius: 3px;
    		border-bottom: 1px solid #eef2f8
    	}
    
    	.fk_service_hint {
    		width: 100%;
    		height: 40px;
    		line-height: 40px;
    		font-size: 12px;
    		color: #9aa8c2;
    		text-align: center
    	}
    
    	.fk_service_hint>.fk_service_icon {
    		background: url(https://www.zmki.cn/wp-content/uploads/2019/20190827-5d652476ab305.png) no-repeat -460px -25px;
    		width: 15px;
    		height: 15px;
    		margin: 13px 2px 0 18px
    	}
    
    	.fk_service_button {
    		width: 160px;
    		height: 38px;
    		line-height: 38px;
    		background: #4f7cfc;
    		border-radius: 18px;
    		text-align: center;
    		color: #fff;
    		margin: 5px 0 10px 20px;
    		cursor: pointer
    	}
    
    	.fk_service_button:hover {
    		background: #618aff
    	}
    
    	.fk_service_phone {
    		width: 100%;
    		height: 53px;
    		line-height: 53px;
    		font-size: 14px;
    		text-align: center
    	}
    
    	.fk_service_check_site {
    		width: 100%;
    		height: 48px;
    		line-height: 48px;
    		color: #3b6bf4;
    		border-top: 1px solid #eaeef5;
    		cursor: pointer
    	}
    
    	.fk_service_check_site>.fk_service_icon {
    		background: url(https://www.zmki.cn/wp-content/uploads/2019/20190827-5d652476ab305.png) no-repeat -461px -75px;
    		width: 20px;
    		height: 20px;
    		margin: 15px 2px 0 45px
    	}
    
    	.fk_service_feedback {
    		background: url(https://www.zmki.cn/wp-content/uploads/2019/20190827-5d652476ab305.png) no-repeat -363px -64px #fff
    	}
    
    	.fk_service_feedback:hover {
    		border: 0;
    		background: url(https://www.zmki.cn/wp-content/uploads/2019/20190827-5d652476ab305.png) no-repeat -407px -64px #4f7cfc;
    		cursor: pointer
    	}
    
    	.fk_service_feedback:hover .fk_service_feedback_cont {
    		display: block;
    		opacity: 1;
    		transition: linear .2s;
    		animation-name: fade-in;
    		animation-duration: .3s;
    		animation-iteration-count: 1;
    		animation-delay: 0s
    	}
    
    	.fk_service_feedback_cont {
    		width: 264px;
    		height: 40px;
    		line-height: 40px;
    		background: #fff;
    		border-radius: 5px;
    		right: 62px;
    		text-align: center;
    		position: absolute;
    		display: none;
    		border: 1px solid #e1e6ec
    	}
    
    	.fk_service_qr {
    		background: url(https://www.zmki.cn/wp-content/uploads/2019/20190827-5d652476ab305.png) no-repeat -365px -113px #fff
    	}
    
    	.fk_service_qr:hover {
    		border: 0;
    		background: url(https://www.zmki.cn/wp-content/uploads/2019/20190827-5d652476ab305.png) no-repeat -409px -113px #4f7cfc
    	}
    
    	.fk_service_qr:hover .fk_service_qr_cont {
    		display: block;
    		opacity: 1;
    		transition: linear .2s;
    		animation-name: fade-in;
    		animation-duration: .3s;
    		animation-iteration-count: 1;
    		animation-delay: 0s
    	}
    
    	.fk_service_qr_cont {
    		width: 143px;
    		height: 202px;
    		border-radius: 3px;
    		background: #fff;
    		right: 62px;
    		position: absolute;
    		text-align: center;
    		border: 1px solid #e1e6ec;
    		background-color: #f6f8fb;
    		display: none;
    		opacity: 0
    	}
    
    	.fk_service_qr_cont>.fk_service_triangle:after {
    		border-left: 10px solid #f6f8fb !important
    	}
    
    	.fk_service_qr_cont>.fk_service_qrimg {
    		width: 100%;
    		height: 164px;
    		float: left
    	}
    
    	.fk_service_qrimg_site {
    		width: 119px;
    		height: 119px;
    		float: left;
    		margin: 12px 12px 5px 12px;
    		background: url(https://www.zmki.cn/wp-content/uploads/2019/20190827-5d652476ab305.png) no-repeat -41px -26px
    	}
    
    	.fk_service_qrimg_hd {
    		width: 119px;
    		height: 119px;
    		float: left;
    		margin: 12px 12px 5px 12px;
    		background: url(https://www.zmki.cn/wp-content/uploads/2019/20190827-5d652476ab305.png) no-repeat -198px -26px
    	}
    
    	.fk_service_qrimg_wxast {
    		width: 119px;
    		height: 119px;
    		float: left;
    		margin: 12px 12px 5px 12px;
    		background: url(../image/fk_service.png?v=201905151200) no-repeat -198px -328px
    	}
    
    	.fk_service_qrimg_flyer {
    		width: 119px;
    		height: 119px;
    		float: left;
    		margin: 12px 12px 5px 12px;
    		background: url(https://www.zmki.cn/wp-content/uploads/2019/20190827-5d652476ab305.png) no-repeat -41px -177px
    	}
    
    	.fk_service_qrimg_wxapp {
    		width: 119px;
    		height: 119px;
    		float: left;
    		margin: 12px 12px 5px 12px;
    		background: url(https://www.zmki.cn/wp-content/uploads/2019/20190827-5d652476ab305.png) no-repeat -198px -177px
    	}
    
    	.fk_service_qrimg_fkmall {
    		width: 119px;
    		height: 119px;
    		float: left;
    		margin: 12px 12px 5px 12px;
    		background: url(https://www.zmki.cn/wp-content/uploads/2019/20190827-5d652476ab305.png) no-repeat -41px -326px
    	}
    
    	.fk_service_qr_cont>.fk_service_qrtext {
    		width: 100%;
    		height: 35px;
    		font-size: 12px;
    		color: #7b89a6;
    		background-color: #fff;
    		float: left;
    		bottom: 0;
    		display: table
    	}
    
    	.fk_service_qr_cont>.fk_service_qrtext>span {
    		display: table-cell;
    		vertical-align: middle
    	}
    
    	.fk_service_upward {
    		display: none;
    		background: url(https://www.zmki.cn/wp-content/uploads/2019/20190827-5d652476ab305.png) no-repeat -363px -159px #fff
    	}
    
    	.fk_service_upward:hover {
    		border: 0;
    		background: url(https://www.zmki.cn/wp-content/uploads/2019/20190827-5d652476ab305.png) no-repeat -407px -159px #4f7cfc;
    		cursor: pointer
    	}
    
    	.fk_service_upward:hover .fk_service_upward_cont {
    		display: block;
    		opacity: 1;
    		transition: linear .2s;
    		animation-name: fade-in;
    		animation-duration: .3s;
    		animation-iteration-count: 1;
    		animation-delay: 0s
    	}
    
    	.fk_service_upward_cont {
    		width: 84px;
    		height: 40px;
    		line-height: 40px;
    		border-radius: 3px;
    		background: #fff;
    		right: 62px;
    		position: absolute;
    		text-align: center;
    		border: 1px solid #e1e6ec;
    		display: none;
    		opacity: 0
    	}
    
    	.fk_service_upward_cont span {
    		font-size: 14px
    	}
    </style>
    
    <div class="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://ck.faisco.cn/check/')">更多:钻芒博客</span> </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_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_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>
    
    

     

    给TA打赏
    共{{data.count}}人
    人已打赏
    其他分享网站源码

    响应式网址导航网站源码 - Webstack

    2019-8-27 15:53:58

    其他分享

    支付宝WPAPY个人可申请当面付,创建应用获取当面付接口信息(私钥、公钥)

    2019-8-30 18:15:45

    2 条回复 A文章作者 M管理员
    1. 安装了返回顶部点击了没有效果啊 请问怎么解决 谢谢

      • 返回顶部触发不了,需要你根据网站情况自行适配

    个人中心
    购物车
    优惠劵
    今日签到
    有新私信 私信列表
    搜索