本帖最后由 小鲁哥哥 于 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
|