子比主题美化 – 侧边悬浮排行榜

从macgf看到的,感觉还可以,手动操作仿了一个,喜欢的话可以支持一下~

图片[1]-子比主题美化 – 侧边悬浮排行榜-初一小盏

首先是CSS部分:

/*左悬浮排行榜*/
.fix-left {
	position:fixed;
	top:150px;
	left:10px;
	z-index:10;
}
.fix-item {
	width:50px;
	height:68px;
	background-color:#fff;
	box-shadow:0 5px 10px 0 rgba(0,0,0,.1);
	margin-bottom:20px;
	border-radius:15px;
	transition:all .2s;
}
.item-title {
	text-align:center;
	overflow:hidden;
	cursor:pointer;
	position:relative;
	color:#333;
}
img[data-v-3b17862b] {
	width:30px;
	display:block;
	margin:8px auto 0;
}
span[data-v-3b17862b] {
	font-size:12px;
}
i[data-v-3b17862b] {
	display:none;
	position:absolute;
	width:30px;
	height:30px;
	line-height:30px;
	text-align:center;
	right:0;
	top:0;
	color:#fff;
}
.rank-box[data-v-3b17862b] {
	display:none;
	padding:0 10px;
	height:350px;
	overflow-y:auto;
	background-color:#fff;
	box-shadow:0 5px 10px 0 rgba(0,0,0,.1);
	border-bottom-right-radius:15px;
	border-bottom-left-radius:15px;
}
ul[data-v-3b17862b] {
	list-style:none;
}
li[data-v-3b17862b] {
	border-bottom:1px solid #f3e9e961;
	padding:8px 0;
}
.img[data-v-3b17862b] {
	float:left;
	width:100%;
	height:100%;
	overflow:hidden;
	margin-right:8px;
}
.img img[data-v-3b17862b] {
	width:100%;
	height:100%;
}
ul li .title[data-v-3b17862b] {
	overflow:hidden;
	height:32px;
	font-size:12px;
	line-height:16px;
	color:#333;
}
.fix-left .fix-item.active[data-v-3b17862b] {
	width:280px;
}
.fix-left .fix-item.active .item-title[data-v-3b17862b] {
	height:60px;
	line-height:60px;
	background-color:#333;
	color:#fff;
	border-top-left-radius:15px;
	border-top-right-radius:15px;
}
.fix-left .fix-item.active .item-title img[data-v-3b17862b] {
	display:inline-block;
	margin:0 15px 0 0;
}
.fix-left .fix-item.active .item-title span[data-v-3b17862b] {
	font-size:14px;
}
.fix-left .fix-item.active .item-title i[data-v-3b17862b],.fix-left .fix-item.active .rank-box[data-v-3b17862b] {
	display:block
}
.enlighter-default .enlighter {
	max-height:400px;
	overflow-y:auto !important;
}
.posts-item .item-heading>a {
	font-weight:bold;
	color:unset;
}
@media (max-width:640px) {
	.meta-right .meta-view {
	display:unset !important;
}
}
a.class-item.js-rank {
    display: block;
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.class-info {
    width: 190px;
    font-size: 12px;
}
.name {
    line-height: 20px;
    font-weight: 400;
    margin-bottom: 2px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    -webkit-box-orient: vertical;
    font-size: 15px;
}
img.class-pic {
    width: 90px;
    border-radius: 8px;
    margin-right: 5px;
}
a.class-item.js-rank {
    display: block;
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

然后是JS

// 获取元素
var element = document.getElementById("macgf_cb_bd");

// 添加点击事件监听器
element.addEventListener("click", function() {
    // 切换 class
    if (element.classList.contains("active")) {
        element.classList.remove("active");
    } else {
        element.classList.add("active");
    }
});
document.getElementById("macgf_cb_ht").addEventListener("click", function() {
    // 跳转到指定网址
    window.location.href = "https://www.vxras.com";
});
document.addEventListener("DOMContentLoaded", function() {
    var divElement = document.getElementById("macgf_cb_ht");
    // 获取当前页面的完整URL
    var currentPageUrl = window.location.href;
    // 指定的首页URL
    var homepageUrl = "https://www.vxras.com/";
    // 检查当前页面是否为首页
    if (currentPageUrl !== homepageUrl) {
        // 如果是首页,则显示 div 元素
        divElement.style.display = "block";
    } else {
        // 如果不是首页,则隐藏 div 元素
        divElement.style.display = "none";
    }
});

接下来则是PHP代码方面

子比主题美化 - 侧边悬浮排行榜-初一小盏
子比主题美化 – 侧边悬浮排行榜
此内容为付费阅读,请付费后查看
1500积分
技术支持
一对一服务
安装调试
功能定制
付费阅读
已售 6
© 版权声明
THE END
点赞1赞赏 分享
留言 抢沙发

请登录后发表评论

    暂无评论内容