div随鼠标晃动

(function(){
        var bannerWrap = document.querySelector('.top1'),
            banner = bannerWrap.querySelector('.big_img');
        banner.addEventListener('mousemove', function(e){
            this.style.transition = '';
            var centerX = banner.offsetLeft + banner.offsetWidth / 2,  //div中心点到页面左边距离
                centerY = banner.offsetTop + banner.offsetHeight / 2;

            var deltaX = e.pageX - centerX,
                deltaY = e.pageY - centerY;


            var percentageX = deltaX / centerX,  //向左或向右的 偏差率
                percentageY = deltaY / centerY;
            var deg = 20;  //控制 偏差的 程度
            this.style.transform = 'rotateX(' + percentageY * deg + 'deg)'
                + 'rotateY(' + percentageX * deg + 'deg) translateZ(30px)';
        });
        banner.addEventListener('mouseleave', function(e){
            this.style.transform = 'rotateX(0) rotateY(0) translateZ(0px)';
            this.style.transition = 'all 0.2s linear';
        })
    })();
相关文章
相关标签/搜索