自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

小豆子的博客

web前端学者

  • 博客(15)
  • 收藏
  • 关注

原创 css3高级动画基础

transform-origin 变换原点transition 过渡动画transition 速录函数可以选择的值animation 动画铺垫动画关键帧 @keyframesanimation 动画columns 多列布局transform 可以实现元素的形状、角度、位置等的变化。 值: rotate(); 以x/y/z为轴进行旋转,默认为z ...

2018-04-27 15:52:47 594

原创 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 259

原创 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 225

转载 offsetLeft和style.left的区别

offsetLeft总的来说是获取当前元素距父元素左侧的值 ,具体分两种情况:如果当前元素仍在普通流中(即position值为static或者relative),offsetLeft获取的是当前元素距流中父元素左侧的值,包括父元素的padding-left、margin-left、border-left,注:IE下有误差; 如果当前元素已从普通流中删除,使用了绝对定位absolute或固...

2018-04-26 09:19:28 1052

原创 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 357 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 260

原创 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 2169

原创 js运动

匀速运动小练习;页面滑出插件getStyle函数应用改变多个对象宽度通过startMove让元素的多个属性同时发生变化重点:多物体、多值、链式调用框架运动的本质——>物体的状态发生连续性的变化匀速运动<divstyle="height:100px; width:100px; background: orange; position:...

2018-04-05 15:53:14 260

原创 js事件分类

鼠标事件移动端键盘事件文本类操作事件窗体操作类(window上的事件)fixed定位,兼容IE6鼠标事件 click、mousedown、mousemove、mouseup、contextmenu、mouseover、mouseout、 mouseenter mouseleaveclick = mousedown + mouseup触发顺...

2018-04-04 20:29:03 234

原创 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 245

原创 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 300

原创 js事件处理模型——事件冒泡、捕获

事件冒泡:事件捕获:其他形式的捕获取消冒泡封装取消冒泡的函数 stopBubble(event)阻止默认事件:封装阻止默认事件的函数 cancelHandler(event);事件冒泡:结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素。(自底向上)<div class="wrapper">...

2018-04-03 17:02:47 349

原创 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 371

原创 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 919

原创 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 250

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除