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"); var src =