根据传统，我们先修复一下上一章的bug。有两个bug：当同步动画和队列动画同时存在的时候，队列动画会触发多次。如果同步动画中，两个值或者多个值相差太多就无法完整运行。原因：主要原因是因为我们在定时器中使用了for语句，然后是同步动画的时候，假设是两个动画要同时运行，那么就会触发两个if判断，然后这两个if判断到最后都会运行一次setAttr()或者setOpacity()的方法，而这两个的方法里面都有if(obj.fn != undefined) obj.fn(); 这个语句，fn本身就是队列动画，那么就会导致触发多次。而无法完成运行是因为，假设宽度要到300，高度101，元素本身高度是...
搞这个本来是一帆风顺的，但是js就是出了一个问题，单向弹出的时候没有问题，但是返回原来位置的时候就会一直卡在某个位置然后前后移动，头疼，找了半天才发现，之前的动画封装有一个问题。创建超时调用之前，我们做了一个clearInterval(window.timer);的操作，这个步骤第一个效果在window下创建了一个timer的超时调用，第二个效果是，当第二次运行的时候，会先清除之前的超时调用，而我这个卡住的bug就是因为没有清除到timer，因为我写成了var timer = setInterval(function() {},time);了，这样这个timer是函数里面的，而我们清除的...
上一章我们讲在元素移动到end位置的时候，会有两个动作同时产生，一个是正常的移动element.style[attr] = parseInt(getStyle(element,attr)) + step + 'px';一个是if判断如果当前的位置已经大于或者等于end的时候，element.style[attr] = end + 'px';这样可以解决动画的最后一些的突兀感，不会先超出，然后再移动回来，而是在同一个时间完成，但是这样并不是很好的解决办法。实际上你移动距离还是超出了，只不过后面又回来了，这样可能对以后js代码有影响，所以这里就再次调整。解决超出返回的回弹问题var time...
解决超时调用无限调用的问题之前我们并没有给超时调用加上时间设置，所以默认是一毫秒一次无限循环的，这样不好，写法上也是不那么合理，所以这里要加上毫秒数，并且还要运行后删除这个超时调用。超时调用本来是不需要赋予变量名的，但是如果你要删除的话，就需要设置一个变量名，之前我们给超时调用设置了timer的变量名，这里就不多赘述了。function addDomLoaded(fn) { if(document.addEventListener) { addEvent(document,'DOMContentLoaded',function(){ ...
之前我们用的js都是在window.onload事件里面使用的，但是这样会有一个问题，如果页面的内容一直没有加载完毕，我们的js就无法使用，这就很头疼了，我目前为博客加的两个js效果就是处于未加载完毕就无法运行的尴尬局面。解决办法：DOMContentLoaded方法w3c提供了一个事件为DOMContentLoaded；这个事件是在浏览器解析完文档便能触发。那么这个浏览器解析文档是一个什么样的处理过程呢，就是相当于已经把html元素都过了一遍，页面已经初具雏形了，但是一些外部资源，例如图片这些还在加载中，这时便会触发DOMContentLoaded事件。简单点来说DOMContentL...
三元运算一般如下：(s1) ? (s2) : (s3);判断s1得到的值，如果是true就运行s2，false就运行s3。连续三元就是每次都以false运行的值再做判断，再一次三元，如下：(s1) ? (s2) : (s3) ? (s4) : (s5);这里就可以连续判断两次，和if中的else if一样，第二次三元以第一次s1返回false运行s3时，判断s3得到的值，如果为true则运行s4，false运行s5。那么连续三元都是以false运行的值再次判断，然后无限重复，直到你不需要重复了，如果说最后三元判断false不需要再运行什么了，可以打个0.(s1) ? (s2) : (s3...
之前的章节使用都是单一式获取方法，一次只能获得单个或者对应的元素数组，唯一加了获取条件的就是通过class获取元素，我们加了一个用于筛选的idName，当idName存在，class要从这个idName元素下获取，但是这样也不能方便的使用，万一我们要在某个class元素下搜索某个tagName或者class，之前的方法完全不够用了。为此我们衍生出新的获取元素的方法。我们的希望获取元素可以这样写：$('#er span i').css('color','red')获取id为er的元素下的span元素中的i元素，让他的颜色改为红色。...
因为拖拽的功能并不是说常用到，基本上就是弹窗之类的会用到，而且拖拽用到的代码会比较多，如果丢到Base的封装库中，比较费资源，所以我们可以将拖拽打包成插件，然后再通过插入的方式调用。什么是插件？就是通过共有的prototype中的方法，来为这个函数添加共有的方法，也就是在Base.prototype.xxx中又创建了一个Base.prototype.xxx方法，然后名称和function通过传参的方式传入。创建插件//插件入口 Base.prototype.extend = function(name, fn) { Base.prototype[name] = fn; }将拖拽方...
w3c提供了addEventListener和removeEventListener两个方法，而IE提供的是attachEvent和detachEvent;但是ie的方法有很多问题，那么我们要解决以下这些问题：支持同一个元素同一个事件绑定多个监听函数，如window.onload可以有多个，并且都是可以正常执行的。同一个元素的相同事件注册同一个函数，只会运行一次。函数体内的this应当指向调用该事件的对象本身。监听函数的执行顺序应当按照绑定的顺序执行。在函数体内event对象不使用event||window.event来标准化event对象。跨浏览器添加事件：function addEv...
call()对象冒充，最直白的记忆方法，就是更改this的指向，比如：document.onclick = function() { fn(); }; function fn() { if (this === window) alert('window'); if (this === document) alert('document'); }这里我们知道，函数里面的函数，this指向的是window，那么我们使用call便可以让this指向document，用法如下：document.onclick = function...
上一篇我们讲了使用伪元素来实现遮罩层，虽然很方便，但是也有一些缺点，比如：z-index需要设置好，由于伪元素是login里面的，所以哪怕伪元素的z-index：-999；也不可能穿透login元素，这样的话，form元素就要设置一下背景色了。无法为伪元素添加点击事件为此我们还可以单独创建一个遮罩层元素，这个元素一般在login元素的上面并且为同级元素，我们可以利用js创建或者先创建好再设置css，我这里选择js创建，虽然麻烦一点，但是显得有技术啊！233...效果图：css部分：.login_Masked { position: absolute; top: 0; ...
最近评论