黑马程序员技术交流社区

标题: 【黑马程序员济南】 前端与移动开发笔记事件特效:day03 [打印本页]

---

作者: 小鲁哥哥    时间: 2017-10-11 19:08
标题: 【黑马程序员济南】 前端与移动开发笔记事件特效:day03

【黑马程序员济南】 前端与移动开发就业班笔记事件特效：Day03

事件对象

在触发事件时，会产生一个事件对象event，这个对象中包含着与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。

事件对象的兼容性写法

var event = event || window.event;


三个重要座标

clientX  clientY

当前窗口的左上角为基准点

pageX   pageY

以当前文档的左上角为基准点

IE678不支持pageX和pageY 但是我们可以采取另一种方式

[JavaScript] 纯文本查看 复制代码

        /**

         *@author 传智播客

         */

        var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;

        var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;

screenX screenY

当前屏幕的左上角为基准点

理解了event三个坐标之后我们做一个鼠标跟随的案例

[JavaScript] 纯文本查看 复制代码

        /**

         *@author 传智播客

         */

         //<img src="img.jpg" alt="" width="50" height="50" id="pic"/>

    var pic = document.getElementById("pic");

    //需求：鼠标在页面上点击 获取点击时的位置 然后让图片以动画效果飞过来

    document.onclick = function (event) {

        var event = event || window.event;

        //鼠标在页面上的位置

        var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;

        var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;

        //计算图片应该到的位置

        var targetX = pageX - pic.offsetWidth / 2;

        var targetY = pageY - pic.offsetHeight / 2;

        //让图片以动画效果飞过来

        animate(pic, {"top": targetY, "left": targetX});

    };

放大镜特效

制作方法：

鼠标经过显示盒子

鼠标经过small，让mask和big显示；鼠标离开small，让mask和big隐藏。

鼠标经过遮罩跟随

给small绑定鼠标移动事件

获取鼠标在small 内的坐标

计算鼠标在盒子中的座标（鼠标pageX-box到页面左侧的距离；鼠标pageY-box到页面顶部的距离）

然后赋值给mask的top和left（位置是按照左上角算的，所以top值要减去高度的一半，left值要减去宽度的一半）

限定遮罩运动范围

x 最小为0；最大为200，这个200是 small的宽度 - mask的宽度（mask可以向右移动的最大值）

按比例显示大图片

小盒子移动，大盒子要根据比例来移动，比例为：

大图 在 大盒子 里移动的距离 / 小黄 在 小图 里移动的距离

（大图片 - 大盒子 ） / （小盒子 - 小遮罩 ）

800 - 400 / 350 - 175

因为是反方向移动 计算时记得加负号。
代码见附件。

如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友，那就快来吧！
黑马程序员济南中心联系电话：0531-55696830

放大镜特效.rar

2017-10-11 19:07 上传

点击文件名下载附件

72.39 KB, 下载次数: 122

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2