2017年12月12日
jQuery——入口函数
摘要： 中文网 http://www.css88.com/jqapi-1.9/ 版本兼容问题 版本一：1.x版本，兼容IE678 版本二：2.x版本，不兼容IE678 入口函数区别 阅读全文
posted @ 2017-12-12 12:46 var_obj 阅读(12996) 评论(0) 推荐(2)
JS——三个运用正则的方法
摘要： trim()、replace()、search() trim()IE678的兼容写法 阅读全文
posted @ 2017-12-12 10:16 var_obj 阅读(254) 评论(0) 推荐(0)
2017年12月11日
JS——正则案例
摘要： 验证座机号码 验证中文账号 表单验证 阅读全文
posted @ 2017-12-11 16:09 var_obj 阅读(233) 评论(0) 推荐(0)
JS——正则
摘要： 正则的声明： 1、构造函数：var 变量名= new RegExp(/表达式/); 2、直接量：var 变量名= /表达式/; test()方法： 1、正则对象方法，检测测试字符串是否符合该规则，返回true和false，参数（测试字符串） 2、Boolean = 表达式.test("要验证的内容" 阅读全文
posted @ 2017-12-11 16:02 var_obj 阅读(347) 评论(0) 推荐(0)
JS——旋转木马
摘要： 1、opacity和zIndex的综合运用 2、样式的数组的替换：向右边滑动 删除样式数组第一位并在数组最后添加；向左边滑动 删除样式数组最后一位并在数组前添加 3、开闭原则，只有当回调函数执行完毕以后，我再次点击滑动按钮才有用 阅读全文
posted @ 2017-12-11 11:24 var_obj 阅读(622) 评论(0) 推荐(0)
JS——缓动框架的问题
摘要： 1、opacity问题：IE678支持filter: alpha(opacity=50)取值1-100；小数位容易精度丢失，所i有统一json字符串设置为百进制，赋值时除以100 2、zIndex问题：层级不需要徐徐渐进值的递增或者递减，而是一下赋值到目标值 阅读全文
posted @ 2017-12-11 11:12 var_obj 阅读(269) 评论(0) 推荐(0)
2017年12月7日
JS——缓慢动画封装案例
摘要： 手风琴 1、排他思想 2、ul宽度需要大一点，防止li撑开跑下去 3、一个变大其他所有变小，变小不能太小，不然会出现空白 仿360开机 1、首先下盒子高度变为0，之后整体盒子宽度变为0 2、本例子没有用图片，最好盒子以图片形式为好 阅读全文
posted @ 2017-12-07 17:31 var_obj 阅读(599) 评论(0) 推荐(0)
JS——缓慢动画封装
摘要： 在知道如何获取内嵌式和外链式的标签属性值之后，我们再次封装缓慢动画： 单个属性 多个属性 回调函数 阅读全文
posted @ 2017-12-07 17:23 var_obj 阅读(675) 评论(0) 推荐(0)
JS——隐式全局变量
摘要： 在函数中，var声明的是局部变量，不带var的是隐式全局变量 阅读全文
posted @ 2017-12-07 11:41 var_obj 阅读(557) 评论(0) 推荐(1)
2017年12月5日
JS——样式获取的兼容写法
摘要： 样式获取 普通获取属性方式div.style.width或者div.style["width"]无法获取内嵌和外链式，只能获取行内式 window.getComputedStyle(div, null) 返回元素的长宽等带有单位px 第二个参数是伪类，没有填null div.currentStyle 阅读全文
posted @ 2017-12-05 17:45 var_obj 阅读(645) 评论(0) 推荐(0)
JS——冒泡案例
摘要： 模态框 1、因为a链接和和顶级document都注册了单击事件，所以要阻止a链接向父级盒子冒泡，不然又会从document的单击事件走一遍 2、在document的单击事件中，只需要判断触发事件的目标元素是不是白色盒子部分就行了 事件委托 1、普通注册事件没有办法为新创建的元素绑定事件。所以我们要使 阅读全文
posted @ 2017-12-05 16:49 var_obj 阅读(246) 评论(0) 推荐(0)
JS——事件冒泡与捕获
摘要： 事件冒泡与事件捕获 1、冒泡：addEventListener("click",fn,false)或者addEventListener("click",fn)；捕获：addEventListener("click",fn,true)。 2、区别：冒泡是从触发该事件的目标节点一层一层往上将同种类型的事 阅读全文
posted @ 2017-12-05 15:16 var_obj 阅读(399) 评论(0) 推荐(0)
JS——client
摘要： clientTop、clientLeft： clientTop：盒子的上boder clientLeft：盒子的左border clientWidth与clientHeight 1、在有DTD情况下： document.body.clientWidth、document.body.clientHei 阅读全文
posted @ 2017-12-05 14:57 var_obj 阅读(1320) 评论(0) 推荐(0)
JS——滚动条
摘要： 1、核心思想与之前的拖拽盒子是一样的 2、完全将鼠标在盒子中的坐标给滚动条是错的，因为这样会使滚动条顶部立刻瞬间移动到鼠标位置 3、必须在鼠标按下事件时记住鼠标在滚动条内部的坐标，再将鼠标在盒子中的坐标给滚动条时要减去这个相对距离 4、超出部分内容：超出部分移动距离=滚动条需要移动的距离：滚动条移动 阅读全文
posted @ 2017-12-05 09:47 var_obj 阅读(410) 评论(0) 推荐(0)
2017年12月4日
JS——拖拽盒子
摘要： 注意事项： 1、opacity是全部元素变透明，rgba只是背景色变透明 2、先是注册鼠标按下的事件，此时就需要记录鼠标在盒子中的坐标 3、再在鼠标按下事件中注册鼠标移动事件，此时鼠标的坐标是不断变化的，盒子的坐标就是鼠标的坐标减去鼠标在盒子的坐标 4、top.onmousemove = funct 阅读全文
posted @ 2017-12-04 17:20 var_obj 阅读(1472) 评论(0) 推荐(0)
JS——放大镜
摘要： 放大镜： 1、比例系数要恒定：在系数为4的情况下，若原图是820*512，那么小图必须是205*128，放大镜若是50，原图显示区域必须200 2、计算鼠标在小图中的坐标 3、放大镜需要在鼠标中间位置，也就是鼠标在盒子中的坐标减去其宽度高度的一半 4、放大镜移动范围：marginLeft、margi 阅读全文
posted @ 2017-12-04 14:58 var_obj 阅读(278) 评论(0) 推荐(0)
JS——鼠标在盒子中的坐标
摘要： 核心思想： 1、复杂版本：鼠标pageX、pageY的值减去盒子距离顶端的offsetLeft、offsetTop值就是鼠标在盒子中的坐标 2、简单版本：offsetX、offsetY就可获取鼠标相对于事件触发对象的坐标，以事件触发对象左上角为基准点 阅读全文
posted @ 2017-12-04 14:46 var_obj 阅读(1107) 评论(0) 推荐(0)
JS——鼠标跟随
摘要： 注意事项： 1、pageX、pageY的兼容问题 2、使目标移动鼠标中间位置还必须减去盒子宽度的一半 阅读全文
posted @ 2017-12-04 14:40 var_obj 阅读(230) 评论(0) 推荐(0)
JS——event
摘要： 触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息： 普通浏览器支持 event（传参），IE678支持 window.event（无参），兼容写法： client、page、screen三者之间的区别： pageX、pageY在IE678中不支持，兼容写法 阅读全文
posted @ 2017-12-04 10:41 var_obj 阅读(193) 评论(0) 推荐(0)
2017年12月1日
JS——scroll动画
摘要： 固定导航栏 1、计算导航栏到顶部的距离值 2、当scrollTop值大于这个距离值就添加定位，当小于距离值后解除定位 注意事项：当导航栏添加定位之后，导航栏就脱离了文档流，也就是不占位了，下面的盒子就会顶上来，所以要给下面盒子添加padding-top值 两侧跟随广告 1、之前都是offsetLef 阅读全文
posted @ 2017-12-01 13:48 var_obj 阅读(1547) 评论(0) 推荐(0)
JS——scroll封装
摘要： DTD未声明：document.body.scrollTop DTD已声明：document.documentElement.scrollTop 火狐谷歌IE9：window.pageYOffset compatMode：可以判断是否声明DTD，CSS1Compat是，BackCompat否 复杂版 阅读全文
posted @ 2017-12-01 10:33 var_obj 阅读(251) 评论(0) 推荐(0)
JS——html基本结构
摘要： document.title——文档标题 document.head——文档头标签 document.body——文档的主体 document.documentElement 表示整个文档的html标签，也就是说结构中的html标签并不是通过document.html来访问的。 阅读全文
posted @ 2017-12-01 09:57 var_obj 阅读(490) 评论(0) 推荐(0)
JS——scroll
摘要： scrollWidth：父div宽度小于子div宽度，父div scrollWidth宽度为子div的宽度，大于则为本身的宽度width+padding scrollHeight：父div高度小于子div高度，父div scrollHeight高度为子div高度，大于则为本身的高度height+pa 阅读全文
posted @ 2017-12-01 09:51 var_obj 阅读(165) 评论(0) 推荐(0)
JS——筋斗云案例
摘要： 需求： 1、鼠标移动到哪里，云彩移动到哪里 2、鼠标离开，云彩回到原点 3、鼠标离开，云彩回到之前点击的地方 阅读全文
posted @ 2017-12-01 00:50 var_obj 阅读(1132) 评论(0) 推荐(1)
JS——缓动动画
摘要： 核心思想： (1)相对于匀速移动，盒子每次移动的步长都是变化的，公式：盒子位置=盒子本身位置+（目标位置-盒子本身位置）/10 (2)在盒子位置与目标距离小于10px时，其步长必然是小数，又由于offsetLeft的变态的逢4进值，那么只要小数点的值小于4就会停滞不前 (3)所以要么往上取整，要么往 阅读全文
posted @ 2017-12-01 00:47 var_obj 阅读(2673) 评论(0) 推荐(0)
2017年11月29日
JS——offset
摘要： 1、offsetWidth、offsetHeight返回盒子宽度和高度，包括padding与border，不包括margin 2、offsetLeft、offsetTop返回盒子距离定位盒子的x轴方向和y轴方向距离，如果没有定位盒子，则返回相对于body的距离 3、offsetParent返回距离定 阅读全文
posted @ 2017-11-29 15:52 var_obj 阅读(230) 评论(0) 推荐(0)
JS——轮播图高级版
摘要： 需求： 1、页面需要小图标和箭头 2、定时器不断的滑动图片 3、在点击箭头时，图标和图片随即做出响应 核心思想： 1、往左移动到第一张的情况：在第二张移动到第一张时，这个动画效果完成之后，立刻将ul的left位置切换到最后一张的位置。 2、往右移动到最后一张的情况：在倒数第二张移动到最后一张时，这个 阅读全文
posted @ 2017-11-29 14:43 var_obj 阅读(627) 评论(0) 推荐(0)
JS——轮播图简单版
摘要： 1、小图标版本 2、小图标版本附有定时器 3、箭头版本 4、箭头版本附有定时器 阅读全文
posted @ 2017-11-29 14:15 var_obj 阅读(222) 评论(0) 推荐(0)
CSS——轮播图中的箭头
摘要： 注意事项： 1、定位中left权重比right高，top权重比bottom高 2、两个span标签嵌套在一个盒子中，将来显示隐藏只需要控制父盒子就行了 阅读全文
posted @ 2017-11-29 13:36 var_obj 阅读(1974) 评论(0) 推荐(0)
JS——void(0)
摘要： a标签中阻止跳转： a标签中#也可以阻止跳转，但是会页面回到最顶端 阅读全文
posted @ 2017-11-29 13:17 var_obj 阅读(266) 评论(0) 推荐(0)
JS——事件的绑定与解绑
摘要： 1、绑定形式 2、addEventListener：事件监听器。 原事件被执行的时候，后面绑定的事件照样被执行，不会被层叠掉 注意事项：ele["on" + evtName]与ele.onclick绑定的方式会层叠到之前的事件 3、addEventListener原理：之所以可以不层叠之前注册事件， 阅读全文
posted @ 2017-11-29 11:40 var_obj 阅读(1693) 评论(0) 推荐(0)
2017年11月27日
JS——BOM
摘要： 1、跳转 2、定时器 3、打开关闭页面 阅读全文
posted @ 2017-11-27 10:23 var_obj 阅读(124) 评论(0) 推荐(0)
2017年11月26日
JS——祝愿墙
摘要： 注意事项： 1、for循环的下一层注册了事件的话，事件函数中关于变量i的节点元素是不允许出现的，因为在函数加载的时候，只会加载函数名，不会加载函数体，外层for循环会走完一边，变量i一直会停留在最后一个值 2、设置节点元素的样式时，特别是top、left等属性，记住加“px” 3、Math.rand 阅读全文
posted @ 2017-11-26 03:02 var_obj 阅读(459) 评论(0) 推荐(0)
2017年11月25日
JS——模拟百度搜索
摘要： 注意事项： 1、for循环移除子节点时，其长度是变化的 2、在文档流中，input、img、p等标签与其他标签有3px的距离，利用左浮动，可以消除3px距离 3、背景图片定位时，第一个值是x轴方向的值，第二值是y轴方向的值 4、大多时候input标签outline属性时都设置为none，然后为其注册 阅读全文
posted @ 2017-11-25 03:14 var_obj 阅读(250) 评论(0) 推荐(0)
2017年11月24日
JS——选择水果
摘要： 注意点： 1、select标签size属性显示选项数组，multiple属性可以多选 2、原select节点下的子节点在移动到其他selec标签下的时候，其原来的select标签下子节点长度在发生变化 3、注册事件可以直接绑定一个函数名，但是如果绑定的函数有参数，那么必须将这个有参数的函数写入到匿名 阅读全文
posted @ 2017-11-24 12:56 var_obj 阅读(1202) 评论(0) 推荐(0)
html——快捷键
摘要： webstorm fireworks photoshop 阅读全文
posted @ 2017-11-24 10:53 var_obj 阅读(6335) 评论(0) 推荐(0)
2017年11月23日
JS——百度背景图
摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } body{ background-image: url("i 阅读全文
posted @ 2017-11-23 14:16 var_obj 阅读(218) 评论(0) 推荐(0)
JS——stye属性
摘要： 1、样式少的时候使用 2、style是对象 3、值是字符串，没有设置值是“”； 4、命名规则，驼峰命名，和css不一样 5、设置了类样式不能获取，只和行内式交互，和内嵌和外链无关 6、box.style.cssText = “字符串形式的样式”； 阅读全文
posted @ 2017-11-23 11:54 var_obj 阅读(219) 评论(0) 推荐(0)
2017年11月22日
JS——高级各行换色
摘要： 1、获取tbody下的子元素 2、注册鼠标覆盖事件时存储当时的背景颜色，注册鼠标离开事件时把存储的颜色赋值注册事件对象 阅读全文
posted @ 2017-11-22 18:05 var_obj 阅读(330) 评论(0) 推荐(0)
html——细线表格
摘要： 细线： 1、table表格设置背景色 2、table中设置单元格距离 3、tr标签设置另外一种背景色 另外一个版本：http://www.cnblogs.com/wuqiuxue/p/7880574.html 阅读全文
posted @ 2017-11-22 17:22 var_obj 阅读(447) 评论(0) 推荐(0)