- 博客(15)
- 收藏
- 关注
RSS订阅原创 css3高级动画基础
transform-origin 变换原点transition 过渡动画transition 速录函数可以选择的值animation 动画铺垫动画关键帧 @keyframesanimation 动画columns 多列布局transform 可以实现元素的形状、角度、位置等的变化。 值： rotate(); 以x/y/z为轴进行旋转，默认为z ...
2018-04-27 15:52:47
608
原创 CSS3选择器
属性选择器初级伪类选择器：伪类用于向某些选择器添加特殊的效果。1.root 根标签选择器2.:not 否定选择器3.empty 空标签选择器4.target 目标元素选择器5.:first-child 第一个子元素6.:first-of-type 第一个子元素7 :only-child 唯一子元素选择器8 、:enabled 可用的元素 、:disabled 不可用的元...
2018-04-27 03:35:28
271
原创 css3初探
CSS3前缀:CSS3的功能1.border-radius — 圆角2.box-shadow — 盒子阴影3.文本阴影text-shadow4.颜色值RGBA5.渐变的背景颜色 Gradient6.word-wrap:normal|break-word;7.font-face8.border-image — 边框应用背景9.背...
2018-04-27 03:29:09
236
转载 offsetLeft和style.left的区别
offsetLeft总的来说是获取当前元素距父元素左侧的值 ，具体分两种情况：如果当前元素仍在普通流中（即position值为static或者relative），offsetLeft获取的是当前元素距流中父元素左侧的值，包括父元素的padding-left、margin-left、border-left，注：IE下有误差； 如果当前元素已从普通流中删除，使用了绝对定位absolute或固...
2018-04-26 09:19:28
1071
原创 js运动（轮播图）
轮播图轮播图生成器轮播图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini
2018-04-06 15:33:46
375
1
原创 js运动（二）
弹性运动菜单栏应用模拟重力场碰撞检测模拟重力场带摩擦力模拟拖拽运动弹性运动方块在竖线左右来回运动<div style="width:100px; height:100px; background:orange; position: absolute; left:0; top:0;"></div><span s...
2018-04-06 13:38:44
271
原创 tool.js
1.封装兼容性的 addEvent(elem, type, handle);方法2.封装取消冒泡的函数 stopBubble(event)3.封装阻止默认事件的函数 cancelHandler(event);获取样式getStyle多物体、多值、链式调用框架1.封装兼容性的 addEvent(elem, type, handle);方法functio...
2018-04-05 16:02:33
2182
原创 js运动
匀速运动小练习；页面滑出插件getStyle函数应用改变多个对象宽度通过startMove让元素的多个属性同时发生变化重点：多物体、多值、链式调用框架运动的本质——>物体的状态发生连续性的变化匀速运动<divstyle="height:100px; width:100px; background: orange; position:...
2018-04-05 15:53:14
270
原创 js事件分类
鼠标事件移动端键盘事件文本类操作事件窗体操作类(window上的事件)fixed定位，兼容IE6鼠标事件 click、mousedown、mousemove、mouseup、contextmenu、mouseover、mouseout、 mouseenter mouseleaveclick = mousedown + mouseup触发顺...
2018-04-04 20:29:03
248
原创 js拖拽功能
<div style="width: 100px; height:100px; background-color:red; position: absolute; left:0; top:0;"></div><script> var div = document.getElementsByTagName('div')[0]; var disX...
2018-04-04 16:05:07
262
原创 js事件对象&事件委托
事件对象事件源对象兼容写法事件委托事件委托事件对象var div = document.getElementsByTagName('div')[0];div.onclick = function (e) { // chrome的事件对象用 e 就可以 var event = e || window.event; //但是IE上没有 e ；IE 的事...
2018-04-04 15:27:10
311
原创 js事件处理模型——事件冒泡、捕获
事件冒泡：事件捕获：其他形式的捕获取消冒泡封装取消冒泡的函数 stopBubble(event)阻止默认事件:封装阻止默认事件的函数 cancelHandler(event);事件冒泡：结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）<div class="wrapper">...
2018-04-03 17:02:47
365
原创 js解除事件处理程序
ele.onclick = false/‘’/null;ele.removeEventListener(type, fn, false);ele.detachEvent(‘on’ + type, fn);ele.onclick = false/‘’/null;<div style="width:100px; height:100px; background-...
2018-04-03 15:43:10
380
原创 js事件处理程序的运行环境(改变attachEvent内部的this指向&封装兼容性的 addEvent方法)
改变attachEvent内部的this指向封装兼容性的 addEvent(elem, type, handle);方法<div style="width:100px; height:100px; background-color:red"></div><script> var div = document.getElemen...
2018-04-03 15:13:48
936
原创 js事件绑定
1.ele.onxxx = function (event) {}2.ele.addEventListener(type, fn, false);3.ele.attachEvent(‘on’ + type, fn);小练习1.ele.onxxx = function (event) {}兼容性很好，但是一个元素只能绑定一个处理程序var div = document...
2018-04-03 14:30:01
264
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人