CSS是網頁設計中必不可少的一環。除了用于網頁的布局和美化， CSS還可以實現一些有趣的效果。本文將介紹如何使用CSS實現京東鼠標放大效果。

/* 首先，我們需要給鼠標添加一個放大的效果 */
img:hover {
transform: scale(2);
transition: all 0.3s ease;
}
/* 接下來，我們需要創建一個遮罩層 */
.mask {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
display: none;
background-color: rgba(0, 0, 0, 0.5);
}
/* 遮罩層中的圖片容器 */
.mask img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 80%;
max-height: 80%;
}

接著我們需要使用jQuery實現放大鼠標時彈出遮罩層的效果。

// 監聽鼠標移動事件
$('img').mousemove(function(e) {
// 獲取鼠標坐標
var mouseX = e.pageX;
var mouseY = e.pageY;
// 獲取圖片地址
var imgSrc = $(this).attr('src');
// 顯示遮罩層，并設置圖片路徑和位置
$('.mask').fadeIn().find('img').attr('src', imgSrc).css({
'left': mouseX,
'top': mouseY
});
});
// 監聽遮罩層的點擊事件，隱藏遮罩層
$('.mask').click(function() {
$(this).fadeOut();
});

到這里，我們已經完成了京東鼠標放大效果的實現。代碼可以根據自己的需求進行修改。希望這篇文章能對你有所幫助！