jquery 文字左右滑动效果代码

jQuery实现文字左右滑动效果通常涉及到CSS动画和jQuery的控制。以下是一个简单的示例代码，展示了如何实现文字左右滑动效果：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 文字左右滑动效果</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="slider">
        <span class="slide">这是要滑动的文字内容。</span>
    </div>
    <button id="startSlide">开始滑动</button>
    <button id="stopSlide">停止滑动</button>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

.slider {
    overflow: hidden;
    width: 300px;
    border: 1px solid #ccc;
}

.slide {
    display: inline-block;
    white-space: nowrap;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

jQuery部分（script.js）

$(document).ready(function() {
    var isSliding = false;

    function startSliding() {
        if (!isSliding) {
            $('.slide').css({
                animationName: 'slide',
                animationPlayState: 'running'
            });
            isSliding = true;
        }
    }

    function stopSliding() {
        if (isSliding) {
            $('.slide').css({
                animationPlayState: 'paused'
            });
            isSliding = false;
        }
    }

    $('#startSlide').click(startSliding);
    $('#stopSlide').click(stopSliding);

    // 定义CSS动画
    $('head').append('<style>.slide { animation-name: slide; }</style>');
    $('head').append('<style>@keyframes slide { from { transform: translateX(100%); } to { transform: translateX(-100%); } }</style>');
});

解释

HTML部分：创建了一个包含滑动文字的div，以及两个按钮用于控制滑动的开始和停止。
CSS部分：设置了滑动容器的样式，并定义了滑动文字的基本样式。
jQuery部分：
- 使用$(document).ready()确保DOM完全加载后再执行脚本。
- 定义了startSliding和stopSliding函数来控制动画的开始和停止。
- 使用click事件绑定按钮的点击事件。
- 动态添加CSS动画定义，使文字从右向左滑动。