div随鼠标晃动

布满荆棘的人生 2022-06-02 05:42 177阅读 0赞

(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';
            })
        })();

发表评论取消回复

表情：

评论列表（有 0 条评论，177人围观）

还没有评论，来说两句吧...

相关阅读

相关 div不响应鼠标事件

div不响应鼠标事件有时，需要覆盖在表面的div完全透明，并且，鼠标事件也不相应。如何实现呢，其实很简单只需要加使用`css`一句话即可实现：只需要添加st

我不是女神ヾ/ 2022年12月02日 03:51/ 0 赞/ 414 阅读

相关 jquery 图片自由拼凑，鼠标移上图片晃动效果代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

迈不过友情╰/ 2022年08月23日 11:53/ 0 赞/ 154 阅读

相关【技术】左右晃动

左右摇摆 //self 就是摇摆的view CGFloat rotation = 0.03; CABasicAnimation \shake = \[C

「爱情、让人受尽委屈。」/ 2022年08月20日 13:18/ 0 赞/ 143 阅读

相关 jquery鼠标移上div切换

样式： .tb_box{ padding:20px; position: absolute; left:0; right:0; width: 50%;margin:a

偏执的太偏执、/ 2022年07月21日 02:17/ 0 赞/ 182 阅读

相关 Jquery实现鼠标移动div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

待我称王封你为后i/ 2022年06月04日 04:12/ 0 赞/ 371 阅读

相关 div随鼠标晃动

(function(){ var bannerWrap = document.querySelector('.top1'),

布满荆棘的人生/ 2022年06月02日 05:42/ 0 赞/ 178 阅读

相关 div随着鼠标移动而移动

我做的是类似一个鼠标移入展示图标，移出消失如下展示： ![Center][](很丑，时间关系就简单做了一个，但是功能健全，可以随意扩展和修改) 1.页面上元素 //这个d

末蓝、/ 2022年06月02日 00:45/ 0 赞/ 220 阅读

相关实现div鼠标拖动效果

实现这个效果的关键是给div的定位设置成absolute,然后获得鼠标移动后的位置坐标并给要移动的div。我将它封装成了一个函数，只需要传入参数即可使用。 dow

深碍√TFBOYSˉ_/ 2022年05月13日 07:36/ 0 赞/ 283 阅读

相关 div宽度随屏幕大小变化

　　题目：　　一个页面上两个div左右铺满整个浏览器，　　要保证左边的div一直为100px，右边的div跟随浏览器大小变化，　　比如浏览器为500，右边div为4

矫情吗；*/ 2022年01月07日 11:49/ 0 赞/ 600 阅读

相关 js 鼠标拖动div

div中心跟踪鼠标动而动得到鼠标坐标，移动时div的左上距离为鼠标两坐标减去div左上顶点到中心的距离 div任意位置随鼠标动而动得到鼠标第一次坐标，移动时div

忘是亡心i/ 2021年07月24日 17:05/ 0 赞/ 473 阅读