jQuery前段开发--星级评价和图形跟随指针移动

以下是一个简单的jQuery实现，用于星级评分和图形跟随鼠标移动的示例：

HTML部分：

<div id="rating-container">
    <canvas id="star-rating" width="200" height="40"></canvas>
</div>

CSS部分：

#rating-container {
    position: relative;
    width: 200px;
}
 
#star-rating {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none; /* 防止鼠标事件影响到canvas */
}

jQuery部分：

$(document).ready(function() {
    var ratingCanvas = $('#star-rating')[0];
    var ctx = ratingCanvas.getContext('2d');
    var stars = [];
    var count = 5;
    var starSize = 40;
    var spacing = 50;
 
    // 初始化星星数组
    for (var i = 0; i < count; i++) {
        stars.push({
            x: i * spacing,
            y: 0,
            width: starSize,
            height: starSize,
            fill: 'gold'
        });
    }
 
    // 绘制星星
    function drawStars() {
        ctx.clearRect(0, 0, ratingCanvas.width, ratingCanvas.height);
        for (var i = 0; i < stars.length; i++) {
            var star = stars[i];
            ctx.fillStyle = star.fill;
            ctx.fillRect(star.x, star.y, star.width, star.height);
        }
    }
 
    // 鼠标移动事件
    $('#rating-container').mousemove(function(e) {
        var mouseX = e.pageX - $('#rating-container').offset().left;
        for (var i = 0; i < stars.length; i++) {
            var star = stars[i];
            if (mouseX > star.x && mouseX < star.x + star.width) {
                stars[i].fill = 'gold'; // 当鼠标经过时，改变星星颜色
            } else {
                stars[i].fill = 'gray'; // 其他星星恢复灰色
            }
        }
        drawStars(); // 重新绘制
    });
 
    drawStars(); // 初始绘制
});

这段代码首先初始化了一个包含五颗星的数组，并设置了它们的位置和尺寸。然后，当鼠标在容器内移动时，会通过mousemove事件处理函数更新数组中的星星颜色，然后重新绘制画布。这里使用了pointer-events: none;样式属性，以确保鼠标事件不会影响到画布本身。