-
禁止事件冒泡，通过事件对象来禁止$btn.on(“click”,function(event){event.stopPropagation()});ie浏览器中通过属性 event.cancelBubble=true 冒泡事件发生的条件，当多个嵌套的元素设计了相同的事件处理程序，将触发冒泡事件。在冒泡事件中，最内层的元素将首先触发该事件，然后将是其上一层元素触发，依此类推，直到最上层元素触发查看全部
-
Js事件冒泡机制，事件会向上传递，传递给父元素查看全部
-
$.fn.extend -> $('#img').preload();
$.extend -> $.preload();
查看全部 -
$.each(imgs,function(i,src)){
var imgObj = new Image();
$(imgObj).on('load error',function()){
$progress.html(Math.round((count+1)/len *100)+'%');
...
}
}
查看全部 -
if('prew' === $(this).data('control')){
index = Math.max(0,--index);
}else{
index = Math.min(len-1,++index)
}
查看全部 -
$.extend({
preload:function(imgs,opts){ 新增preload函数
new PreLoad(imgs,opts); //实例化
}
})
新增插件
查看全部 -
window.onload = function(){ preload(); showPic(); }; var imgs = [ 'img/banner.jpg', 'img/pic01.jpg', 'img/pic02.jpg', 'img/pic03.jpg', 'img/2017_5_14_Bing_.jpg', 'img/2017_5_14_Bing_en-GB.jpg', 'img/butterfly.jpg', 'img/city.jpg', 'img/desert.jpg', 'img/flower.jpg', 'img/flowers.jpg' ], index = 0, len = imgs.length, count = 0, progress = document.getElementsByClassName("progress")[0], loading = document.getElementsByClassName("loading")[0]; var imgObj = []; function preload() { for (var i=0; i < len; i++) { imgObj[i] = new Image(); imgObj[i].src = imgs[i]; imgObj[i].onload = function() { progress.innerHTML = Math.round((count + 1) / len *100) + "%"; if (count >= len - 1) { loading.style.display = "none"; document.title = "1/" + len; } count++; } imgObj[i].onerror = function() { count++; } } }查看全部 -
2-2 不使用预加载的纯js代码：
window.onload = showPic; var imgs = ['img/banner.jpg', 'img/pic01.jpg', 'img/pic02.jpg', 'img/pic03.jpg'], index = 0, len = imgs.length; function showPic() { var btns = document.getElementsByClassName("btn"); var place = document.getElementById("img"); for (var i=0; i < btns.length; i++) { btns[i].onclick = function() { var control = this.getAttribute("data-control"); "prev" === control ? index = Math.max(0, --index) : index = Math.min(len - 1, ++index); document.title = (index + 1) + "/" + len; place.setAttribute("src",imgs[index]); } } }当然，那数组imgs里面要换成你的各图片的src；文档结构和视频的一样。
查看全部 -
插件拓展到jquery: $.extend({preload: function(参数1，参数2){ 实例化 构造函数(参数1，参数2) } })查看全部
-
1.预加载类型，有序和无序 2.通过new Image并设置url值实现预加载 3.jquery插件的封装 自调用函数(Jquery对象作参数) 内部一个定义一个构造函数 内部定义一个默认参数对象(包括：自定义的回调方法) 定义插件提供的方法(_unordered和_ordered)，并添加到构造函数的prototype原型上 $.extend()将构造函数添加(拓展)到jquery对象查看全部
-
编辑序列列表 快捷方式：
li*75>img[src="images/qqexpression/images$.gif" alt=""]
查看全部 -
在封装插件时传去$符号 才可以是用jq查看全部
举报
0/150
提交
取消