PC端网页特效

发布于:2024-05-18 ⋅ 阅读:(152) ⋅ 点赞:(0)

一、元素偏移量 offset 系列

1、offset 概述

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

获得元素距离带有定位父元素的位置

获得元素自身的大小(宽度高度)

注意: 返回的数值都不带单位

2、offset 与 style 区别

        拖动的模态框案例

        仿京东放大镜效果

二、元素可视区 client 系列

client 翻译过来就是 客户端,我们使用client 系列的相关属性来获取元素可视区的相关信息。通过client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

2、立即执行函数

不需要调用,立即能够自己执行的函数

主要作用:创建了一个独立的作用域。避免了命名冲突问题

        写法:(function() { }()    或者(function(){ }());

淘宝flexible.JS源码分析之核心原理

三、元素滚动 scroll 系列

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

2、页面被卷去的头部

如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏掉的高度,我们就称为页面被卷去的头部。滚动条在滚动时会触发onscroll事件

        仿淘宝固定侧边栏案例

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

三大系列总结

主要用法:

1、offset 系列经常用于获得元素位置   offsetLeft  offsetTop

2、client 经常用于获取元素大小  clientWidth clientHeight

3、scroll经常用于获取滚动距离  scrollTop  scrollLeft

4、注意页面滚动的距离通过 window.pageXOffset  获得

mouseenter  和  mouseover 的区别

mouseenter 鼠标事件

当鼠标移动到元素上时就会触发 mouseenter 事件

类似 mouseover,它们两者之间的差别是

mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发。 mouseenter 只会经过自身盒子触发

之所以这样,是因为mouseenter 不会冒泡

跟 mouseenter 搭配鼠标离开 mouseleave 同样不会冒泡

四、动画函数封装

1、动画实现原理

核心原理:通过定时器 setlnterval()不断移动盒子位置

实现步骤:

1、获得盒子当前位置

2、让盒子在当前位置加上一个移动距离

3、利用定时器不断重复这个操作

4、加一个结束定时的条件

5、注意此元素需要添加定位,才能使用 element.style.left

2、动画函数简单封装

注意函数需要传递两个参数,动画对象移动到的距离

3、动画函数给不同元素记录不同定时器

如果多个元素都使用这个动画函数,每次都要 var 声明定时器。我们可以给不同的元素使用不同的定时器(自己专门用自己的定时器)

核心原理:利用JS是一门动态语言,可以很方便的给当前对象添加属性

4、缓动效果原理

缓动就是让元素运动速度有变化,最常见的是让速度慢慢停下来

思路:

1、让盒子每次移动距离慢慢变小,速度就会慢慢落下来

2、核心算法:(目标值- 现在的位置)/ 10      作为,每次移动的距离  步长

3、停止条件:让当前盒子位置等于目标位置就停止定时器

4、注意步长值需要取整

var step = (target - obj.offsetLeft) / 10;

step = step >0 ? Math.ceil(step) : Math.floor(step);

匀速动画是当前的位置 + 固定的值

缓动动画是 当前位置 + 变化的值(步长公式)

6、动画函数添加回调函数

回调函数原理: 函数可以作为一个参数。将这个函数作为参数传到另一个函数里面,当那个函数执行完之后,在执行传进去的这个函数,这个过程叫回调

回调函数写的位置:定时器结束的位置。

7、动画函数封装到单独JS文件里面

1、单独建一个JS文件,使用时引用这个文件

五、常见网页特效案例

网页轮播图

鼠标经过显示隐藏左右按钮

动态生成小圆圈

       

  小圆圈排他思想        这句话放在for 循环里面

点击小圆圈滚动图片

此时用到animate 动画函数,将JS文件引入(注意:因为index.js 依赖animate.js 所以animate.js 要写到 index.js 上面)

注意是ul移动而不是小li

滚动图片的核心算法: 点击某个小圆圈,就让图片滚动 小圆圈的索引号乘以图片的宽度作为ul移动距离。

右侧按钮无缝滚动        在for循环外面

克隆第一张图片

放在ul 最后面

var first = ul.children[0].cloneNode(true);

ul.appendChild(first);

小圆圈跟随右侧按钮一起变化

当我们点击了某个小li 就要把这个小li 的索引号给num 

num = index 

把小li的索引号给 circle 

circle = index ;

左侧按钮功能制作

自动播放轮播图

clearInterval (timer);

timer=null;//清除定时器变量

timer = setInterval(function(){

        //手动调用点击事件

        arrow-r.click();

},2000);

5、1 节流阀

防止轮播图按钮连续点击造成播放过快。

节流阀目的:当上一个函数动画内容执行完毕,再去执行下一个函数动画,让事件无法连续触发

核心实现思路:利用回调函数,添加一个变量来控制,锁住函数和解锁函数。

开始设置一个变量 var flag = true;

if (flag){flag = false;do something} 关闭水龙头

利用回调函数 动画执行完毕,flag = true 打开水龙头

返回顶部案例

筋斗云案例