- 博客(13)
- 收藏
- 关注
RSS订阅原创 缓慢动画效果
原理1.让盒子每次移动的距离慢慢变小，速度就会慢下来2.核心算法：（目标值 - 现在的位置）/10 作为每次移动的步长3.停止条件：让当前的盒子位置等于目标位置就停止
2022-05-04 16:00:19
388
原创 动画函数封装
<div></div> <script> //封装函数 function animate(obj, target) { //添加两个参数 obj和target //添加定时器 var timer = setInterval(function() { if (obj.offsetLeft >= target) { .
2022-05-04 15:49:23
97
原创 动画实现原理
核心原理：通过定时器setinterval()不断移动盒子位置实现步骤1.获得盒子当前位置2.让盒子在当前位置加上移动距离3.利用定时器不断重复这个操作4.加一个结束定时器的条件5.注意此元素需要添加定位才能使用element.style.left...
2022-05-04 15:41:30
136
原创 mouseover和mouseenter
mouseover鼠标经过自身盒子会触发，经过子盒子也会触发mouseenter鼠标只会经过自身盒子触发，经过子盒子不会触发，所以不会有冒泡mouseleave鼠标离开也是只经过自身触发，同样不会冒泡
2022-05-04 15:17:54
349
原创 元素滚动Scroll系列
scroll系列的相关属性可以动态的得到该元素的大小、滚动距离scroll系列属性 作用 element.scrollTop 返回被卷去的上侧距离，返回值不带单位 element.scrollLeft 返回被卷去的左侧距离，返回值不带单位 element.scrollWidth 返回自身实际的宽度，不含边框，返回值不带单位 element.scrollTop 返回自身实际的高度，不含边框，返回值不带单位 页面被卷去的头部距离：window.pageYof
2022-05-04 15:13:08
235
原创 Load和Pageshow事件
下面三种情况都会刷新页面都会触发load事件1 a标签的超链接 2 F5或者刷新按钮 3 前进后退按钮 但是火狐中有个特点‘往返缓存’，这个缓存中不仅保存着页面数据，还保存了DOM和Javascript的状态，实际上是将整个页面都保存在了内存里。 所以此时后退按钮不能刷新页面这时需要使用pageshow事件触发，这个事件在页面显示时触发，无论页面是否来自缓存，再重新加载页面中，pageshow会在load事件触发后触发；根据事件对象中的persisted来判断是否是缓存
2022-05-04 14:13:14
1312
原创 offset与style区别
offset style1. offset可以得到任意样式表中样式值 1. style只能得到行内样式表中的样式值2. offset系列获得的数值是没有单位的 2. style.width获得的是带有单位的字符串3. offsetWidth包含padding+border+width 3.style获得不包含padding和border的值4. o...
2022-05-02 17:37:41
1172
原创 this指向性
1.全局作用域或者普通函数中this指向全局对象window（注意：定时器里面的this指向window）2.方法调用中谁调用this指向谁3.构造函数中this指向构造函数实例var o ={ sayHi:function() { console.log(this);//这个this指向的是o对象 } }...
2022-04-28 21:51:59
66
原创 声明函数的方法
声明函数的两种方法1.利用函数关键字自定义函数（命名函数）function fn() {};fn();2.函数表达式（匿名函数）var fun = function() {};fun();注意（1）fun是变量名不是函数名（2）函数表达式声明方式和声明变量的方式差不多，只不过变量里面存的是值函数表达式里面存的是函数（3）函数表达式也可以传递参数...
2022-04-27 22:54:10
3204
原创 简单制作下拉图
<ul class="xiala"> <li> <a href="">社区</a> <ul> <li>咨询</li> <li>咨询</li> <li>咨询</li> </ul> ..
2022-04-21 00:18:41
241
原创 第一次练习tab键切换
<script> //首先获取元素 var lis = document.querySelector('.big-top').querySelectorAll('li'); //获取元素 var ps = document.querySelector('.big-bottom').querySelectorAll('p'); for (var i = 0; i < lis.length; i++) { ..
2022-04-20 00:07:19
396
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人