A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 小鲁哥哥 于 2017-10-19 14:28 编辑

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

事件对象
在触发事件时,会产生一个事件对象event,这个对象中包含着与事件有关的信息。所有浏览器都支持event对象,但支持的方式不同。
事件对象的兼容性写法
var event = event || window.event;
1.png

三个重要座标
clientX  clientY
当前窗口的左上角为基准点
2.png
pageX   pageY
以当前文档的左上角为基准点
3.png
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
当前屏幕的左上角为基准点
4.png

理解了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});
    };


放大镜特效
5.png
6.png
制作方法:
鼠标经过显示盒子
鼠标经过small,让maskbig显示;鼠标离开small,让maskbig隐藏。
鼠标经过遮罩跟随
small绑定鼠标移动事件
获取鼠标在small 内的坐标
计算鼠标在盒子中的座标(鼠标pageX-box到页面左侧的距离;鼠标pageY-box到页面顶部的距离)
然后赋值给masktopleft(位置是按照左上角算的,所以top值要减去高度的一半,left值要减去宽度的一半)
限定遮罩运动范围
x 最小为0;最大为200,这个200 small的宽度 - mask的宽度(mask可以向右移动的最大值)

7.png
按比例显示大图片

8.png
小盒子移动,大盒子要根据比例来移动,比例为:
大图 大盒子 里移动的距离 / 小黄 小图 里移动的距离
(大图片 - 大盒子 / (小盒子 - 小遮罩
800 - 400 / 350 - 175
因为是反方向移动 计算时记得加负号。
代码见附件。

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

放大镜特效.rar

72.39 KB, 下载次数: 96

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马