前端:弹幕标签用法详细介绍(跑马灯)

弹幕标签

1,注意弹幕标签marquee,现在一些浏览器是不支持的
2,弹幕标签也叫跑马灯

marquee格式及其含有的属性

1.基本格式

如下:

<marquee></marquee>

2.一些属性

1,direction属性:表示的是弹幕行走的方向,如下面实现向左行走

<marquee direction="left">这波操作6</marquee>

其中direction还可以设置值为up right down,可以自己修改演示。

添加width和height属性可以设置滚动的宽度和高度:如下设置高度为300px

<marquee behavior="scroll" direction="up" height="300">我改单方向向上循环滚动</marquee>       

2,behavior属性:
behavior属性可以取多个值,如:alternate scroll slide 等
若取值为alternate则表示弹幕从屏幕一侧跑到屏幕另外一侧时马上再向相反方向弹回去。
如下:

<marquee behavior="alternate">我从屏幕一侧跑到另一侧</marquee>

若取值为scroll表示弹幕从一侧跑到另一侧后又重新从一侧跑到另外一侧,如下:

<marquee behavior="scroll">我单方向循环滚动</marquee>

若取值为slide表示只向单方向行走一次,走到另外一侧时就停下,如下:

<marquee behavior="slide">我单方向走一次了</marquee> 

3,scrollamount属性
表示运动的速度快慢,默认取值为6,设置的越大则跑的越快,如下:

<marquee scrollamount="30">我速度快</marquee> 

4,scrolldelay属性
表示停顿的时间,单位为毫秒如下:

<marquee scrolldelay="100" scrollamount="100">速度被抑制了</marquee>

5,bgcolor
表示滚动区域的颜色,如下:

 <marquee direction="left" bgcolor="red">这波操作6</marquee>  

运行如图:
在这里插入图片描述
6,hspace属性
表示的是走到离边界还有多远的距离就回到开始重新走动。
如下:

<marquee scrollamount="30" hspace="100">离边界还有100px就重新循环</marquee> 

其中的值的单位是px,运行后可以发现弹幕走到离左边边界还有一段距离时就重新滚动。
7,onMouseOut="this.start()"属性
表示鼠标放到这里时则弹幕重新从开始地方行走。如下

<marquee onMouseOut="this.start()">点击这里</marquee> 

可以看见,鼠标移动到弹幕位置再拿开时,弹幕重新开始。
8,onMouseOut="this.start()"属性
表示的是鼠标放在弹幕位置并且拿开时,弹幕保持停止状态,不再走。如下:

<marquee onMouseOut="this.stop()">点击这里</marquee> 

运行鼠标放在弹幕处可以看到弹幕不再动。
9,loop属性
loop属性表示的是弹幕循环的次数,默认是无限次。如下:

<marquee loop="2">循环出现2次</marquee> 

运行后可以看到弹幕滚动2次后就再也没有出现了。

综合练习效果:

代码:

 <marquee direction="left" bgcolor="red">这波操作6</marquee>  
<marquee behavior="alternate">我来回滚动</marquee> 
<marquee behavior="scroll">我单方向循环滚动</marquee>
<marquee behavior="scroll" direction="up" height="300">我改单方向向上循环滚动</marquee>       
<marquee behavior="slide">我只滚动一次</marquee> 
<marquee behavior="slide" direction="up">我改向上只滚动一次了</marquee> 
<marquee scrollamount="100">我速度很快.</marquee> 
<marquee scrollamount="30" hspace="100">离边界还有100px就重新循环</marquee> 
<marquee scrollamount="30" vspace="100">离边界还有100px就重新循环</marquee> 
<marquee scrolldelay="30">我小步前进。</marquee> 
<marquee onMouseOut="this.start()">鼠标移动到这里重新开始弹幕</marquee> 
<marquee onMouseOut="this.stop()">鼠标移动到这里弹幕停止</marquee> 
<marquee loop="2" scrollamount="30">循环出现2次</marquee> 
<marquee scrolldelay="100" scrollamount="100">我大步前进。</marquee>

运行效果如下:
在这里插入图片描述

喜欢的话点个赞吧,谢谢

<?php /* Plugin Name: 多功能 WordPress 插件 Plugin URI: https://yourwebsite.com/plugins/multifunctional Description: 包含置顶、网页宠物、哀悼模式、禁止复制、弹幕等 20+ 功能的综合插件 Version: 1.0.0 Author: Your Name Author URI: https://yourwebsite.com License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: multifunctional-plugin Domain Path: /languages */ // 防止直接访问 if (!defined('ABSPATH')) { exit; } // 定义插件常量 define('MULTI_PLUGIN_DIR', plugin_dir_path(__FILE__)); define('MULTI_PLUGIN_URL', plugin_dir_url(__FILE__)); define('MULTI_PLUGIN_VERSION', '1.0.0'); // 全局设置存储键 $multi_plugin_options = array( 'mourning_date', 'background_image', 'announcement', 'marquee_content', 'watermark_text' ); // ------------------------------ // 1. 置顶功能 // ------------------------------ function multi_post_sticky_meta_box() { add_meta_box( 'post_sticky', '文章置顶', 'multi_post_sticky_callback', 'post', 'side', 'default' ); } add_action('add_meta_boxes', 'multi_post_sticky_meta_box'); function multi_post_sticky_callback($post) { $sticky = get_post_meta($post->ID, '_post_sticky', true); wp_nonce_field('post_sticky_nonce', 'post_sticky_nonce'); echo '<label><input type="checkbox" name="post_sticky" value="1" ' . checked(1, $sticky, false) . '> 置顶此文章</label>'; } function multi_post_sticky_save($post_id) { if (!isset($_POST['post_sticky_nonce']) || !wp_verify_nonce($_POST['post_sticky_nonce'], 'post_sticky_nonce')) { return; } if (isset($_POST['post_sticky'])) { update_post_meta($post_id, '_post_sticky', 1); } else { delete_post_meta($post_id, '_post_sticky'); } } add_action('save_post', 'multi_post_sticky_save'); // ------------------------------ // 2. 网页宠物 // ------------------------------ function multi_web_pet() { echo '<div id="web-pet" style="position:fixed;bottom:20px;right:20px;z-index:9999;">'; echo '<img src="' . MULTI_PLUGIN_URL . 'assets/pet.png" alt="网页宠物" width="80">'; echo '</div>'; } add_action('wp_footer', 'multi_web_pet'); // ------------------------------ // 3. 哀悼模式 // ------------------------------ function multi_mourning_mode() { $mourning_date = get_option('multi_mourning_date', '2025-04-29'); // 默认日期 if (date('Y-m-d') === $mourning_date) { echo '<style>html { filter: grayscale(100%); }</style>'; } } add_action('wp_head', 'multi_mourning_mode'); // ------------------------------ // 4. 禁止复制 & 查看源码 // ------------------------------ function multi_disable_copy_source() { // 禁止复制样式 echo '<style>body { user-select: none; -moz-user-select: none; -webkit-user-select: none; }</style>'; // 禁止查看源码脚本 echo '<script>document.addEventListener("keydown", function(e) { if ((e.ctrlKey && e.key === "u") || e.key === "F12" || e.keyCode === 123) { e.preventDefault(); } });</script>'; } add_action('wp_head', 'multi_disable_copy_source'); // ------------------------------ // 5. 弹幕功能 // ------------------------------ function multi_danmaku() { echo '<div id="danmaku-container"></div>'; echo '<script src="' . MULTI_PLUGIN_URL . 'assets/danmaku.js"></script>'; // 需自行添加弹幕逻辑脚本 } add_action('wp_footer', 'multi_danmaku'); // ------------------------------ // 6. WP 优化 // ------------------------------ function multi_wp_optimization() { // 移除冗余功能 remove_action('wp_head', 'rsd_link'); remove_action('wp_head', 'wlwmanifest_link'); remove_action('wp_head', 'wp_generator'); remove_action('wp_head', 'feed_links', 2); remove_action('wp_print_styles', 'print_emoji_styles'); } add_action('init', 'multi_wp_optimization'); // ------------------------------ // 7. 媒体分类 // ------------------------------ function multi_media_category() { register_taxonomy( 'media_category', 'attachment', array( 'label' => __('媒体分类', 'multifunctional-plugin'), 'hierarchical' => true, 'show_ui' => true, 'query_var' => true ) ); } add_action('init', 'multi_media_category'); // ------------------------------ // 8. 预加载首页 // ------------------------------ function multi_preload_homepage() { echo '<link rel="preload" href="' . home_url() . '" as="document">'; } add_action('wp_head', 'multi_preload_homepage'); // ------------------------------ // 9. 在线客服 & 手机客服 // ------------------------------ function multi_support_buttons() { // 通用客服按钮 echo '<div id="support-button" class="desktop-only">'; echo '<a href="https://your客服链接.com" target="_blank">在线客服</a>'; echo '</div>'; // 手机端专属客服按钮 echo '<div id="mobile-support" class="mobile-only">'; echo '<a href="tel:1234567890">手机客服</a>'; echo '</div>'; } add_action('wp_footer', 'multi_support_buttons'); // ------------------------------ // 10. 网站背景 & 公告 // ------------------------------ function multi_background_announcement() { // 背景图片 $bg_image = get_option('multi_background_image', MULTI_PLUGIN_URL . 'assets/bg.jpg'); echo '<style>body { background-image: url("' . esc_url($bg_image) . '"); }</style>'; // 公告栏 $announcement = get_option('multi_announcement', '欢迎访问我们的网站!'); echo '<div class="site-announcement">' . esc_html($announcement) . '</div>'; } add_action('wp_head', 'multi_background_announcement'); // ------------------------------ // 11. 水印功能 // ------------------------------ function multi_watermark() { $watermark = get_option('multi_watermark_text', '版权所有 © 你的网站'); echo '<style> body::after { content: "' . esc_attr($watermark) . '"; position: fixed; top: 50%; left: 50%; transform: rotate(-45deg) translate(-50%, -50%); opacity: 0.1; font-size: 80px; color: #000; pointer-events: none; } </style>'; } add_action('wp_head', 'multi_watermark'); // ------------------------------ // 12. 后台设置页面 // ------------------------------ function multi_plugin_settings_page() { add_options_page( '多功能插件设置', '多功能插件', 'manage_options', 'multi-plugin-settings', 'multi_settings_html' ); } add_action('admin_menu', 'multi_plugin_settings_page'); function multi_settings_html() { if (!current_user_can('manage_options')) { wp_die(__('你没有权限访问此页面。')); } if (isset($_POST['multi_plugin_save'])) { foreach ($multi_plugin_options as $option) { update_option('multi_' . $option, sanitize_text_field($_POST[$option])); } echo '<div class="updated"><p>设置已保存!</p></div>'; } $options = array(); foreach ($multi_plugin_options as $option) { $options[$option] = get_option('multi_' . $option, ''); } ?> <div class="wrap"> <h1>多功能插件设置</h1> <form method="post"> <table class="form-table"> <tr> <th>哀悼日期 (YYYY-MM-DD)</th> <td><input type="text" name="mourning_date" value="<?php echo esc_attr($options['mourning_date']); ?>"></td> </tr> <tr> <th>背景图片 URL</th> <td><input type="url" name="background_image" value="<?php echo esc_attr($options['background_image']); ?>"></td> </tr> <tr> <th>公告内容</th> <td><input type="text" name="announcement" value="<?php echo esc_attr($options['announcement']); ?>"></td> </tr> <tr> <th>跑马灯内容</th> <td><input type="text" name="marquee_content" value="<?php echo esc_attr($options['marquee_content']); ?>"></td> </tr> <tr> <th>水印文本</th> <td><input type="text" name="watermark_text" value="<?php echo esc_attr($options['watermark_text']); ?>"></td> </tr> </table> <p class="submit"> <input type="submit" name="multi_plugin_save" class="button button-primary" value="保存设置"> </p> </form> </div> <?php } // ------------------------------ // 插件激活时创建默认设置 // ------------------------------ function multi_plugin_activate() { foreach ($multi_plugin_options as $option) { $default = ($option === 'mourning_date') ? '2025-04-29' : ''; add_option('multi_' . $option, $default); } } register_activation_hook(__FILE__, 'multi_plugin_activate'); // ------------------------------ // 资源路径说明(需手动创建目录) // ------------------------------ /* 请在插件目录下创建以下文件夹和文件: - assets/ - pet.png (网页宠物图片) - bg.jpg (默认背景图片) - danmaku.js (弹幕逻辑脚本) - style.css (自定义样式) */
最新发布
05-01
评论 57
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员Fy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值