js 拖拽跑马灯公告

完整的代码, 可以复制引用

实现了一个通知条 (mequeText) 的滚动效果。当页面加载完成后，这个通知条开始从右往左滚动。当鼠标悬停在上面时，它停止滚动，并且当鼠标移出时它重新开始滚动。此外，用户还可以通过鼠标按下并拖动来手动移动这个通知条。

<!DOCTYPE html>;
<html lang="en">;
<head>;
    <meta charset="UTF-8">;
    <title>;Title</title>;
    // 使用内联CSS样式表来样式化页面元素
    <style type="text/css">;
        // 重置默认的外边距和内边距
        *{padding:0;margin:0;}
        // 移除列表项前的样式
        li{list-style:none;}
        // 移除输入框的轮廓线
        input{outline:none;}
        .ft0{font-size:0;}
        .fw{overflow:hidden;}
        // 设置meque的样式
        #meque{width:1000px;height:30px;line-height:30px;margin:0 auto;overflow:hidden;position:relative;}
        #meque_text{white-space:nowrap;position:absolute;left:0;top:0;cursor:pointer;}
    </style>;
</head>;

<body>;
    <div id="meque">;
        <p id="meque_text">;JS 教程 JS 简介 JavaScript 是属于网络的脚本语言! JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用</p>;
    </div>;

<script>;
    // 使用自执行函数对页面上的元素进行动态操作
  (function () {
    // 获取需要操作的元素
    var mequeText = document.getElementById('meque_text'),   // 滚动的文本
        meque = document.getElementById('meque'),           // 容器元素
        timer = null;                                       // 定时器变量，用于控制文本的滚动

    // 设置文本初始位置为容器的宽度，使其从右侧开始滚动
    mequeText.style.left = meque.offsetWidth + 'px';

    // 清除可能存在的定时器
    clearInterval(timer);

    // 设定定时器，使文本每20毫秒向左移动
    timer = setInterval(notice, 20);

    // 调用notice函数，开始文本的滚动
    notice();

    // 定义滚动函数
    function notice () {
        // 当文本的左侧位置小于其自身宽度的负值时，重新设置其位置到容器的右侧
        if (mequeText.offsetLeft < -mequeText.offsetWidth) {
            mequeText.style.left = meque.offsetWidth + 'px';
        }
        // 文本向左移动2px
        mequeText.style.left = mequeText.offsetLeft + -2 +'px';
    }

    // 当鼠标悬停在文本上时，停止滚动
    mequeText.onmouseover = function () {
        clearInterval(timer);
    };

    // 当鼠标移出文本时，重新开始滚动
    mequeText.onmouseout = function () {
        timer = setInterval(notice, 20);
    };

    // 当在文本上按下鼠标时，可以拖动文本
    mequeText.onmousedown = function (ev) {
        var ev = ev || window.event;  // 获取事件对象
        var disX = ev.clientX - this.offsetLeft;  // 计算鼠标按下时的位置与文本左侧的距离

        // 当鼠标移动时，文本跟随鼠标移动
        mequeText.onmousemove = function (ev) {
            var ev = ev || window.event;
            mequeText.style.left = ev.clientX - disX + 'px';
        };

        // 当鼠标释放时，停止文本的拖动
        document.onmouseup = function () {
            mequeText.onmousemove = null;
        }
    }
})();
    // 使用jQuery的ready方法等待文档准备就绪
    $(function () {
        // 获取数据并更新页面内容
        $.getJSON("/data/json/notice.json";, function (response) {
            $('.marNote').html(response.roll_notice.noticeContent)
        })
    })
</script>;
</body>;
</html>;

posted on 2021-10-27 16:13  完美前端  阅读(99)  评论(0)    收藏  举报

导航