参考 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. 团队项目个人进展——Day10

    一.昨天工作总结 冲刺第十天,与小组成员任务合并,并解决结合后的一些问题. 二.遇到的问题 界面还是不太和谐 三.今日工作规划 对页面的布局.wxss做了一些修改

  2. ASP.NET Core Razor生成Html静态文件

    一.前言 最近做项目的时候,使用Util进行开发,使用Razor写前端页面.初次使用感觉还是不大习惯,之前都是前后端分离的方式开发的,但是使用Util封装后的Angular后,感觉开发效率还是杠杠滴. ...

  3. Prometheus Node_exporter 之 Network Netstat UDP

    Network Netstat UDP /proc/net/snmp 1. UDP In / Out type: GraphUnit: shortLabel: Datagrams out (-) / ...

  4. c#WebApi使用form表单提交excel，实现批量写入数据库

    思路:用户点击下载模板按钮,获取到excel模板,然后向里面填写数据保存.from表单提交的时候选择保存好的excel,实现数据的批量导入过程 先把模板放在服务器的项目目录下面:如 模板我一般放在:F ...

  5. 全面认识一下.NET 4.0的缓存功能 (转)

    转自:http://www.cnblogs.com/hjf1223/archive/2010/07/16/net_4_caching.html 很多关于.NET 4.0新特性的介绍,缓存功能的增强肯定 ...

  6. Online, Cheap -- and Elite

    Online, Cheap -- and Elite Analysis of Georgia Tech’s MOOC-inspired online master's in computer scie ...

  7. mybatis 反向生成步骤

    Mybatis 反向生成. 反向生成的步骤: 反向生成的文件 打开文件夹显示 3.打开generator.xml文件 更改配置信息  路径一般情况下用英文  中文的路径有些会识别不了  或产生乱码 4 ...

  8. javascript 正则表达式的使用

    1. 语法 有两种定义正则表达式的方式 字面量形式 var expression = /pattern/flags 引用 MDN 的解释: pattern:正则表达式的文本. flags:标志,可以是 ...

  9. php读取文件内容几种正确方

    1: //方法一 用while来些fgets一行行读 2: $file_name="1.txt"; 3: $fp=fopen($file_name,'r'); 4: while(! ...

  10. input file 美化

    <input type='file'>的默认外观实在难看,绝大多数情况都需要对其美化.找了很多资料,目前发现以下方式是最简单的美化方式. 1.将file input用label包裹起来,然 ...