代码片段 | 左侧悬浮-王明昌博客

如果你对该文章中的内容有疑问/不解,可以点击此处链接提问
要注明问题和此文章链接地址点击此处跳转
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style> 
	.leftside-weixin {
		position: relative
	}

	#weixin-code {
		left: 50px;
		top: 0;
		position: absolute;
		padding: 15px;
		box-shadow: 0 0 6px rgba(14, 22, 30, .3);
		background-color: #fff;
		width: 178px;
		z-index: 100
	}

	.hide {
		display: none
	}

	.leftside-title {
		width: 30px;
		height: 36px;
		padding: 5px;
		color: #fff;
		border-radius: 50%
	}

	.leftside-title i {
		width: 30px;
		height: 30px;
		background-image: url(https://s.yunzhuji.shop/uploads/coupon/share-icons.png);
		background-repeat: no-repeat;
		background-position: -7px -183px;
		display: inline-block
	}

	#leftside-share {
		width: 36px;
		height: 300px;
		position: fixed;
		left: 50%;
		margin-left: -600px;
		top: 50%;
		margin-top: -161px;
		z-index: 99;
		display: block;
	}

	.leftside-share {
		width: 36px;
		height: 208px
	}

	#leftside-share a {
		display: block;
		width: 36px;
		height: 36px;
		background-color: #727171;
		z-index: 1;
		position: absolute;
		left: 0;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		background-image: url(https://s.yunzhuji.shop/uploads/coupon/share-icons.png);
		background-repeat: no-repeat;
		margin: 0 0 7px 0;
		transition: .4s;
		-webkit-transition: .4s;
		-moz-transition: .4s;
		border-radius: 50%;
		vertical-align: middle
	}

	#leftside-share a:hover {
		z-index: 2
	}

	.leftside-weixin {
		top: 0;
		background-position: -48px -3px
	}

	#leftside-share a.leftside-weixin:hover {
		background-color: #55a947
	}

	.leftside-qzone {
		top: 43px;
		background-position: -48px -50px
	}

	#leftside-share a.leftside-qzone:hover {
		background-color: #ffa709
	}

	.leftside-sqq {
		top: 86px;
		background-position: -48px -92px
	}

	#leftside-share a.leftside-sqq:hover {
		background-color: #0AA4E7
	}

	.leftside-tsina {
		top: 129px;
		background-position: -48px -135px
	}

	#leftside-share a.leftside-tsina:hover {
		background-color: #d52b2a
	}

	#leftside-share .leftside-top {
		background-image: url(https://s.yunzhuji.shop/uploads/coupon/share-icons.png);
		background-position: -48px -223px;
		top: 254px;
		cursor: pointer
	}

	#leftside-share .leftside-top:hover {
		background-color: #2E88CE
	}

	#leftside-share a.leftside-kefu {
		top: 172px;
		background-image: url(https://s.yunzhuji.shop/uploads/coupon/kefu.png);
		background-position: 6px 8px;
		background-color: #ff8a00
	}

	#leftside-share a.leftside-kefu.active {
		background-color: red
	}

	#leftside-share a.leftside-shang {
		top: 172px;
		background-image: url(https://s.yunzhuji.shop/uploads/coupon/shang.png);
		background-position: 0;
		background-color: #ff8a00;
		background-size: 100% 100%;
	}

	#leftside-share a.leftside-shang.active {
		background-color: green;
	}

	.share {
		overflow: hidden;
		float: left;
		position: relative
	}

	.share a {
		display: inline-block;
		margin-right: 10px;
		text-indent: -9999px;
		margin-bottom: 10px;
		width: 24px;
		height: 24px;
		overflow: hidden;
		cursor: pointer;
		float: left;
		font-size: 12px
	}

	.trans {
		transition: all .3s ease-in .1s;
		-webkit-transition: all .3s ease-in .1s;
	}

	.popup_weixin_head p {
		display: inline-block;
		margin: 0;
		padding: 0 0 15px 0;
		font-size: 14px;
		color: #333
	}

	.popup_weixin_close {
		float: right
	}

	#kefu {
		left: 36px;
		top: 200px;
		position: absolute;
		width: 180px;
		padding-left: 10px;
		z-index: 100
	}

	#kefu ul {
		width: 170px;
		height: 190px;
		float: left;
		box-shadow: 0 0 6px 3px rgba(0,0,0,.2);
		background: #fff;
		padding: 7px 0;
		display: inline-block;
		margin: 0;
	}

	#kefu ul li {
		margin: 0;
		padding: 0;
		list-style: none;
		border: 0;
		clear: both;
	}

	#kefu a:last-child {
		margin-bottom: 0;
	}

	#kefu ul li a {
		width: 100%;
		height: 40px;
		line-height: 38px;
		display: block;
		margin-bottom: 0;
		font-size: 14px;
		color: #3e4e6a;
		text-align: left;
		padding-top: 0;
		background: #FFF;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		position: relative
	}

	#kefu ul li {
	}

	#kefu ul li a:hover {
		background: #f0f0f0;
	}

	.ucpopSpan {
		display: inline-block;
		width: 50px;
		float: left;
		padding-left: 8px;
		text-align: center;
	}

	#kefu ul li a img {
		vertical-align: middle;
	}

	#kefu ul li a.ucpopQq {
		display: inline;
		margin-left: 20px;
	}

	#kefu ul li a.ucpopQq:hover {
		background: none;
	}

	#kefu ul li:last-child {
		padding-top: 10px;
	}

	.hotLineBg {
		padding-left: 50px;
		color: #3e4e6a;
	}

	#shang {
		left: 50px;
		top: 50px;
		position: absolute;
		padding: 15px;
		box-shadow: 0 0 6px rgba(14, 22, 30, .3);
		background-color: #fff;
		width: 300px;
		z-index: 100;
	} 
	</style>
</head>
<body>
	<div id="leftside-share" class="trans">
	  <div class="leftside-title">
	   <i></i>
	  </div>
	  <div class="leftside-share share" id="share">
	   <a class="leftside-weixin" data-cmd="weixin" title="分享">微信</a>
	   <a class="leftside-qzone" data-cmd="qzone" href="#" title="分享到QQ空间">QQ空间</a>
	   <a class="leftside-sqq" data-cmd="qq" href="#" title="分享到QQ好友">QQ好友</a>
	   <a class="leftside-tsina" data-cmd="weibo" href="#" title="分享到新浪微博">新浪微博</a>
	   <a class="leftside-shang" data-cmd="shang" href="#" title="联系客服">联系客服</a>
	  </div>
	  <a class="leftside-top" href="#"></a>
	  <div id="weixin-code" class="hide">
	   <div class="popup_weixin_head">
	    <p>“扫一扫”分享到微信</p>
	    <div id="code">
	     <img src="https://yunzhuji.shop/qr?t=https://yunzhuji.shop/" width="150" height="150" />
	    </div>
	   </div>
	  </div>
	  <div id="shang" class="hide">
	   <div class="popup_weixin_head">
	    <p></p>
	    <div>
	     <img src="https://s.yunzhuji.shop/uploads/coupon/shang-qr-604-3.png" width="270" />
	    </div>
	   </div>
	  </div>
	 </div>

</body>
<script src="https://s.yunzhuji.shop/assets/js/simple-share.js?v=7"></script>
<script>
var share = new SimpleShare({
    pic: document.getElementById('mip_main') && document.getElementById('mip_main').getElementsByTagName('img')[0] ? document.getElementById('mip_main').getElementsByTagName('img')[0].src: 'https://s.yunzhuji.shop/assets/images/logo_640_396.png'
});
$('body').on('click', '#leftside-share #share a',
function(e) {
    e.preventDefault();
    var cmd = $(e.currentTarget).data('cmd');
    if (cmd !== 'weixin' || cmd !== 'shang') {
        share[cmd]();
    }
}).on('mouseover', '#leftside-share #share .leftside-weixin',
function(e) {
    e.preventDefault();
    share.weixin(function(img) {
        $('#code').find('img').prop('src', img);
        $('#weixin-code').removeClass('hide');
    })
}).on('mouseout', '#leftside-share #share .leftside-weixin',
function(e) {
    e.preventDefault();
    $('#weixin-code').addClass('hide');
}).on('mouseover', '#leftside-share #share .leftside-shang',
function(e) {
    e.preventDefault();
    $('#shang').removeClass('hide');
}).on('mouseout', '#leftside-share #share .leftside-shang',
function(e) {
    e.preventDefault();
    $('#shang').addClass('hide');
});
$('#leftside-share #share .leftside-kefu').hover(function() {
    $('#kefu').removeClass('hide');
    $('#leftside-share #share .leftside-kefu').addClass('active');
},
function() {
    $('#leftside-share #share .leftside-kefu').removeClass('active');
    $('#kefu').addClass('hide');
});
$('#leftside-share #kefu').hover(function() {
    $('#leftside-share #share .leftside-kefu').addClass('active');
    $('#kefu').removeClass('hide');
},
function() {
    $('#leftside-share #share .leftside-kefu').removeClass('active');
    $('#kefu').addClass('hide');
});

</script> 
</html>
代码片段 | 左侧悬浮

相关推荐

超低价中转站

热门文章

热门标签

关注公众号

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

支付宝扫一扫打赏

微信扫一扫打赏

2025 年 10 月
一	二	三	四	五	六	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31