重点理解clientX和offsetX区别,和面向对象编程思想
附上js代码
window.onload = function () {
var $ = function (name) {
return document.querySelector(name);
}
var small_pic = $(".small_pic"), slider = $(".slider"), big_pic = $(".big_pic"), big_img = $(".big_img");
var test=$(".test"),text=$(".text");
small_pic.onmousemove = function (event) {
slider.style.display = "block";
big_pic.style.display = "block";
// var left =event.offsetX;
// var top =event.offsetY;
// !!!!这里我会纠结于为啥不使用offsetX,因为当前情况下offsetX是鼠标相对于slider左侧的距离,而非相对于small_pic左侧的距离
var left = event.clientX - slider.offsetWidth / 2;
//当前鼠标距离浏览器左边缘的位置-滑块的宽度的一半(前提是当前外部盒子没有设置margin等,左侧和浏览器左侧是贴合的,如果有margin-left,需要event.clientX-mL值)
var top = event.clientY - slider.offsetHeight / 2;
var maxL = small_pic.offsetWidth - slider.offsetWidth ;
var maxT = small_pic.offsetHeight - slider.offsetHeight ;
text.innerHTML=str;
if (left < 0) {
left = 0;
} else if (left >= maxL) {
left = maxL
};
if (top < 0) {
top = 0;
} else if (top >= maxT) {
top = maxT
}
slider.style.left = left + 'px';
slider.style.top = top + 'px';
big_img.style.left = -(left * 2) + 'px'; //右侧大图的距离
big_img.style.top = -(top * 2) + 'px';
}
small_pic.onmouseleave = function (e) {
slider.style.display = "none";
big_pic.style.display = "none";
}
}
使用面向对象方式编程:这样的好处是如果一些功能的代码比较多,可以单独写一个js,引入之后去调用内部方法,也可以增加复用性
// var obj={
// init:function(){
// 初始化
// },
// bind:function(){
// 事件绑定
// },
// fun:function(){
// 选择器的封装
// }
// }
var obj = {
getDom: function (name) {
return document.querySelector(name);
},
init: function () {
var $ = this.getDom;
var small_pic = $(".small_pic"), slider = $(".slider"), big_pic = $(".big_pic"), big_img = $(".big_img");
this.mouseMove(small_pic,slider,big_pic,big_img);
this.mouseOut(small_pic,slider,big_img);
},
mouseMove: function (small_pic,slider,big_pic,big_img) {
small_pic.onmousemove = function (event) {
slider.style.display = "block";
big_pic.style.display = "block";
// var left =event.offsetX;
// var top =event.offsetY;
var left = event.clientX - 100 - slider.offsetWidth / 2;//当前鼠标距离浏览器的位置-
var top = event.clientY - slider.offsetHeight / 2;
var maxL = small_pic.offsetWidth - slider.offsetWidth;
var maxT = small_pic.offsetHeight - slider.offsetHeight;
if (left < 0) {
left = 0;
} else if (left >= maxL) {
left = maxL
};
if (top < 0) {
top = 0;
} else if (top >= maxT) {
top = maxT
}
slider.style.left = left + 'px';
slider.style.top = top + 'px';
big_img.style.left = -(left * 2) + 'px'; //右侧大图的距离
big_img.style.top = -(top * 2) + 'px';
}
},
mouseOut: function (small_pic,slider,big_pic) {
small_pic.onmouseleave = function (e) {
slider.style.display = "none";
big_pic.style.display = "none";
}
}
}
window.onload = function () {
obj.init();
}