html鼠标经过晃动代码,css3让div随鼠标移动而抖动起来

最近发现一个网站，感觉用户体验不错，特别是一些背景图片随着鼠标的移动的反向的移动，感觉跟不错，于是就试着写了个小demo模仿一下

复制代码代码如下:

Insert title here

.layer {

width:400px;

height:400px;

background-color:#FF7373;

transa

}

.A {

position: absolute;

top: 23px;

left: 10px;

}

.B {

position: absolute;

top: 223px;

left: 516px;

}

.C {

position: absolute;

top: 384px;

left: 1000px;

}

var items = document.getElementsByClassName("layer");

document.addEventListener('mousemove', function (evt){

var x = evt.clientX;

var y = evt.clientY;

//console.log(x);

var winWidth = window.innerWidth;

var winHeight = window.innerHeight;

var halfWidth = winWidth / 2;

var halfHeight = winHeight / 2;

var rx = x - halfWidth;

var ry = halfHeight - y;

var length = items.length;

var max = 30;

for (var i = 0 ; i < length ; i++) {

var dx = (items[i].getBoundingClientRect().width/max)*(rx / -halfWidth);

var dy = (items[i].getBoundingClientRect().height/max)*(ry / halfHeight);

items[i].style['transform'] = items[i].style['-webkit-transform'] = 'translate('+dx+'px,'+dy+'px)';

}

}, false);

说明一下分别拿到每个div的长度和宽度，通过比例算出相对于窗口的合适的偏移量，max是每个div左右偏移最多不超过的值

效果展示