参考 Element 官网，利用 js / jq 和 css3， 实现某图片随着鼠标移动呈现的视差效果。

<!DOCTYPE html>

<html>

<head>

    <title>banner 跟随鼠标呈现视差效果</title>

    <meta charset="utf-8" />

    <style>

        * {

            transition: all .3s;

        }

        .perspective {

            perspective: 800px;

        }

        .preserve3d {

            position: relative;

            width: 500px;

            height: 400px;

            margin: 160px auto;

            background: #4b5cce url("http://data.banyanbbt.org/static/newimg/top/right.png") center no-repeat;

            background-size: 100% 100%;

            border-radius: 20px;

            transform-style: preserve-3d;

        }

    </style>

</head>

<body>

    <div class="perspective">

        <div class="preserve3d">

        </div>

    </div>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

    <script type="text/javascript">

        /* 原生js实现 */

        (function () {

            var imgPX = 0;

            var imgPY = 0;

            var divWidth = 0;

            var divHeight = 0;

            var flag = false; // 记录鼠标是否按下

            var preserve3d = document.querySelector(".preserve3d");

            console.log(preserve3d.offsetLeft, preserve3d.offsetTop)

            console.log(preserve3d.clientWidth, preserve3d.clientHeight)

            preserve3d.addEventListener("mouseenter", function (e) {

                flag = true;

                var evt = e || window.event;

                imgPX = preserve3d.offsetLeft;

                imgPY = preserve3d.offsetTop;

                divWidth = preserve3d.clientWidth;

                divHeight = preserve3d.clientHeight;

                document.addEventListener("mousemove", function (e) {

                    if (flag) {

                        var evt = e || window.event;

                        var mouseX = evt.clientX - imgPX;

                        var mouseY = evt.clientY - imgPY;

                        var X = mouseX - divWidth / 2;

                        var Y = divHeight / 2 - mouseY;

                        preserve3d.style.transform =

                            `rotateY(${ X / 20 }deg) rotateX(${ Y / 20 }deg)`

                    }

                });

                document.addEventListener("mouseout", function () {

                    flag = false;

                    preserve3d.style.transform = `rotateY(${ 0 }deg) rotateX(${ 0 }deg)`

                    document.removeEventListener("mouseout", function () {

                        flag = false;

                    });

                })

            });

        })();

        /* jq 实现 */

        // (function () {

        //     var imgPX = 0;

        //     var imgPY = 0;

        //     var divWidth = 0;

        //     var divHeight = 0;

        //     $('.preserve3d').on('mouseenter', function () {

        //         imgPX = $(this).offset().left;

        //         imgPY = $(this).offset().top;

        //         divWidth = $(this).outerWidth();

        //         divHeight = $(this).outerHeight();

        //         console.log($(this).offset().left, $(this).offset().top)

        //     }).on('mousemove', function (event) {

        //         var mouseX = event.pageX - imgPX;

        //         var mouseY = event.pageY - imgPY;

        //         var X = mouseX - divWidth / 2;

        //         var Y = divHeight / 2 - mouseY;

        //         $(this).css({

        //             "transform": "rotateY(" + X / 20 + "deg) " + "rotateX(" + Y / 20 + "deg) "

        //         });

        //     }).on('mouseleave', function () {

        //         $(this).css({

        //             "transform": "rotateY(0deg) rotateX(0deg)"

        //         })

        //     })

        // })();

    </script>

</body>

</html>

banner 跟随鼠标呈现视差效果的更多相关文章

  1. hover时显示可跟随鼠标移动的浮动框，运用函数节流与去抖进行优化

    在很多笔试面试题中总能看到js函数去抖和函数节流,看过很多关于这两者的讨论,最近终于在一个需求中使用了函数去抖(debounce)和函数节流(throttle). 需要完成的效果是,鼠标在表格的单元格 ...

  2. Ant Design -- 图片可拖拽效果，图片跟随鼠标移动

    Ant Design 图片可拖拽效果,图片跟随鼠标移动,需计算鼠标在图片中与图片左上角的X轴的距离和鼠标在图片中与图片左上角的Y轴的距离. constructor(props) { super(pro ...

  3. html5跟随鼠标炫酷网站引导页动画特效

    html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/tex ...

  4. 【翻译】使用CSS3和jQuery制作跟随鼠标方位的Hover特效

    今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果.当鼠标滑进的时候,遮罩层会从上次鼠标滑出的方向滑入,当鼠标滑出的时候,遮罩层会跟随鼠标,从鼠标滑出的方向滑 ...

  5. canvas实现跟随鼠标旋转的箭头

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...

  6. Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现

    Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在网络上浏览有关Edge相关问题的时 ...

  7. jQuery背景跟随鼠标移动的网页导航

    首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 设为首页 加入收藏 我要投稿 联系站长 Search     首页 PSD模板 CSS模板 特效插件 ...

  8. 基于Parallax设计HTML视差效果

    年关将至,给大家拜年. 最近时间充裕了一点,给大家介绍一个比较有意思的控件:Parallax.它可以用来实现鼠标移动时,页面上的元素也做偏移的视差效果.在一些有表现层次,布局空旷的页面上,用来做Hea ...

  9. css中的视距perspective和视差效果

    概述 之前觉得2个效果很叼,一个是3D翻转效果,另一个是视差效果.今天好好的研究一下,把心得记录下来,供以后开发时参考,相信对其他人也有用. 3D翻转 3D翻转效果其实非常简单,其实就是perspec ...

随机推荐

  1. 使用Eclipse Debug的一些说明

    目录 Debug视图 线程堆栈视图 变量视图 断点视图 表达式视图 代码视图 远程Debug 异常断点 条件断点 表达式 Debug定位第三方插件的问题 Debug一些经验   Debug视图 认识d ...

  2. Oracle EBS SLA取值

    -- 从GL总账追溯到 => 子分类账SLA => 子模块AP.AR等 SELECT xep.name, -- 法人主体 xep.legal_entity_identifier, -- 法 ...

  3. python selenium模拟登录163邮箱和QQ空间

    最近在看python网络爬虫,于是我想自己写一个邮箱和QQ空间的自动登录的小程序, 下面以登录163邮箱和QQ空间和为例: 了解到在Web应用中经常会遇到frame/iframe 表单嵌套页面的应用, ...

  4. SQL Server 复制表结构、整表数据

    1.将表1结构复制到表2 SELECT * INTO 表2 FROM 表1 WHERE 1=2 2.将表1内容全部复制到表2 SELECT * INTO 表2 FROM 表1

  5. C/C++控制Windows关机/注销/重启的正确姿势

    简介 说到代码控制Windows关机/注销/重启的方式,有很多种,最简单的不过就是控制命令行,使用system("pause")函数执行一个shutdown -s -t 0,关机就 ...

  6. DFS的运用（二分图判定、无向图的割顶和桥，双连通分量，有向图的强连通分量）

    一.dfs框架: vector<int>G[maxn]; //存图 int vis[maxn]; //节点访问标记 void dfs(int u) { vis[u] = ; PREVISI ...

  7. Springboot集成Common模块中的的全局异常处理遇见的问题

    由于项目公共代码需要提取一个common模块,例如对于项目的文件上传,异常处理等,本次集成common代码时候maven引入common的全局异常处理代码之后发现不生效,由于common包路径与自己的 ...

  8. 支付宝即时到账接口开发 - DEMO讲解

    支付宝即时到帐接口 环境要求 PHP5.0以上,且需要开启curl.openssl. 文档地址: https://doc.open.alipay.com/doc2/detail?treeId=62&a ...

  9. Node.js实战(九)之事件循环

    Node.js 是单进程单线程应用程序,但是因为 V8 引擎提供的异步执行回调接口,通过这些接口可以处理大量的并发,所以性能非常高. Node.js 几乎每一个 API 都是支持回调函数的. Node ...

  10. $.toJSON和eval的区别

    1.$.toJSON是jquery的方法.eval是javascript的方法 2.eval兼容的浏览器多,$.toJSON有可能解析不了的json格式的数据,eval可以.