JavaScript
关注
分享
扫一扫
JavaScript
捞比丶
这个作者很懒，什么都没留下…
展开
-
JS运动开发框架
一、为什么要学习运动框架在我们进行web页面开发的过程中，如何与用户进行友好、有趣的交互，是我们必须考虑的问题。 比如：导航条中滑动的动画特效、点击加入购物车按钮通过抛物线加入右侧购物车的动画特效，当然还有一些网页游戏的开发：微信打飞机、打砖块等。 那么我们要实现这些好玩又有趣的动画，就需要我们对动画的基础【运动】炉火纯青，那么这个部分的学习，我们会对运动展开学习，并且通过大量的实例来帮助大家完成这个阶段的学习。二、运动原理Js运动，本质来说，就是让 web 上 DOM 元素动起来。而想要 DOM 动原创 2020-07-17 20:17:15 · 805 阅读 · 0 评论
-
箭头函数省略语法
箭头函数省略语法省略规则1.如果只有一个参数，()可以省略2.如果只有一个return,{}可以省略实例无参数省略前window.onload=function(){alert("666")}省略后window.onload=()=>{alert("666")}两个参数省略前window.onload=function(a,b){alert(a+b)}省略后window.onload=(a,b)=>{alert("666")}省略前let原创 2020-08-02 16:49:49 · 900 阅读 · 0 评论 -
运动与游戏开发12------banner图案例
banner图完美框架实现banner图缓冲效果<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0px; padding: 0px} #ul1 li{list-style: none; width: 200px; height: 20原创 2020-07-19 16:07:04 · 150 阅读 · 0 评论 -
运动与游戏开发11------九宫格放大图案例
九宫格放大图<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0px; padding: 0px} #ul1 li{list-style: none; width: 100px; height: 100px; border: 1px so原创 2020-07-19 16:02:26 · 273 阅读 · 0 评论 -
运动与游戏开发10------完美运动框架
完美运动框架<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge原创 2020-07-18 17:37:44 · 169 阅读 · 0 评论 -
运动与游戏开发9------圆周运动案例
圆周运动案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> &原创 2020-07-18 17:06:47 · 234 阅读 · 0 评论 -
运动与游戏开发8------链式运动案例
链式运动案例<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"原创 2020-07-18 15:13:00 · 171 阅读 · 0 评论 -
运动与游戏开发7------多物体多样式案例
多物体多样式案例<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edg原创 2020-07-17 23:04:38 · 213 阅读 · 0 评论 -
运动与游戏开发6------多物体淡入淡出案例
多物体淡入淡出案例中间变量:多个物体在进行透明度变化的时候，公用的是一个中间变量。任何的变量在多物体运动中，都不能共用同一个中间变量。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>原创 2020-07-17 21:45:40 · 155 阅读 · 0 评论 -
运动与游戏开发5------多物体运动案例
多物体运动案例与单物体运动不同的是，多物体运动要让每一个运动的物体，独立拥有自己的定时器。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-e原创 2020-07-17 21:43:08 · 210 阅读 · 0 评论 -
运动与游戏开发4------缓冲菜单案例
缓冲菜单案例<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"原创 2020-07-17 21:03:48 · 129 阅读 · 0 评论 -
运动与游戏开发3------缓冲运动案例
变速运动（缓冲运动）案例<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie原创 2020-07-17 20:15:57 · 169 阅读 · 0 评论 -
运动与游戏开发2------图片淡入淡出案例
淡入淡出案例<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"原创 2020-07-17 20:11:13 · 159 阅读 · 0 评论 -
运动与游戏开发1------分享到菜单案例
分享到菜单<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"/原创 2020-07-17 20:05:13 · 152 阅读 · 0 评论 -
继承与多态笔记
继承与多态继承和多态同一件事情的两种完全不同的侧重：它们只会在子一级生效，并不会影响父一级构造函数的方法。继承：侧重是从父一级构造函数，继承到的属性和方法。多态：侧重于子一级，自己重写和新增的属性和方法。继承<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="widt原创 2020-07-15 17:32:04 · 165 阅读 · 0 评论 -
JS数组遍历的常用方式
JS数组遍历的常用方式<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=原创 2020-07-11 16:11:19 · 113 阅读 · 0 评论 -
鼠标拖拽实现
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"/>原创 2020-07-08 14:22:29 · 276 阅读 · 0 评论 -
实现鼠标提示框
实现鼠标提示框<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge原创 2020-07-08 13:41:42 · 272 阅读 · 0 评论