JS 菜单切换
效果图:HTML部分:<div id="sideber"> <div class="sideber_d"> <h2 class="sideber_title">要闻</h2> <ul class="sideber_ul"> <li><a href="">日月不肯迟!习近平这样总结2018</a></li> ...
根据传统,我们先修复一下上一章的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元素,让他的颜色改为红色。...
最近评论