上一页 1 ··· 23 24 25 26 27 28 29 30 31 ··· 40 下一页
摘要: 封装缓动(变速)动画函数 增加任意多个属性&回调函数&层级&透明度 相较之前的,增加了2个判断,第一个判断是不是透明度,第二个判断是不是zindex, 都不是,就只是普通属性和之前一样 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT 阅读全文
posted @ 2019-12-20 14:06 jane_panyiyun 阅读(368) 评论(0) 推荐(0) 编辑
摘要: 封装缓动(变速)动画函数 增加任意多个属性&增加回调函数 回掉函数fn,在所有元素到达目的位置后,判断是否传入一个函数,有就调用 if(fn){fn()}; 这样一次点击,产生多个动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT 阅读全文
posted @ 2019-12-20 12:46 jane_panyiyun 阅读(334) 评论(0) 推荐(0) 编辑
摘要: 封装缓动动画函数 增加多个任意多个属性 在原来缓动动画函数,增加任意一个属性的基础上,做了如下改变 1. 原来function animate(element, attr, target),三个变量,改为用json对象来装一对:属性:目标位置的值,变为function animate(element 阅读全文
posted @ 2019-12-20 11:31 jane_panyiyun 阅读(399) 评论(0) 推荐(0) 编辑
摘要: 封装缓动(变速)动画 增加任意一个属性 1. 本来的变速动画函数,是获取特定的属性(之前案例是向右移动,所以获取的是left属性) 2. 现在改变为,获取任意一个属性,使其移动到指定的target,相当于在原animate(element,target)函数上,增加了一个属性,变为animate(e 阅读全文
posted @ 2019-12-20 09:33 jane_panyiyun 阅读(525) 评论(0) 推荐(0) 编辑
摘要: 获取计算后的样式属性 获取一个元素任意一个样式属性值 获取元素距离左边位置的值 会有如下兼容性问题: my$("btn").onclick = function () { //获取元素距离左边位置的值 console.log(my$("dv").offsetLeft); //谷歌,火狐支持 //co 阅读全文
posted @ 2019-12-20 09:00 jane_panyiyun 阅读(801) 评论(0) 推荐(0) 编辑
摘要: 案例:筋斗云 鼠标进入,一朵云的样式跟随鼠标移动,鼠标点击后离开,云样式回到上次点击的位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; pa 阅读全文
posted @ 2019-12-18 13:02 jane_panyiyun 阅读(444) 评论(0) 推荐(0) 编辑
摘要: 变速动画函数封装 匀速动画:每次步数都是10 (var step=10;) 变速(缓动)动画:每次的步数是用当前位置和目标位置相减 var step=(target-current)/10; 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta ch 阅读全文
posted @ 2019-12-18 10:58 jane_panyiyun 阅读(474) 评论(0) 推荐(1) 编辑
摘要: 封装getScroll函数 1. 获取页面向上或者向左卷曲出去的距离的值 2. 浏览器的滚动事件 function getScroll() { return { left: window.pageXOffset || document.documentElement.scrollLeft || do 阅读全文
posted @ 2019-12-18 08:38 jane_panyiyun 阅读(651) 评论(0) 推荐(0) 编辑
摘要: 元素的样式属性是无法直接通过:对象.style.属性来获取(样式在style属性中设置) offset系列: offsetLeft:距离左边位置的值 offsetTop:距离上面位置的值 offsetWidth:元素的宽(有边框) offsetHeight:元素的高(有边框) scroll系列: 滚 阅读全文
posted @ 2019-12-13 14:06 jane_panyiyun 阅读(419) 评论(0) 推荐(1) 编辑
摘要: part6 课程介绍 scroll系列: 重点,每个属性是什么意思 封装scroll系列的相关的属性,固定导航栏案例 事件浏览器的滚动条事件--能够写出来 封装动画函数 缓动动画 变速动画 筋斗云 获取元素计算后的样式属性值 升级变速动画 理解 能够自己写出最终版本的函数 手风琴案例 开机动画案例 阅读全文
posted @ 2019-12-13 13:35 jane_panyiyun 阅读(255) 评论(0) 推荐(0) 编辑
上一页 1 ··· 23 24 25 26 27 28 29 30 31 ··· 40 下一页