【Web API】PC端网页特效

news/2024/7/19 12:55:26 标签: js, javascript, webAPI

补充内容

▊ 元素偏移量offset

使用offset可动态的得到元素的位置(偏移)、大小等

注：偏移是指相对于带有定位的父元素；大小是指自身整个盒子的宽高；返回值都不带单位

javascript">box.offsetTop			// 上偏移位置
box.offsetLeft			// 左偏移位置
box.offsetWidth			// 宽
box.offsetHeight		// 高
box.offsetParent		// 返回带有定位的父亲

offsetWidth和style.width的区别（height同理）

  1. offset可以得到任意样式表中的样式值；style.width只能得到行内样式表中的样式值（内嵌式css不行！！！）
  2. offset返回的是没有单位的数字型；style.width返回的带有单位的字符串
  3. offsetWidth是整个盒子(width+padding+border)；style.width得到的就是width
  4. offsetWidth只读，不能赋值修改；style.width可读可写
  5. 因此：offsetWidth适合获取元素的位置和大小；style.width适合对元素进行修改

 
▊ 元素可视区client

使用client可动态的得到元素的边框大小、元素大小

javascript">box.clientTop				// 上边框的大小(很不常用)
box.clientLeft				// 左边框的大小
box.clientWidth				// 返回宽度(包括padding和自身width，不包括边框border)
box.clientHeight			// 返回宽度(包括padding和自身heigth，不包括边框border)

 
▊ 元素滚动scroll

使用scroll可以动态的得到元素的大小、滚动距离

javascript">box.scrollTop				// 被卷去的上方距离
box.scrollLeft				// 被卷去的左侧距离
box.scrollWidth				// 返回宽度(包括padding，不包括border)
box.scrollHeight			// 返回高度(包括padding，不包括border)

// 与clientWidth和clientHeigth的区别是，返回的内容实际的宽高，包括超出的部分

// 注意区分———页面被卷去的头部是pageYOffset；盒子中被卷去的头部是scrollTop（同理宽度）

 
▊ 三个系列的总结

在获取元素大小方面：offset获取的是包含border的；client和scroll不包含border的；都包含padding；scroll还包含超出的内容

主要用法：offsetTop、offsetLeft用来获取位置偏移；offsetWidth、offsetHeight(clientWidth、clientHeight)用来获取元素大小；scrollTop、scrollLeft用来获取滚动距离；页面滚动距离用window.pageXOffset、window.pageYOffset；其他的几乎不用

上面的主要用法是重点 ! ! !

 
▊ 补充内容——立即执行函数

javascript">// 不需要调用，立即执行
// 写法：
(function() {})()			// 其实这样最容易理解（其实就是声明后立即传入了参数>_<）
(function() {}())			// 当然这样也可以

(function(a, b) {
    console.log(a + b);
})(2, 3);						// 输出5
(function(a, b) {
    console.log(a + b);
}(2, 3));						// 输出5

// ☀ 主要作用：每个立即执行函数都创建了一个独立的作用域，这避免了命名冲突的问题

 
▊ 补充内容——mouseover和mouseenter的区别

mouseover经过自身盒子会触发，经过子盒子也会触发；mouseenter只有经过自身盒子会触发

mouseover经过自身盒子的触发，实际上子盒子冒泡的结果；

也就是说，mouseover冒泡，mouseenter不冒泡（mouseleave也不冒泡）

 
▊ 动画函数封装

动画实现的核心原理是：通过定时器 setInterval() 不断移动盒子的位置

javascript">// 简单动画函数的封装：参数有 目标对象obj，目标位置target
function anime(obj, target) {
    clearInterval(obj.timer); 					// 清除以前的定时器，防止元素有多个定时器(timer越来越多，元素无限加速...)
    obj.timer = setInterval(function() { 		// 给不同的对象指向了不同的定时器(节约了资源，避免了命名歧义)
        if (obj.offsetLeft >= target) {
            clearInterval(obj.timer);
        } else {
            obj.style.left = obj.offsetLeft + 1 + 'px';
        }
    }, 30);
}

// 优化：渐慢(通过修改步长实现) + 可返回(通过步长的负值实现反向)
function anime(obj, target) {
    clearInterval(obj.timer); 
    obj.timer = setInterval(function() { 
        var step = (target - obj.offsetLeft) / 10; 					// 通过设置可变步长，巧妙实现了渐慢的效果
        step = step > 0 ? Math.ceil(step) : Math.floor(step); 		// 避免了取到0后无法到达指定位置的bug(重难点)
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
        } else {
            obj.style.left = obj.offsetLeft + step + 'px';
        }
    }, 30);
}

// 再添加功能：添加回调函数
// 其实很简单，这样声明动画函数，然后传入一个函数实参(匿名函数or函数名)就行了：
function anime(obj, target, callback){
	if(callback){						// 别忘啦，JS允许传入任意数量的实参，也就是说它自带重载(我们可以使用回调函数)
		callback();						// 通常这句话写在clearInteval(timer)的后面———在动画结束时调用这个效果
	}
	// 一种更优雅的写法
	callback && callback();
}

上面封装的那个动画函数虽说没有css丝滑，但绝对比你想象中的经典且强大

在后面的PC端网页特效案例会经常用到且效果极佳

 
 
 

 

网页端特效

 

❶ 获取鼠标点击位置
在这里插入图片描述

javascript">var box = document.querySelector('.box');
box.addEventListener('click', function(e) {
	// 巧妙使用了一个减法（本身不难，但需要想到 ! ! !）
	var dx = e.pageX - this.offsetLeft;	
	var dy = e.pageY - this.offsetTop;
})

 

❷ 拖动盒子
在这里插入图片描述

javascript">// 核心思路：分为三步：鼠标按下--鼠标移动--鼠标弹起
// 除了鼠标按下绑定在box上，其他两个事件都绑定在document上 !

var box = document.querySelector('.box');
box.addEventListener('mousedown', function(e) {
    var dx = e.pageX - box.offsetLeft; 							// 鼠标按下，获得鼠标相对于盒子的位置（这个位置在拖动时是不变量）
    var dy = e.pageY - box.offsetTop;
    // 鼠标移动和鼠标弹起的事件，一定要位于鼠标按下内!!!
    document.addEventListener('mousemove', move); 				// 鼠标移动，通过计算(鼠标咋页面的位置-鼠标相对盒子的位置)给盒子的left和top赋值
    document.addEventListener('mouseup', function() { 			// 鼠标弹起，移除鼠标移动事件
            document.removeEventListener('mousemove', move);
        })
        
    function move(e) { 		// 鼠标移动时，对盒子位置的计算
        box.style.left = e.pageX - dx + 'px';
        box.style.top = e.pageY - dy + 'px';
    }
})

 

❸ 淘宝侧边栏案例

javascript">// 需求是：本来侧边栏是随主体而滚动的，到了某处时固定

// 关键点是获得页面上方被卷曲的值，当该值达到某个数值是，将绝对定位(absolute)改为固定定位(fixed)
// 再复习一下什么是绝对定位：不是说一直固定在页面某处(那是固定定位)，也会随着页面滚动而滚动，不要曲解“绝对”二字

var bar = document.querySelector('.bar');
document.addEventListener('scroll', function() { 	// 滚动事件时document的滚动，事件源是document
    if (window.pageYOffset >= 300) {				// 页面被卷去的头部是pageYOffset；盒子中被卷去的头部是scrollTop；注意区分
        bar.style.position = 'fixed';
    } else {
        bar.style.position = 'absolute';
    }
})

// 其实还有点小bug，改为固定定位的同时还要给固定定位设置fixed，这可以利用offsetTop经过简单的计算实现

 

❹ 导航栏特效（选中区域的滑动与固定）
在这里插入图片描述

javascript">// html和css很简单，ul>li*6并且有一个绝对定位的.cloud；它们属于.box大盒子

// 核心思路：
// .box相对定位后，使用offsetLeft作为cloud移动的目标位置
// 上面封装的anime位移动画函数派上了大用场

window.addEventListener('load', function() {
    var box = document.querySelector('.box');
    var cloud = document.querySelector('.cloud');
    var lists = document.querySelectorAll('li');
    var current = 0; 		// current作为起始位置
    for (var i = 0; i < lists.length; i++) {
        lists[i].addEventListener('mouseenter', function() {
            anime(cloud, this.offsetLeft);				 // 鼠标经过就移动cloud
        })
        lists[i].addEventListener('mouseleave', function() {
            anime(cloud, current); 						// 鼠标离开，cloud回到起始位置
        })
        lists[i].addEventListener('click', function() {
            current = this.offsetLeft; 					// 鼠标点击，cloud起始位置更新为此处
        })
    }
})

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
☀ Loli & JS

♫ Suki


http://www.niftyadmin.cn/n/1330539.html

相关文章

SQL语句，数据库配置，JDBC使用

SQL语句，数据库配置，JDBC使用

数据库学习&#xff1a;https://blog.csdn.net/weixin_39778570/article/details/95066091 Java(持续更新):https://blog.csdn.net/weixin_39778570/article/details/94667501 下载好SQL服务&#xff0c;并启动&#xff0c;下载好SQLyog,打开SQLyog&#xff0c;新建一个数据库…
阅读更多...
【LeetCode】Sama的个人记录_20

【LeetCode】Sama的个人记录_20

【Q1300】(md) 转变数组后最接近目标值的数组和 给你一个整数数组 arr 和一个目标值 target &#xff0c;请你返回一个整数 value &#xff0c;使得将数组中所有大于 value 的值变成 value 后&#xff0c;数组的和最接近 target &#xff08;最接近表示两者之差的绝对值最小&…
阅读更多...
【SQL Server】还一次数据库练习——题目+思路+答案

【SQL Server】还一次数据库练习——题目+思路+答案

第一次练习&#xff1a;【SQL Server】一次数据库练习——题目思路答案 第二次练习&#xff1a;【SQL Server】又次数据库练习——题目思路答案 第三次练习&#xff1a;【SQL Server】再次数据库练习——题目思路答案 这次很短&#xff0c;也是此阶段的最后一次 >_<…
阅读更多...
通信技术制约物联网的发展

通信技术制约物联网的发展

通信可以说是物联网的基础&#xff0c;无论是近距离无线传输技术还是移动通信技术&#xff0c;都能影响物联网的发展。 随着时代进步和发展&#xff0c;社会逐步进入互联网&#xff0c;各类传感器采集数据越来越丰富&#xff0c;大数据应用随之而来&#xff0c;人们考虑把各类…
阅读更多...
【LeetCode】Sama的个人记录_21

【LeetCode】Sama的个人记录_21

【Q1014】(md) 最佳观光组合 给定正整数数组 A&#xff0c;A[i] 表示第 i 个观光景点的评分&#xff0c;并且两个景点 i 和 j 之间的距离为 j - i。 一对景点&#xff08;i < j&#xff09;组成的观光组合的得分为&#xff08;A[i] A[j] i - j&#xff09;&#xff1a…
阅读更多...
选购地磁传感器应避免哪些坑

选购地磁传感器应避免哪些坑

无线地磁传感器可以说是停车系统比较常用的传感器&#xff0c;可以精确检测车位信息&#xff0c;但是不同的厂家生产的传感器也有区别&#xff0c;那我们在采购地磁传感器的时候应当注意什么呢&#xff1f;如何避免买到不合适的传感器&#xff1f; &#xff08;1&#xff09;了…
阅读更多...
【LeetCode】Sama的个人记录_22

【LeetCode】Sama的个人记录_22

【Q44】(hd) 通配符匹配 给定一个字符串 (s) 和一个字符模式 &#xff0c;实现一个支持 ‘?’ 和 ‘*’ 的通配符匹配。 ‘?’ 可以匹配任何单个字符。 ‘*’ 可以匹配任意字符串&#xff08;包括空字符串&#xff09;。 两个字符串完全匹配才算匹配成功。 说明:    …
阅读更多...
智慧农业系统全程无人化作业

智慧农业系统全程无人化作业

目前农村人员越来越少&#xff0c;从事农业活动的人员也越来越少&#xff0c;并且年龄普遍偏大&#xff0c;大部分年轻人都到大城市去打工&#xff0c;很少从事农业生产。这样会导致农村的生产力下降&#xff0c;当然我们要从根本解决这个问题&#xff0c;就要提高生产力&#…
阅读更多...
最新文章

Copyright @ 2022~2023