jQuery案例:视频弹屏

最新推荐文章于 2021-03-17 02:37:04 发布

原创

最新推荐文章于 2021-03-17 02:37:04 发布 · 294 阅读

0 ·

CC 4.0 BY-SA版权

本文通过一个jQuery实战案例，详细介绍了如何创建一个视频弹屏功能。通过点击按钮，视频将以弹窗形式全屏播放，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- 

    核心思路是：当你点击发送弹幕以后，就创建一个新的span，加到video的div里面，并且这个span要定位，而且要改颜色
    定位就随机定位，颜色也是随机颜色，还用动画效果移动到左边去
-->

<script src="./jquery-1.12.4.min.js"></script>

<script>

    // 产生随机颜色
    function randomColor() {

        // rgb 0-255,0-255,0-255
        // 所以其实只要生成3个0-255之间的数字就行了

        var r = parseInt(Math.random() * 256);
        var g = parseInt(Math.random() * 256);
        var b = parseInt(Math.random() * 256);

        return 'rgb(' + r + ',' + g + ',' + b + ')';
    }

    $(':button').click(function () {


        var randomTop = Math.random() * $('.video').height();

        // 创建一个span，并且把它的文字设置为输入的内容
        $('<span></span>').text($(':text').val()).css({
            color: randomColor(),
            top: randomTop,
            right: -60,
            position: "absolute"

        }).appendTo($('.video')).animate(
            {