js css3实现钟表效果
摘要:原理: 利用transform-origin改变旋转的圆心,实现秒数和分钟数的刻度线,利用transfrom translate实现钟表小时刻度的显示 html: 1 绘制圆盘 2 绘制秒数 css js: 绘制的是60个刻度,每个刻度的角度是360/60*i 4 绘制分钟刻度,12个刻度线,原理同
阅读全文
posted @
2019-03-29 16:53
半夏微澜ぺ
阅读(370)
推荐(0) 编辑
菜单展开效果
摘要:html 原理: 子菜单定位到父元素圆的中心点,利用transform的translate来实现位移,子菜单的位置利用三角函数获取,父元素加上透明度opacity和缩放scale效果 css js
阅读全文
posted @
2019-03-29 15:22
半夏微澜ぺ
阅读(305)
推荐(0) 编辑
css3 实现运动动画 圆与椭圆
摘要:圆: html css 椭圆运动: 原理就是在圆运动的基础上给父元素添加一个y轴上的上下运动 css 钟摆运动: 这个比较简单,就是把元素的运动参考点移动到顶部中心,就是设置 transform-origin:top center; demo: html css
阅读全文
posted @
2019-03-29 15:19
半夏微澜ぺ
阅读(2312)
推荐(0) 编辑
css3 翻起页脚
摘要:html <div class="demo2"> <img src="images/1.jpg"> </div> css .demo2{ width: 300px; height: 300px; position: relative; margin: 100px auto; } .demo2 img
阅读全文
posted @
2019-03-29 11:25
半夏微澜ぺ
阅读(301)
推荐(0) 编辑
css3 实现loading效果
摘要:1 圆点渐入渐出 要点: 缩放和透明度的变化,循环变化 <div class="demo1"></div> 2 线条loading图 要点:使用缩放实现线条的高度的变化,循环变化,使用animation-delay的负值实现动画的连续变化(负值:动画立即执行,从设置的值之后开始执行动画,比如是-1s
阅读全文
posted @
2019-03-29 11:20
半夏微澜ぺ
阅读(289)
推荐(0) 编辑
css3
摘要:css3动画的一个抖动效果库 css shake https://elrumordelaluz.github.io/csshake/ csss transform translate 位置变化效果 rotate 旋转效果 scale 放大缩小效果 skew 变形扭曲效果 matrix 矩阵 tran
阅读全文
posted @
2019-03-28 16:24
半夏微澜ぺ
阅读(106)
推荐(0) 编辑
jquery/原生js/css3 实现瀑布流以及下拉底部加载
摘要:思路: style: html: 瀑布流就是等宽不等高的元素进行排列;从第二行开始元素从第一行中高度的数组中获取高度最小的元素开始排列,然后把两个元素合并为一个元素,再次从数组中取出高度最小的值,依次类推 1 需要对所有的元素进行定位absolute; 2 定义子元素的宽度以及padding值,利用
阅读全文
posted @
2019-03-27 17:28
半夏微澜ぺ
阅读(813)
推荐(0) 编辑
JSON
摘要:JSON 是一种轻量级的数据格式,他基于javascript语法的子集,即数组和对象表示。由于使用的是javascript的语法,所以JSON定义可以包含在javascript文件中,对其的访问无需通过XML的语言来额外解析。在Ajax应用中,就是服务器直接生成javascript语句,客户端获取后
阅读全文
posted @
2019-03-22 16:16
半夏微澜ぺ
阅读(119)
推荐(0) 编辑
js中变量声明提前
摘要:demo1: 因为:js编译器在执行b这个函数时,会把函数中声明的变量提前到最前面进行声明;上面的函数b等同于: function b(){var a; alert(a); a=20; alert(a);} 不难看出最终的结果就是 undefined 20 demo2: js在执行函数b时,在函数自
阅读全文
posted @
2019-03-21 17:34
半夏微澜ぺ
阅读(607)
推荐(1) 编辑
Object.prototype.toString.call(obj)检测数据类型
摘要:typeof bar=='object' 不能确切判断数据是一个‘纯粹’的对象 Array null的结果都是object 比较好的方法是: Object.prototype.toString.call(bar)=='[object Object]'; 使用以上方法可以很好的区分各种类型: toSt
阅读全文
posted @
2019-03-20 17:00
半夏微澜ぺ
阅读(154)
推荐(0) 编辑
call,apply,bind与es6的数组扩展运算符...
摘要:js中每一个Function对象都有一个apply个一个call方法: function.apply(thisObj,[argArray]); function.call(thisObj,arg1,arg2); 一般来说this总是指向调用某个方法的对象,但是使用call和apply方法,就会改变t
阅读全文
posted @
2019-03-20 16:34
半夏微澜ぺ
阅读(707)
推荐(0) 编辑
正则表达式
摘要:正则表达式 描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。
阅读全文
posted @
2019-03-19 15:13
半夏微澜ぺ
阅读(134)
推荐(0) 编辑
es6 对象
摘要:var a='age'; person.age=person['age']=person[a]; Object.is(值1,值2)比较两个值是否相等,返回布尔值 Object.assign(targetObject,sourceObj1,sourceObj2) 用于对象的合并,将源对象合并到目标对象
阅读全文
posted @
2019-03-15 16:55
半夏微澜ぺ
阅读(103)
推荐(0) 编辑
ES6
摘要:1 块级作用域 在es6之前,js只有全局作用域和函数作用域,let关键字引入了块级作用域 2 暂时性死区 var 声明的变量可以在声明之前使用,相当于默认为其声明其值为undifind; let 声明的变量,只能先声明后使用,声明之前使用会报错 3 const命令 const是用来定义常量,声明的
阅读全文
posted @
2019-03-15 16:44
半夏微澜ぺ
阅读(108)
推荐(0) 编辑
axios
摘要:axios post请求,带参数默认content-type:‘application/json;charset=UTF-8’, 如果没有参数'Content-Type':'application/x-www-form-urlencoded', get请求默认没有content-type。因为它是简
阅读全文
posted @
2019-03-14 16:10
半夏微澜ぺ
阅读(81)
推荐(0) 编辑
javascript闭包和闭包的几种写法和用法
摘要:什么是闭包 闭包,官方的解释是:一个拥有需要许多变量和绑定了这=这些变量的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。闭包的特点: 1 作为一个函数变量的引用,当函数返回时,其处于激活状态。2 一个闭包就是当一个函数返回时,一个没有释放资源的栈区。 简单的说,javascript允许
阅读全文
posted @
2019-03-14 15:27
半夏微澜ぺ
阅读(1313)
推荐(0) 编辑
jQuery的deferred对象详解
摘要:为异步操作指定回调函数,jQuery开发团队就设计了deferred对象。 简单说,deferred对象就是jQuery的回调函数解决方案。 1 ajax操作的链式写法 ajax传统写法: $.ajax() 操作完成之后,如果使用的是低于1.5的版本,返回的是XHR对象,没法进行链式操作,高于1.5
阅读全文
posted @
2019-03-07 17:19
半夏微澜ぺ
阅读(142)
推荐(0) 编辑
jquery data 选择器 表格序列化serialize()
摘要:data()在元素上存放或者读取数据,返回jquery对象。 demo: <div data-obj="{'name':'zhangsan','age':20}"></div> $('div').data('obj').age //20 在元素上data对象,key值一定要加引号。 $('div')
阅读全文
posted @
2019-03-05 14:20
半夏微澜ぺ
阅读(1106)
推荐(0) 编辑
Math 对象
摘要:abs(x) 返回数的绝对值 ceil(x) 对数进行上舍入 floor(x)对数进行下舍入 max(...item)返回数值的中的最大值 min(...item) 返回数值中的最小值 random() 返回0~1之间的随机数
阅读全文
posted @
2019-03-01 16:01
半夏微澜ぺ
阅读(90)
推荐(0) 编辑