哔哔广播模块滚动

2024年7月24日 16:09:44Tosscat

Tosscat

管理员

411
文章

0
粉丝

使用grid布局，彻底改善了原先的兼容性，再也不用害怕内容重叠了
这次彻底抛弃了layui，不再另外引入js文件，纯css+js完成
如想要上下滚动，请自行套layui轮播组件或swiper框架
1、无力适配小屏和移动端，可在模块里选择只在桌面显示，你也可以自己适配一下，研究一下media即可。
2、得益于grid布局，小屏幕一般把后面的.guangbo-number部分隐藏后，就能完美适配到移动端显示，有需要自己研究吧
🎈切换调用其他页面内容的方法：
默认广播post_type => circle 也就是圈子，如果你想广播快讯的，就把 circle改为newsflashes，其他页面基本同理。
🐹按钮的href地址，记得改成你自己设置的页面地址，或自定义地址
代码中其他文字可自行修改，代码随便改，只要能看明白就行
代码在下方文件，自己分离代码，也可以直接都丢到模块里。
使用他人的代码前，先做好备份，以免遇到无法挽回的问题。
之前的版本，可在本圈子内翻阅下载，我网站没有存。
按我的记性，应该没啥问题了，强迫症到此结束，广播模块完结。

适用于B2主题，其他主题自行测试修改

代码

<style>
:root {
    /* transition效果 */
    --hover: all .4s ease-out;
    /* 边框渐变 */
    --boxshow: 0 7px 20px 1px #b8b0db30;
    /* 统一border白边 */
    --border: 8px solid #fff;
    /* 阴影 */
    --bbshadow: 0px 0px 10px -4px rgba(0, 0, 0, 0.1);
    /* border hover时的边框 */
    --border-fff: 1px solid #F7F9FA;
    --border-000: 1px solid rgba(0, 102, 255, 0.18);
}

/************************************************ 广播模块修改开始 *****************************************************/
.guangbo {
    width: 100%;
    height: 45px;
    overflow: hidden;
    display: grid;
    justify-items: center;
    background-color: rgba(220, 225, 249, 0.9);
    border-radius: 5px;
    transition: var(--hover);
    border: var(--border-fff);
    box-shadow: var(--bbshadow);
}

.guangbo:hover {
    border: var(--border-000);
    transition: var(--hover);
}

.guangbo.hidden {
    display: none;
}

.guangbo-hw {
    flex: 1;
    display: grid;
    align-items: center;
    grid-template-columns: auto 5fr 30px auto;
    gap: 15px;
    height: 100%;
    width: 98%;
}

.guangbo-hw>div {
    height: 70%;
}

.guangbo-title {
    display: grid;
    grid-template-columns: 23px auto 1fr;
    gap: 4px;
    width: 100%;
    align-items: center;
    background-image: linear-gradient(146deg, #d1d1cf 0%, #3ee4ff 74%);
    border-radius: 5px;
    padding: 0 3px;
}

.guagnbo-o {
    display: inline-block;
    vertical-align: text-bottom;
    background-color: #fff;
    border-radius: 50%;
    opacity: 0;
    animation: 0.75s linear 0s infinite normal none running kuaibao-yuandian;
    margin-top: 2px;
    margin-right: 1px;
    margin-left: 1px;
    width: .5rem;
    height: .5rem;
    transition: all .4s ease-out;
}

@keyframes kuaibao-yuandian {
    0% {
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: none;
    }
}

.guangbo-font {
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}

.guangbo-content {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;

}

.guangbo-content-user {
    display: grid;
    align-items: center;
    grid-template-columns: auto 5px 70px;
    max-width: 220px;
    justify-items: center;
}

.guangbo-user {
    max-width: 145px;
    padding: 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    color: #4E5358;
    transition: var(--hover);
}

.guangbo-fabiao {
    background-color: rgb(200 207 237);
    color: #fff;
    font-weight: 600;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
    padding: 0px 5px 1px 5px;
    border-radius: 2px;
    margin-left: 6px;
}

.guangbo-content-title {
    text-align: center;
    width: 100%;
    transition: all .3s ease-out;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 12px;
    font-weight: 600;
    color: #4E5358;
    transition: var(--hover);
}

.guangbo-content-title a:hover {
    color: rgba(255, 255, 255, 0.8);
    transition: all .3s ease-out;
}

.guangbo-button {
    text-align: center;
    line-height: 30px;
    border-radius: 3px;
    background-image: linear-gradient(140deg, #e1e1be 0%, #43aadb 74%);
    transition: all .3s ease-out;
    transition: var(--hover);
}

.guangbo-button:hover {
    border-radius: 50px;
    transition: var(--hover);
}

.guangbo-number {
    max-width: 470px;
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3px;
    justify-items: center;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.guangbo-number>span span {
    font-weight: 600;
    padding: 0 3px;
    border-radius: 3px;
    color: #536de6;
    background-color: rgba(83, 109, 230, .18);
    margin: 0 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: var(--hover);
}

/************************************************ 广播模块修改结束 *****************************************************/

</style>

<div id="guangbo-container" class="guangbo hidden">
    <div class="guangbo-hw">
        <div class="guangbo-title">
            <span class="guangbo-ico">📢</span>
            <span class="guangbo-font">冒泡广播</span>
            <span class="guagnbo-o"></span>
        </div>
        <?php
        $args = array(
            'post_type' => 'circle',
            'posts_per_page' => 2,
        );
        $posts_query = new WP_Query($args);
        if ($posts_query->have_posts()) {
            while ($posts_query->have_posts()) {
                $posts_query->the_post();
                ?>
                <div class="guangbo-content">
                    <span class="guangbo-content-user">
                        <span class="guangbo-user"><?php the_author(); ?></span>
                        <span>|</span>
                        <span class="guangbo-fabiao">发表了:</span>
                    </span>
                    <span class="guangbo-content-title">
                        <a title="阅读全文" target="_blank" href="<?php the_permalink(); ?>">
                            <?php the_title(); ?>
                        </a>
                    </span>
                </div>
                <?php
            }
            wp_reset_postdata(); // 重置文章数据以避免冲突
        } else {
            echo '<span class="guangbo-content-title">还没有人发帖，快去发个帖子吧！</span>';
        }
        ?>
        <a href="/maopao" title="去发帖" target="_blank" class="guangbo-button">🐹</a>
        <div class="guangbo-number">
            <span>今日灌水量 
			<?php
				$today = getdate(); // 获取当前日期
				$args = array(
				    'post_type' => 'circle',
				    'post_status' => 'publish',
				    'cat' => 'your_category_id', // 替换为您的分类 ID
				    'date_query' => array(
				        array(
				            'year' => $today['year'],
				            'month' => $today['mon'],
				            'day' => $today['mday'],
				        ),
				    ),
				);
				
				$query = new WP_Query($args);
				$count = $query->found_posts;
				
				?>
				<span><?php echo $count; ?></span> 斤
			</span>
            <span>灌水总量
			<?php
			$args = array(
			    'post_type' => 'circle',
			    'post_status' => 'publish',
			    'posts_per_page' => -1,
			    'fields' => 'ids'
			);
			
			$query = new WP_Query($args);
			$count = $query->found_posts;
			
			?>
				<span><?php echo $count; ?></span> 斤
			</span>
            <span>本站用户
			<?php
			    // 获取用户统计信息
			    $user_count = count_users();
			    
			    // 获取用户总数
			    $total_users = $user_count['total_users'];
			?>
				<span><?php echo esc_html($total_users); ?></span>位
			</span>
        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var contents = document.querySelectorAll('.guangbo-content');
    var currentIndex = 0;
    var intervalId;

    function showContent(index) {
        contents.forEach(function(content, i) {
            content.style.display = (i === index) ? 'grid' : 'none';
        });
    }

    function nextContent() {
        currentIndex = (currentIndex + 1) % contents.length;
        showContent(currentIndex);
    }

    function startScrolling() {
        intervalId = setInterval(nextContent, 5000);
    }

    function stopScrolling() {
        clearInterval(intervalId);
    }

    if (contents.length > 0) {
        showContent(currentIndex);
        startScrolling();
    }

    var guangboContainer = document.getElementById('guangbo-container');
    guangboContainer.classList.remove('hidden');

    guangboContainer.addEventListener('mouseenter', stopScrolling);
    guangboContainer.addEventListener('mouseleave', startScrolling);
});
</script>

本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！

哔哔广播模块滚动

代码

愚人节整蛊代码：你屏幕上有根毛

HTML卡哇伊龙猫404页面Not Find源码

Zibll-v7.9.2最新破解版WordPress（含教程和美化插件）

安全检测GO内外链跳转页面html源码

网站侧边栏添加图片古诗一言代码

Zibll-v7.9.2最新破解版WordPress（含教程和美化插件）

2023最新Zibll子比主题V7.1版本WordPress开心版

追格小站点评WordPress网址导航主题

WordPress 非常漂亮滴动态时间小工具

WordPress小工具炫酷倒计时

WordPress随机文章跳转代码

为网站添加在线随机视频

WordPress导航模板全局自适应手机端网站导航简约风主题

更改域名+图片路径批量更换WordPress网站搬家教程

加载中...

发表评论

热门搜索

代码

发表评论