参考 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. 看jQuery的这几天

    现在在做SPA时,有很多非常好用而且流行的前端框架,比如Vue,React,Angular等,jQuery似乎要逐渐退出前端的舞台了.不得不说,'write less,do more' 这句话吸引了我 ...

  2. PFX文件提取公钥私钥

    jks是JAVA的keytools证书工具支持的证书私钥格式.pfx是微软支持的私钥格式. cer是证书的公钥. 如果是你私人要备份证书的话记得一定要备份成jks或者pfx格式,否则恢复不了. 简单来 ...

  3. 用apiDoc简化接口开发

    身为程序员最讨厌看到的代码没有注释,自己的代码却讨厌写注释,觉得麻烦,接口也是这样. 比如公司要做一个H5活动的页面,开发文档已经发到后端开发.设计.与前端的邮箱了,其实这个时候就可以开始开发了.开发 ...

  4. 不使用 vue-cli 与 vue 模版，使用 Vue2.x + webpack4.x 从零开始一步步搭建项目框架

    说明 这是我根据慕课网上的一个课程 Vue+Webpack打造todo应用 过程一步步搭下来的框架,去掉了业务相关的逻辑. 项目最终的效果包括了引入vue框架:使用CSS预处理器:使用babel:引用 ...

  5. Hexo搭建博客笔记

    Hexo搭建(建议看ppt:https://files.cnblogs.com/files/-SANG/%E4%BD%A0%E7%9A%84%E7%8C%AB.pptx ) 安装Git https:/ ...

  6. win10子系统linux.ubuntu开发环境搭建

    移步新博客... win10子系统linux.ubuntu开发环境搭建

  7. beta冲刺————第五天（5/5=1）

    今天的主要内容是前后端的对接: 通过前几天的对接,我们发现后端传给前端内容是可以很完美的显示出来的,说明文章格式以及一些默认规则都是OK的. 然后就是前端从云服务器上面接受到文章的具体内容,在这一个环 ...

  8. C# MVC 使用 CKEditor图片上传 提示“不正确的服务器响应”

    重点:看一下你使用的CKEditor版本 过程: 后台需要一款富文本编辑器.经过挑选后,最后选择了FCKEditor 的升级版 CKEditor .在官网下载了4.10.1版本. 经过一番配置后,富文 ...

  9. 利用gulp 插件gulp.spritesmith 完成小图合成精灵图，并自动输出样式文件

    安装依赖 yarn add gulp yarn add gulp.spritesmith 本次依赖的版本是: "gulp": "^3.9.1" "gu ...

  10. swiper.js 多图片页面的懒加载lazyLoading

    swiper.js官网:http://www.swiper.com.cn/api/Images/2015/0308/213.html 设为true开启图片延迟加载,使preloadImages无效.需 ...