JavaScript 常见PC端网页特效

1. 元素偏移量 offset

1.1 offset 概述

offset翻译过来就是偏移量,使用offset系列相关属性可以动态得到该元素的位置(偏移)、大小等

  1. 获得元素距离带有定位父元素的位置
  2. 获得元素自身的大小(宽度高度)
  3. 返回的数值都不带单位

1.2 offset 系列常用属性

1.3 offset 与 style 区别

2. 元素可视区 client

2.1 client 概述

client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息

通过client系列的相关属性可以动态得到该元素的边框大小、元素大小等

2.2 client 系列常用属性

3. 元素滚动 scroll

3.1 scroll 概述

scroll翻译过来就是滚动,使用scroll系列的相关属性可以动态得到该元素的大小、滚动距离等

3.2 scroll 系列属性

3.3 页面被卷去的头部

如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条

当滚动条向下滚动时,页面上面被隐藏掉的高度,我们就称为页面被卷去的头部

滚动条在滚动时会触发onscroll事件

3.4 页面被卷去的头部兼容性解决方案

function getScroll() {
    return {
        left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
        top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
}
// 使用的时候 getScroll().left

4. 三大系列总结

主要用法:

  1. offset系列 经常用于获得元素位置offsetLeftoffsetTop
  2. client经常用于获取元素大小clientWidthclientHeight
  3. scroll经常用于获取滚动距离scrollTopscrollLeft
  4. 注意页面滚动的距离通过window.pageXOffset获得

[mouseenter 和 mouseover 的区别]

5. 动画函数封装

[缓动动画函数封装]

6. 常见网页特效案例

  1. [图片跟随鼠标]
  2. [网页轮播图]
  3. [返回顶部]
  4. [拖动对话框效果]
  5. [图片放大预览效果]
(0)

相关推荐

  • 网页直播源码,PC端开发与移动端开发

    普通PC端开发与移动端开发是什么?普通PC端开发,我理解就是你拿电脑打开的网页都算.移动端前端开发工程师就是做手机网页的前端开发工程师. 网页版直播源码开发我们需要考虑什么呢? ie6-11,fire ...

  • 今日头条正式上线PC端搜索,头条搜索开始发力了?

    这两天在电脑端打开今日头条,突然发现首页顶部多了一个搜索的板块. 进一步了解才知道,原来字节跳动在2021年4月29号正式上线了头条搜索pc版. 头条搜索其实已经出来了一段时间了,2019年8月10日 ...

  • 字节跳动(今日头条)已悄悄上线了PC端搜索

    今日头条PC端检索界面 以检索"辉哥视界"为例头条做的真的很简约 不可否认百度是国内搜索的老大,但是百度如今面临的对手又增加了一位全角度对手--今日头条.今日头条从之前的移动端检索 ...

  • 微信电脑版PC端怎样通过靠谱助手来添加好友

    目前微信支持IOS.Android.S60V3.S60V5.Windows Phone五种手机操作系统,如您下载后无法正常安装使用,载入数据失败,可能是由以下原因导致. 由于网络原因软件数据包在下载过 ...

  • Epic开始卖软件?PC端应用分发或许还得看微软

    5月3日,Epic Games与苹果的反垄断诉讼将正式进入庭审阶段,而本案的结果也或将直接决定应用商店经济的未来.但从目前包括现有文件.材料和证人证词来看,Epic Games方面明显占据了一定的优势 ...

  • 五一小长假十款必备的款PC端游戏

    现在是五一假期时间,我们有五天的小长假,有的人会去旅行,但对于游戏爱好者们来说,肯定会花掉大部分时间来打游戏,那你们都想好玩什么游戏了吗?本期这十款PC端游戏,正适合在假期中畅玩,一起来看看吧. &l ...

  • 今日头条PC端改版上线搜索功能,更像一个搜索引擎平台了!(头条搜索seo)

    今日头条移动搜索早就上线了,用户体验和界面还不错.不过PC端一直没有对外开放,只能搜索站内的内容.作者首发公众号宋九九发现pc端可以使用移动搜索功能,但是搜索界面页面是移动端的,在pc端不友好. 今日 ...

  • 「图新地球」电脑桌面端具备功能(PC端搜...

    「图新地球」电脑桌面端具备功能(PC端搜图新地球,手机端搜LSV): 1.轻便:绿色免安装,解压就用 2.免费:纯免费的国产三维地球软件 3.同时支持多种知名地图 支持天地图地图.天地图卫星影像.天地 ...

  • pc端的视频剪辑软件有哪些,适合新手快速上手!

    在PC端剪辑视频必不可少的剪辑软件就是爱剪辑了!小编本人刚接触视频剪辑时,就是用的这款软件!爱剪辑凭借其专业.方便又快捷的剪辑操作,在国内拥有较高的知名度,非常适合新手! 一.剪辑分割视频 在电脑端打 ...