本帖最后由 小鲁哥哥 于 2017-10-19 14:28 编辑
【黑马程序员济南】 前端与移动开发就业班笔记事件特效：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
| 
收藏
淘帖
踩
