炉石传说官网鼠标移动的时候，我们可以看到背景上的卡牌随鼠标移动会产生上下左右轻微的移动。如果不追求卡牌移动的缓动效果，可以用简单的js实现图片跟随鼠标移动的效果。（看代码头晕的童鞋可以直接看底部的模仿视频）

炉石传说页面里的卡牌移动距离很小，每张卡牌移动的速度和距离也不太相同，下面我们看看怎样实现简单图片随鼠标移动效果。

1、创建一个html文件，先把两张图片插入到网页中。

2、给这两个图片设定简单的css样式：宽度100%，绝对位置，把body背景设定为黑色，超出body区域隐藏：

body{background-color: #000;overflow: hidden;}#myimg1{position: absolute;width: 100%;}#myimg2{position: absolute;width: 100%;}

3、为了方便控制我们引入jQuery，由于我们需要动态获取鼠标位置，因此使用mousemove事件实时获取鼠标的x轴和y轴，前面我们说过图片移动的区域很小，因此设定两个图片的移动区间，在这里我们随便设定一个区间：

var img1x = e.clientX/5-200;var img1y = e.clientY/5-200;var img2x = e.clientX/20-100;var img2y = e.clientY/20-100;

区间设定好以后，就可以通过jquery来改变图片的left距离和top距离（这里的数字没有仔细测试过，不一定就是最合理的）。

$("#myimg1").css("left",img1x>200?200:img1x);$("#myimg1").css("top",img1y>200?200:img1y);$("#myimg2").css("left",img2x>100?100:img2x);$("#myimg2").css("top",img2y>100?100:img2y);

完整代码如下：

做好以后打开这个html页面，移动鼠标看看效果吧！