参考 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. Python基础知识之疑点难点

    一.标识符 (1) 标识符不能以数字开头:以下划线开头的标识符具有特殊的意义,使用时需要特别注意. 以单下划线开头(如_foo)的标识符代表不能直接访问的类属性,需通过类提供的接口进行访问,不能用 “ ...

  2. 目标管理之SMART原则

    SMART原则经常用于KPI制定,也可以用于个人目标管理. SMART原则: S(Specific):目标必须是具体的,需要对标特定的工作目标,不能笼统: M(Measurable):目标必须是可衡量 ...

  3. Prometheus Node_exporter 之 Network Netstat TCP Linux MIPs

    Network Netstat TCP Linux MIPs1. TCP Aborts / Tiemouts type: GraphUnit: shortLabel: ConnectionsTCPAb ...

  4. T-SQL查询两个日期之间的休息日（周六周日）天数

    SELECT COUNT(*) FROM MASTER..SPT_VALUES WHERE TYPE = 'P' AND DATEADD(DAY,NUMBER,'2014-03-13')<='2 ...

  5. VScode开发Vue项目，关闭eslint代码检查，以及相关配置

    Vue初始化项目时如果不小心安装了js 语法检测 功能,撸码时一个空格不对就会各种报错 个人感觉这个语法检测功能很有点过于严格,用起来十分难受,所以果断关闭eslint,找到webpack.base. ...

  6. mysql client之init-command

    If the server is a replication master and you want to avoid replicating the content to replication s ...

  7. java中的String类的不可变性的小例子

    在java语言中,String类具有不可变性,即常量字符串不可更改.下面的一个小例子简单演示相关概念. public class test { public static void main(Stri ...

  8. 后台线程下的WinFrom窗体控件操作 Invoke

    Invoke(new MethodInvoker(delegate { ControllerLogout(controller_id, is_successful, description, cont ...

  9. Docker容器学习与分享04

    Docker容器的基本操作(2) 基于docker分享03的centos容器,接着学习docker容器的基本操作. docker分享03中创建了一个centos镜像,如果想要查看容器的具体信息就要使用 ...

  10. 阿里八八Alpha阶段Scrum(2/12)

    今日进度 叶文滔: 11.1:搭建Andriod Studio开发环境 11.2:已经完成Alpha阶段的APP整体框架搭建. 11.3:根据会议讨论内容,增加了模块标题栏返回键. 王国超: 完成了多 ...