今天继续做案例,昨天就看了三集...想要看完真是遥遥无期,我真的太懒了...间歇性踌躇满志,持续性懒惰,达咩!!!
京东放大镜案例:
唉,这玩意真的把我弄晕了快...太多数学题了...晕倒
第二天早上起来重做了一遍,现在终于弄清楚了!
我们先来看看结构:
样式:
JS:
先获取元素:
先搞定两个简单的事件,鼠标在预览图上时就显示遮罩层和大图,否则隐藏
这个地方一定要注意是给preview-img这个盒子加事件而不是preview下面的那个img,因为mask不在img里,无法捕获冒泡,所以当图片上遮罩出现时,就会一直频闪.而加在preview-img上的话就可以冒泡,鼠标放在图片上或者遮罩层上都会有效果.
接下来就是比较困难的地方了:
下面得到的是遮罩层距预览图左侧和顶部的距离
maskX就是遮罩层在盒子中的left值,是怎么得来的呢,我来分析一下:
所以说要减去mask本身宽度和高度的一半:
现在我们的遮罩层实现了移动,但是这样的话当我们鼠标到了边缘的时候,整个遮罩层也会跟着出去怎么办呢?
这个时候我们要加一些判断条件
最后由于方向是反的,当我们的遮罩层向右移动时,图片应该向左走,所以要在bigX和bigY之前加上负号
元素可视区client系列
client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息,通过client系列的相关属可以动态的获取该元素的边框大小,元素大小等.
立即执行函数 ( function ( ) { } ) ( )
主要作用:创建一个独立的作用域,里面的变量都是局部变量.
过去我们写的函数,需要调用才会开始执行,但是立即执行函数就不同,无需调用就能自己执行.
两种写法:
- (function( ){ })( ); 相当于用一对小括号将一个匿名函数包起来,最后的括号就是调用.
- (function( ){ }( )); 里面的function( ){ }就是一个函数,后面的()就是调用,但是直接写会报错,所以用一个括号包含起来,先执行里面的函数.
1.
2.
但是我们会发现有一个报错:
这是因为两个函数之间没有用分号,加了分号就能解决了,表示两个独立的立即执行函数.
现在老师在带我们分析淘宝的源码,里面又有很多新知识:
pageshow: 是我们重新加载页面触发的事件
但是我试了一下发现火狐已经没有这个问题了
元素滚动scroll系列属性
scroll翻译过来就是滚动的,我们使用scroll系列的相关属性可以动态的得到该元素的大小,滚动距离等.
常见属性:
我们会发现scrollWidth和clientWidth很相似,但其实他们有本质的区别:
如果我们放一个盒子,里面装着文字,那么输出的scrollWidth就是200:
但是如果我们将内容增加至很多行,超出盒子的范围:
所以这个的高度是自身实际的高度.
我们现在给这个盒子加一个滚动条(div {overflow: auto}),看看scrollTop的用法:
我们现在添加一个事件看看scrollTop打印出来的是什么:
可见scrollTop就是我们盒子顶部和文字内容的上沿之间的距离,被卷走多少就是多少
画个图帮助理解下:
又到了案例时间:
首先看看结构:
样式:
目前的样子:
我们现在的需求是,我们的页面在一开始是绝对定位的,但是当我们屏幕滚动到banner以上时,slider侧边栏就开始变成固定定位,当我们再往下滑到main部分时,slider里面的返回顶部会显示出来:
JS部分:
获取元素
看看效果是怎样的吧:
不过好的方法总是有兼容性问题的:
三大系列总结:
