-
- 慕粉孔帅 2023-08-03
js 简写：
- 0赞 · 0采集
-
- _OuYanG 2020-02-05
emmm....
-
截图0赞 · 0采集
-
- _OuYanG 2020-02-05
无序预加载插件部分
-
截图0赞 · 0采集
-
- _OuYanG 2020-02-05
有序预加载插件部分
-
截图0赞 · 0采集
-
- _OuYanG 2020-02-05
预加载插件
-
截图0赞 · 0采集
-
- _OuYanG 2020-02-05
有序加载的
-
截图0赞 · 0采集
-
- _OuYanG 2020-02-05
使用无序加载
-
截图0赞 · 0采集
-
- _OuYanG 2020-02-05
无序加载的
-
截图0赞 · 0采集
-
- _OuYanG 2020-02-05
来做个笔记
-
截图0赞 · 0采集
-
- 慕粉jason 2019-05-07
通过设置html，body的height为100%来解决子元素设置height为100%不管用的情况。
因为高度为百分比是继承父元素的。
-
截图0赞 · 0采集
-
- Zhou_Yanshen 2019-03-13
单引号 放在判断前面，细节处理。 width设置一个，图片按照比列变化。
-
截图0赞 · 0采集
-
- 慕标2393067 2018-12-26
- 好好
-
截图0赞 · 0采集
-
- 木嘻 2018-12-16
- Math.max
-
截图1赞 · 1采集
-
- qq_云水边静沐暖阳_04205942 2018-11-13
e.stopPropagation();阻止事件冒泡
- 1赞 · 0采集
-
- sangmin 2018-10-29
插件1，学会写插件
-
截图1赞 · 0采集
-
- xmycc 2018-10-16
- 禁止事件冒泡，通过事件对象来禁止$btn.on(“click”,function(event){event.stopPropagation()});ie浏览器中通过属性 event.cancelBubble=true 冒泡事件发生的条件，当多个嵌套的元素设计了相同的事件处理程序，将触发冒泡事件。在冒泡事件中，最内层的元素将首先触发该事件，然后将是其上一层元素触发，依此类推，直到最上层元素触发
-
截图0赞 · 1采集
-
- xmycc 2018-10-15
- Js事件冒泡机制，事件会向上传递，传递给父元素
-
截图0赞 · 0采集
-
- 慕粉1464621506 2018-09-07
$.fn.extend -> $('#img').preload();
$.extend -> $.preload();
- 0赞 · 0采集
-
- 慕粉1464621506 2018-09-07
$.each(imgs,function(i,src)){
var imgObj = new Image();
$(imgObj).on('load error',function()){
$progress.html(Math.round((count+1)/len *100)+'%');
...
}
}
- 0赞 · 0采集
-
- 慕粉1464621506 2018-09-07
if('prew' === $(this).data('control')){
index = Math.max(0,--index);
}else{
index = Math.min(len-1,++index)
}
- 2赞 · 2采集
-
- cnenhui 2018-08-14
$.extend({
preload:function(imgs,opts){ 新增preload函数
new PreLoad(imgs,opts); //实例化
}
})
新增插件
- 0赞 · 0采集
-
- gulalaDark 2018-08-03
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++; } } }- 0赞 · 0采集
-
- gulalaDark 2018-08-03
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；文档结构和视频的一样。
- 1赞 · 0采集
-
- 慕田峪2558218 2018-06-15
- 插件拓展到jquery: $.extend({preload: function(参数1，参数2){ 实例化 构造函数(参数1，参数2) } })
-
截图1赞 · 2采集
-
- 慕田峪2558218 2018-06-15
- 1.预加载类型，有序和无序 2.通过new Image并设置url值实现预加载 3.jquery插件的封装 自调用函数(Jquery对象作参数) 内部一个定义一个构造函数 内部定义一个默认参数对象(包括：自定义的回调方法) 定义插件提供的方法(_unordered和_ordered)，并添加到构造函数的prototype原型上 $.extend()将构造函数添加(拓展)到jquery对象
- 1赞 · 2采集
-
- bZzzz 2018-05-14
编辑序列列表 快捷方式：
li*75>img[src="images/qqexpression/images$.gif" alt=""]
-
截图1赞 · 3采集
-
- 慕函数5971289 2018-05-08
- 在封装插件时传去$符号 才可以是用jq
-
截图0赞 · 0采集
-
- aSuncat 2018-04-21
一、图片预加载的3个步骤
1、实例化一个Image对象。
2、监听它的load、error事件。
3、为src附上正确的图片路径。
- 1赞 · 1采集
-
- aSuncat 2018-04-21
(function($) {
// 面向对象
function PreLoad(imgs, options) {
this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;
this.opts = $.extend({}, PreLoad.DEFAULTS, options); // options和PreLoad.DEFAULTS这2个对象融合，生成新的对象，将新对象返回给opts保存下来。
if (this.opts.order === 'ordered') {
this._ordered();
} else {
this._unordered(); // _表示只在函数内部使用，而不在外部调用
}
}
PreLoad.DEFAULTS = {
order: 'unordered', // 无序预加载
each: null, // 每一张图片加载完毕后执行
all: null // 所有图片加载完毕后执行
};
PreLoad.prototype._ordered = function() { //方法写在原型链上
var opts = this.opts, // 保存为局部变量
imgs = this.imgs,
len = imgs.length,
count = 0;
var imgObj = new Image();
load();
function load() {
$(imgObj).on('load error', function() {
opts.each && opts.each(count);
if (count >=len) {
// 所有图片已经加载完毕
opts.all && opts.all();
} else {
load();
}
count++;
});
imgObj.src = imgs[count];
}
},
PreLoad.prototype._unordered = function () {
var imgs = this.imgs,
opts = this.opts,
count = 0,
len = imgs.length;
$.each(imgs, function(i, src) {
if (typeof src != 'string') return;
var imgObj = new Image();
$(imgObj).on('load error', function() {
opts.each && opts.each(count); // 如果opts.each存在，执行opts.each方法
if (count >= len - 1) {
opts.all && opts.all();
}
count ++;
});
imgObj.src = src;
});
};
// 插件:①附在$.fn上（要选择一个元素）；②直接跟在jquery对象，是一个工具函数。(工具方法)
// $.fn.extend -> $('#img').preload();
$.extend({
preload: function(imgs, opts) {
new PreLoad(imgs, opts);
}
});
})(jQuery);
- 1赞 · 1采集
-
- aSuncat 2018-04-21
一、禁止事件冒泡:e.stopPropagation
1、$btn.on('click',function(){e.stopPropagation});
btn点击事件冒泡到document，在点击btn的时候会触发document的隐藏事件，所以要阻止btn的事件冒泡，是处理btn，而不是document.
- 0赞 · 0采集
