[前端学习]js特效部分学习笔记,第一天

offset

  • 元素.offsetHeight获取元素的客观高度,返回值为数值没有单位,它获取到的包括:元素内容高度+上下padding+上下border
  • 元素.offsetWidth获取元素的客观宽度,返回值为数值没有单位,它获取到的包括:元素内容宽度+左右padding+左右border
  • offsetHeight|offsetWidth与style对象的区别
    • offset是只读属性,它可以获取到元素在页面中的宽高,但是不能设置
    • style.height或者style.width只能获取到行内样式,写在其他地方的样式不能获取,返回值是带单位的字符串。同时也可以设置值,设置在行内样式中。
    • 因此,offset一般用来获取元素的真实宽度和高度,而设置就用style对象
  • 元素.offsetParent 找到距离自身最近且有定位的节点。如果上一级没有定位,那么他会一直往上找,都找不到就返回body
  • 元素.offsetLeft计算从自身border左侧到offsetParent内边距左侧的距离,就是自身左边框最外侧offsetParent左内边距最外侧的距离,如果不好理解可用画图理解
  • 元素.offsetTop计算从自身border上侧到offsetParent内边距上侧的距离,就是自身上边框最外侧offsetParent上内边距最外侧的距离
    • 注意:计算时,元素自身不会计算margin,offsetParent不会计算border和margin,如果包含在内的没有设置就忽略不算
  • offsetLeft|offsetRight与style对象的区别
    • 前三点区别可以看上面,是一样的
    • 因为style是直接获取行内样式的值,所以你写多少边偏移值获取到的就是多少,但是如果没有该元素没有设置定位,它设置的边偏移值实际上是无效的,style不管这个,直接返回设置的值。offset获取的是页面客观值,因为设置无效,所以返回0
    • 获取左边偏移值或者上边偏移值,style对象获取时会把margin划入元素,整体来计算。而offset永远只会把内容内边距边框看作元素,整体来计算。
  • 总结,光用文字描述很难说清楚,一定要去看教案里的图示就很容易理解

几个常用Math方法

  • Math.ceil(数值) 向上取整,例如1.9返回2,1.1也返回2
  • Math.floor(数值) 向下取整,例如1.9返回1,1.1也返回1
  • Math.round(数值) 四舍五入,例如1.9返回2,1.1也返回1,1.5返回2
  • Math.abs(数值) 取绝对值

js匀速动画公式

  • 原理公式:当前位置 = 当前位置 + 移动距离
  • 在配合定时器实现动画时,定时器执行间隔最好是15毫秒,能保证动画帧率在60左右

完整轮播图案例总结

  • 总的来说,就是通过图片对应索引来控制移动距离。
  • 在轮播图案例中,索引使用得非常频繁,包括集合索引、自定义索引,用它们来乘以每张图片的宽度,就能获取需要移动的距离。
  • 自定义索引是用来记录左右按钮焦点图时当前的位置。集合索引用来实现点击数字按钮实现对应图片的切换。然后再调用动画效果函数就能实现大部分轮播图功能。
  • 另外还有一些小细节,这里就不作多说,这个案例非常重要,一定要多看几遍理解。

scroll

  • 元素.scrollWidth 获取元素内部内容的宽度
  • 元素.scrollHeight 获取元素内部内容的高度
  • 元素.scrollLeft 获取拖动X轴滚动条时,内容被卷去的左侧距离
  • 元素.scrollTop 获取拖动Y轴滚动条时,内容被卷去的顶侧距离
  • 获取浏览器页面被卷去距离兼容写法
    • 纵坐标三种:window.pageYOffset || document.documentElement.scrollTop||document.body.scrollTop
    • 横坐标三种:window.pageXOffset || document.documentElement.scrollLeft||document.body.scrollLeft

固定导航案例总结

  • 固定导航案例有两个重点
    • 一是用到了window.onscroll窗体滚动事件
    • 二是用到了scrollTop,通过卷去顶侧距离和实际模块高度来比较,判断什么时候设置导航栏的样式
  • 并且因为导航栏使用固定定位后,会出现不占位的情况,下方盒子会顶上来,所以在设置固定定位的同时,还要给下面的盒子设置padding或者margin来保证导航栏原位置的距离存在。

js缓动动画公式

  • step = (target - leader) / 10
  • leader = leader + step
  • 可以看到缓动动画和匀速动画,就是step的值有所出入。匀速动画step是一个定值,而缓动动画step是一个差值,刚开始很大,但随着它们差距越来越小,step就越来越小

访问属性的两种方式

  • 对象.style.width使用点语法访问属性是最基本的方式
  • 对象.style["width"] 使用中括号语法访问属性这种方式,更加灵活,但是注意内部传入变量是不需要双引号的,字符串才需要

获取样式的另一种方法

  • 通过style对象只能获取到行内样式,那么写在其他地方的样式怎么获取呢?
  • 主流浏览器使用的是window.getComputedStyle(元素对象,伪数组).样式名
  • ie6-8使用的是元素对象.currentStyle.样式名
  • 这两种方法获取到就是实际在元素上生效的样式,不分书写位置

client

  • 元素.clientWidth获取元素内部的高度
  • 元素.clientHeight获取元素内部的宽度
  • 它和scroll的区别,同样它们获取的都是盒子内部的高和宽(即不包括边框),但是scroll获取的是内容,就是说内容如果超出了盒子,它依然会计算。但client就只单纯获取盒子内部的padding和设置的高度。
  • 元素.clientTop获取顶部边框的高度,就是borderTop的粗细
  • 元素.clientLeft获取左边边框的宽度,就是borderLeftd粗细
  • client的top和left属性基本没有用,只做了解

获取页面可视区宽高

  • window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0获取页面可视区域的宽度
  • window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0获取页面可视区域的高度
  • 上面的写法是兼容了所有浏览器的写法,如果想要在页面大小发生改变的时候,动态获取新的可视区域宽高,需要使用window.onresize窗体大小发生改变事件来配合实现。

旋转木马案例总结

  • 在选择木马的案例中,我们要从之前案例的固定思维中跳出来,是移动整个ul元素,来实现里面每个li的轮播显示。但是在选择木马中,直接给li进行样式赋值来移动位置。
  • 实际上图片的移动就是给定位了的图片设置left和top值,这个概念一定要记住。所以这个案例中用到数组来里存放对象的形式,来保存每个li的样式属性键值对。通过操作每个对象的索引让每个li的样式变化,从而达到旋转的效果。
  • 最后再次用到了变量引入,来实现节流阀的功能。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,224评论 1 41
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,752评论 0 8
  • DOM 变化 如何确认浏览器是否支持 DOM 2 和 DOM 3 新增的模块:var supportsDOM2Co...
    云之外阅读 463评论 0 0
  • “你应该清楚他已经不记得你了,忘记了你们之间所有的事情,既然如此,你就别再缠着他了,你们,不可能在一起,我也不会允...
    Ba糖豆Aa阅读 261评论 0 0
  • 做为一个爱读书的人,读书的前提是得有书。 从人类发明文字至今,世上可读的书太多了,你不可能一下子把所有的书都拿来读...
    陈晓莲阅读 935评论 3 11