单独的图片预加载已经完成，这里我们为上一张和下一张图片预加载做个准备。主要就是先将上一张和下一张的大图同时加载，在同一个图片点击事件中（当某个图片被click后）。首先就是我们要获取到上一张和下一张的图片索引位置，再通过这个值计算后来锁定对应的图片。首先我们先获取当前图片父元素的父元素的索引位置，这里要先说名一下关系链：div----dl----dt----img//这里获取到的是dl元素，每个dl元素里面都有一个img，所以索引值是一样的 var children = this.parentNode.parentNode;获取到dl后我们要再得到这个元素在dl元素数组中的索引值，之前我...
JS延迟加载我们做一个对图片的延迟加载，需要准备：一张通用的默认图片，还有几张正常使用的图片。表现形式：当浏览器没有滚动到可以显示这个图片的高度时，默认使用默认图片，这个图片一般几kb的大小，当浏览器滑动到可以显示图片的高度时，开始加载对应的图片，由透明到不透明做一个过渡，这个也是京东商城使用的一个效果。所有图片都有一个通用的class名称：.wait_load 用一个id为：#photo的div容器包裹。图片元素src默认使用默认的图片加载，并且会有一个自定义的属性，这个属性自定义名称，这里使用xsrc，其属性值要是正确的图片链接地址！<img xsrc="images...
已经写了新版，jq的方法，地址：jq富强，如果连接失效可以在本博客搜索富强，也可以找到对应的文章经过长时间的学习，终于迎来小高潮，更新为2.0版本！2018-10-5 修复预加载js代码失效bug2018-11-3 修复了当鼠标在最右侧点击时导致X轴产生滚动条的问题2019-1-8 更新为2.0版本，修复大量bug，引用自制代码库预览图：使用要求：需要引入自制代码库：[hide]先引入tool.js 下载：蓝奏云再引入封装库base.js 下载：蓝奏云接着引入china.js 下载 ： 蓝奏云[/hide]引入方法：以我现在的博客Typecho为例，我们需要在主题的header.ph...
根据传统，我们先修复一下上一章的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...
最近评论