坚持#第90天~感恩之心、利他之心！

2016-11-8
完成了：
（1）你的梦想是什么？变得更优秀！
（2）今天你为你的梦想做了什么？感恩之心、利他之心！
（3）你是否离你的梦想更近了？是的！
（4）完成了考试复习一部分；
（5）看了30天；
（6）淘宝放大镜项目开干了并完成了
（7）收获:
怎么让小盒子在大盒子里面居中？
一种是定位,然后上右下左全为0,margin:auto;
另一种是大盒子里写display:flex;小盒子里写margin:auto;即可
------------------------------------------------------------------
遮罩层
<span></span>是行内元素,要变为块级元素display:block
------------------------------------------------------------------
鼠标移动上去会出现一个十字架
cursor:move;
------------------------------------------------------------------
封装document.getElementById();
function dom(id){return document.getElementById(id);}
------------------------------------------------------------------
给这个div绑定一个滑入事件和滑出以及移动事件
imgBox.onmouseover = function(){}
imgBox.onmouseout = function(){}
imgBox.onmousemove = function(){}
------------------------------------------------------------------
鼠标坐标,轻而易举,一个e搞定imgBox.onmousemove = function(e){}
mouseEvent里面的e,再找到offsetX和offsetY用e.他就行了
e不行改为event,因为有的只认识event而不认识e
------------------------------------------------------------------
e.clientX是距离浏览器的距离,this.offsetLeft是当前这个大盒子相对于浏览器的偏移量,它始终是不变的
e.clientX - this.offsetLeft = e.offsetX
为什么用e.clientX - this.offsetLeft而不直接用e.offsetX
因为这是为了解决跳闪问题
------------------------------------------------------------------
drags.style.left = x+"px"; //要有单位啊
------------------------------------------------------------------
在鼠标移动的时候可以打印出拖拽div的宽度高度drags.offsetWidth,drags.offsetHeight
------------------------------------------------------------------
this.offsetWidth是当前这个div的宽度
------------------------------------------------------------------
/*if(x>=0 && x<=232){
drags.style.left = x+"px"; //要有单位啊
}
if(y>=0 && y<=232){
drags.style.top = y+"px";
}该方法会有BUG出现,记住:有BUG就要换一个思路而达到相同的效果,就是不让拖拽区域出去就行了
下面的方法没有BUG了,简直和淘宝的一模一样*/
if(x<0){
x=0;
}
if(x>232){
x=232;
}
if(y<0){
y=0;
}
if(y>232){
y=232;
}
drags.style.left = x+"px"; //要有单位啊
drags.style.top = y+"px";
------------------------------------------------------------------
淘宝里的蓝色拖拽放大区域的图片如何另存为？
F12检查,检查的左上角有一个东西点它再点蓝色拖拽区域(放大的图片也同理可得)。
------------------------------------------------------------------
overflow:hidden;用于大图片多出的部分隐藏起来
------------------------------------------------------------------
图片放大联动:
给图片img起个名字叫做id="zoom",化妆img{position:absolute;}让它有x,y的移动效果
获取该id
zoom.style.left = x+"px"; //要有单位啊
zoom.style.top = y+"px";
哇撒！给图片定位！position-background嘛！！！
有个坑:与鼠标移动的坐标反着来的x,y取负数
不精准,滑到底部了还没显示出来底部
联动:
因为两张图片不一样大,需得成比例
就如同100米的10%和200米的10%是不一样的
//scale是比例的意思,比例为x/232,要*(图片的原大小(多出来的部分被隐藏了)-装图片的盒子)
var scaleX = x/232;
var scaleY = y/232;
var zoomX = scaleX*(zoom.offsetWidth-bigImg.offsetWidth);
var zoomY = scaleY*(zoom.offsetHeight-bigImg.offsetHeight);
zoom.style.left = -zoomX+"px"; //要有单位啊
zoom.style.top = -zoomY+"px";
------------------------------------------------------------------