1. PC - js
// event.preventDefault()会阻挡预设要发生的事件.
// event.stopPropagation()会阻挡发生冒泡事件.
// 而return false则是前面两者的事情他都会做：
// 他会做event.preventDefault();
// 他会做event.stopPropagation();
// 停止callback function的执行并且立即return回来
function copyToClipboard(data) {
const _tempInput = document.createElement('input')
_tempInput.value = data.value
document.body.appendChild(_tempInput)
_tempInput.select()
document.execCommand('Copy')
document.body.removeChild(_tempInput)
}
function createAndDownloadFile(fileName, content) {
const aTag = document.createElement('a');
const blob = new Blob([content]);
aTag.download = `${fileName}.json`;
aTag.href = URL.createObjectURL(blob);
aTag.click();
URL.revokeObjectURL(blob);
}
function highlight(text, words, tag='span') {
let i, len = words.length, re;
for (i = 0; i < len; i++) {
re = new RegExp(words[i], 'g');
if (re.test(text)) {
text = text.replace(re, '<'+ tag +' class="highlight">$&</'+ tag +'>');
}
}
return text;
}
function excerpt(str, nwords) {
let words = str.split(' ');
words.splice(nwords, words.length-1);
return words.join(' ') +
(words.length !== str.split(' ').length ? '…' : '');
}
function createMenu(items, tags=['ul', 'li']) {
const parent = tags[0];
const child = tags[1];
let item, value = '';
for (let i = 0, l = items.length; i < l; i++) {
item = items[i];
if (/:/.test(item)) {
item = items[i].split(':')[0];
value = items[i].split(':')[1];
}
items[i] = '<'+ child +' '+
(value && 'value="'+value+'"') +'>'+
item +'</'+ child +'>';
}
return '<'+ parent +'>'+ items.join('') +'</'+ parent +'>';
}
if(top != self){
location.href = ”about:blank”;
}
- 两种图片lazy加载的方式 第一个By JS中级交流群 成都-猎巫 第二个By 上海-zenki
// @description 准备为图片预加载使用的插件
// 使用的图片容器css类名为lazy-load-wrap
// 图片真实地址为data-lazy-src
// 当lazy-load-wrap容器进入视口，则开始替换容器内所有需要延迟加载的图片路径，并更改容器的加载状态
//第一种方法
$.fn.compassLazyLoad=function(){
var _HEIGHT=window.innerHeight,
_lazyLoadWrap=$('.lazy-load-wrap');
var methods={
setOffsetTop:function(){
$.each(_lazyLoadWrap,function(i,n){
$(n).attr({
'top':n.offsetTop-_HEIGHT,
'status':'wait'
});
})
},
isShow:function(){
var _scrollTop=$(window).scrollTop;
//利用image容器判断是否进入视口，而非image本身
$.each(_lazyLoadWrap,function(){
var _that=$(this);
if (_that.attr('status')==='done') {
return;
};
if (_that.attr('top')<=_scrollTop) {
_that.find('img[data-lazy-src]').each(function(i,n){
n.src=$(n).data('lazy-src');
});
_that.attr('status','done');
};
})
},
scroll:function(){
$(window).on('scroll',function(){
methods.isShow();
});
},
init:function(){
methods.setOffsetTop();
methods.isShow();
methods.scroll();
}
};
methods.init();
}
//第二种方法
var exist=(function($){
var timer=null,
temp=[].slice.call($('.container'));
ret={};
for(var i=0,len=temp.length-1;i<=len;i++){
ret[i]=temp[i];
}
var isExist=function(winTop,winEnd){
for(var i in ret){
console.log(ret);
var item=ret[i],
eleTop=item.offsetTop,
eleEnd=eleTop+item.offsetHeight;
if((eleTop>winTop&&eleTop<=winEnd)||(eleEnd>winTop&&eleEnd<=winEnd)){
$(item).css('background','none');
new Tab($(item).attr('id'),data).init;
delete ret[i];
}
}
}
return {
timer:timer;
isExist:isExist;
};
})($);
//第三种方法
Zepto(function ($) {
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
autoplay: 3000,
loop: true,
autoplayDisableOnInteraction: false
});
(function lazyLoad() {
var imgs = $(".lazyLoad