首页草堂散记前端开发技术文档收藏

jquery checkall 插件

发表于 2020-06-18 19:28:31 | 下载附件

checkAllJquery 全选与不全选全选插件全选反选

<form>
  <table>
    <thead>
      <tr>
        <th><label><input type="checkbox" data-toggle="checkall"></label></th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
        <tr>
          <td><input type="checkbox" name="" value=""></td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        ....
      </tbody>
  </table>
</form>

即时图片上传函数，获取图片地址显示图片

发表于 2020-06-18 18:58:44 | 下载附件

图片上传upload imagenew FormData();ajax 图片上传ajax upload

即时上传图片函数备份，有某些时候，图片是即时上传至服务器，获取图片地址在前端显示

读取本地文件流

发表于 2020-06-10 16:47:34 | 下载附件

读取文件流上传上传本地图片本地图片预览本地图片上传预览

// 读取图片函数
var readImgFileUrl = function (me, option) {
    var defaultOption = {
        // 开始读取图片
        loadStart: function (e) {
        },
        // 读取完成
        complete: function (r) {
        },
        // 读取出错
        error: function (e) {
        }
    }
    var opts = $.extend(defaultOption, option);
    // 读取图片数据 并传入回调
    var imgObject;
    if (!me.files.length) {
        return;
    } else {
        if (me.files[0].type == 'image/jpeg' || me.files[0].type == 'image/jpg' || me.files[0].type == 'image/png') {
            imgObject = me.files[0];
        } else {
            alert("此图片格式不正确！");
            return;
        }
    }
    // 图片的正准方向
    // var orientation;

    // EXIF js 可以读取图片的元信息  https://github.com/exif-js/exif-js
    // EXIF.getData(imgObject,function(){
    //     orientation = EXIF.getTag(this,'Orientation');
    // });

    // HTML5 用来把文件读入内存，并且读取文件中的数据。FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据
    var fileReader = new FileReader();
    // 开始读取
    fileReader.onprogress = function (e) {
        // 开始读取
        console.log((e.loaded / e.total * 100).toFixed() + "%");
    };
    // 读取完成
    fileReader.onload = function (e) {
        //这里可以使用校正后的图片data了
        opts.complete(data);
    };
    // 读取出错
    fileReader.onerror = function (e) {
        // alert("图片加载失败");
        opts.error(this, e);
    };
    // 读取文件内容
    fileReader.readAsDataURL(imgObject);
    // 开始加载的回调函数
    opts.loadStart.call(fileReader, imgObject);
}

利用JS本地生成图片，并保存多个图片至本地

发表于 2020-06-10 09:29:05 | 下载附件

html2canvascanvas2imagejszipFileSaver浏览器生成图片方案浏览器保存文件方案

HTML2canvas 生成图片：（下面使用方式源码）

http://html2canvas.hertzen.com/

https://github.com/niklasvh/html2canvas

JSzip 依赖下载图片文件包：（下载压缩包源码）

https://stuk.github.io/jszip/

https://stuk.github.io/jszip/documentation/examples/download-zip-file.html

平缓渐变样式，放大缩小等

发表于 2020-05-14 19:25:45 | 下载附件

平缓渐变样式CSS3动画transition 渐变

// LESS 渐变变化
._transition(){
	transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out;
}

// LESS 图片渐变放大样式
img { 
	width: 100%; height: 158px; overflow:hidden; border-radius:5px 5px 0 0; ._transition();
	&:hover {
		transform: scale(1.1); -ms-transform: scale(1.1); ._transition();
	}
}

手机端输入框有时弹不出来，需要添加事件绑定，让窗口变化时，输入区强行滚动到视图区

发表于 2020-05-14 19:17:07 | 下载附件

手机输入框不出现手机输入区滚动到视图区手机端输入区手机端 input手机端评论框手机输入区显示

// Function
// 手机端输入框有时弹不出来，需要添加事件绑定，让窗口变化时，输入区强行滚动到视图区
var keyboard = function(domEvent) {
    // ISO手机处理
    this.isReset = true; // 是否归位
    this.focusinHandler = function() {
        this.isReset = false; // 聚焦时键盘弹出，焦点在输入框之间切换时，会先触发上一个输入框的失焦事件，再触发下一个输入框的聚焦事件
    };
    this.focusoutHandler = function() {
        this.isReset = true;
        setTimeout(function() {
            // 当焦点在弹出层的输入框之间切换时先不归位
            if (this.isReset) {
                window.scroll(0, 0); // 确定延时后没有聚焦下一元素，是由收起键盘引起的失焦，则强制让页面归位
            }
        }, 30);
    };
    // Android 手机处理
    this.originHeight = document.documentElement.clientHeight || document.body.clientHeight;
    this.resizeHandler = function() {
        var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
        // 当前获得焦点的元素
        var activeElement = document.activeElement;
        if (resizeHeight < this.originHeight) {
            // 键盘弹起后逻辑
            if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA")) {
                setTimeout(function() {
                    // 让当前的元素滚动到浏览器窗口的可视区域内。
                    // activeElement.scrollIntoView({
                    //     block: 'center'
                    // });
                    activeElement.scrollIntoViewIfNeeded;
                }, 0)
            }
        } else {
            // 键盘收起后逻辑
        }
    };
    // 解绑事件
    this.unmount = function() {
        if (this.focusinHandler && this.focusoutHandler) {
            domEvent.removeEventListener('focusin', this.focusinHandler);
            domEvent.removeEventListener('focusout', this.focusoutHandler);
        }
        if (this.resizeHandler) {
            window.removeEventListener('resize', this.resizeHandler);
        }
    }
    // 入口函数
    this.init = function(){
        // 系统判断
        var ua = window.navigator.userAgent.toLocaleLowerCase();
        var isIOS = /iphone|ipad|ipod/.test(ua);
        var isAndroid = /android/.test(ua);
        if (isIOS) {
            // console.info('isIOS')
            // 上面 IOS 处理
            domEvent.addEventListener('focus', this.focusinHandler);
            domEvent.addEventListener('blur', this.focusoutHandler);
        }
        if (isAndroid) {
            // 上面 Android 处理
            // console.info('isAndroid')
            window.addEventListener('resize', this.resizeHandler);
        }
    }
    return this;
};

// Function Call 
// 发送消息后，窗口自适应调整
if($('.inputArea').length){
    keyboard($('.inputArea').get(0)).init();
}

手机端输入文字，键盘弹起问题兼容

发表于 2020-04-18 12:52:02 | 下载附件

手机键盘事件inputtextarea键盘弹起事件键盘收起

var keyboard = function(domEvent) {
	// ISO手机处理
    this.isReset = true; // 是否归位
    this.focusinHandler = function() {
        this.isReset = false; // 聚焦时键盘弹出，焦点在输入框之间切换时，会先触发上一个输入框的失焦事件，再触发下一个输入框的聚焦事件
    };
    this.focusoutHandler = function() {
        this.isReset = true;
        setTimeout(function() {
            // 当焦点在弹出层的输入框之间切换时先不归位
            if (this.isReset) {
                window.scroll(0, 0); // 确定延时后没有聚焦下一元素，是由收起键盘引起的失焦，则强制让页面归位
            }
        }, 30);
    };
    // Android 手机处理
    this.originHeight = document.documentElement.clientHeight || document.body.clientHeight;
    this.resizeHandler = function() {
        var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
        // 当前获得焦点的元素
        var activeElement = document.activeElement;
        if (resizeHeight < this.originHeight) {
            // 键盘弹起后逻辑
            if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA")) {
                setTimeout(function() {
                	// 让当前的元素滚动到浏览器窗口的可视区域内。
                    activeElement.scrollIntoView({
                        block: 'center'
                    });
                }, 0)
            }
        } else {
            // 键盘收起后逻辑
        }
    };
    // 解绑事件
    this.unmount = function() {
        if (this.focusinHandler && this.focusoutHandler) {
            domEvent.removeEventListener('focusin', this.focusinHandler);
            domEvent.removeEventListener('focusout', this.focusoutHandler);
        }
        if (this.resizeHandler) {
            window.removeEventListener('resize', this.resizeHandler);
        }
    }
    // 入口函数
    this.init = function(){
    	// 系统判断
	    var ua = window.navigator.userAgent.toLocaleLowerCase();
	    var isIOS = /iphone|ipad|ipod/.test(ua);
	    var isAndroid = /android/.test(ua);
	    if (isIOS) {
	        // 上面 IOS 处理
	        domEvent.addEventListener('focus', this.focusinHandler);
	        domEvent.addEventListener('blur', this.focusoutHandler);
	    }
	    if (isAndroid) {
	        // 上面 Android 处理
	        window.addEventListener('resize', this.resizeHandler);
	    }
    }
};

向下箭头CSS样式

发表于 2020-04-15 16:27:31 | 下载附件

箭头向上箭头向下箭头arrow箭头样式

HTML

<div class="more up"><em>展开</em><u><i></i></u></div>

CSS

.more {
	.font(b,14px,32px); float: right; cursor: pointer;
	em { float: left; color: #333; margin-right:8px; font-weight:normal; }
	u { 
	    position: relative; display: block; width: 0; height: 0; float: left;
	    margin-top: 14px;
	    border-right: 6px solid transparent; 
	    border-top: 7px solid #666; 
	    border-left: 6px solid transparent; 
	}
	i { 
	    position: absolute; display: block; left: -6px; bottom: 2px; width: 0; height: 0; 
	    border-right: 6px solid transparent; 
	    border-top: 7px solid #fff; 
	    border-left: 6px solid transparent; 
	}
	&:hover {
		em { color: #189AE5; }
		u { border-top: 7px solid #189AE5; }
	}
	// 向上
	&.up {
		u { 
		    border-bottom: 7px solid #666; 
		    border-top: none; 
		}
		i { 
			top: 2px; bottom: auto;
		    border-bottom: 7px solid #fff; 
		    border-top: none; 
		}
		&:hover {
			em { color: #189AE5; }
			u { border-bottom: 7px solid #189AE5; }
		}
	}
}

倒计时函数，距指定时间还有多少天多少小时多少分多少秒

发表于 2020-03-24 11:06:29 | 下载附件

倒计时距指定时间多少小时天时分秒倒计时

// 倒计时函数
countdown = function(timeStamp, secondFn, finishFn) {
    if (typeof timeStamp == 'undefined' || typeof timeStamp != 'number') return;
    var _secondFn = secondFn || function() {},
        _finishFn = finishFn || function() {},
        _timer,
        _timeStamp = timeStamp,
        _day,
        _hour,
        _minute,
        _second;
    function count() {
        _timeStamp = _timeStamp - 1;
        if (_timeStamp <= 0) {
            clearInterval(_timer);
            _day = _hour = _minute = _second = '00';
            _secondFn(_day, _hour, _minute, _second);
            _finishFn();
        }
        _day = Math.floor(_timeStamp / ( 3600 * 24 ));
        _hour = Math.floor((_timeStamp % ( 3600 * 24 )) / 3600);
        _minute = Math.floor((_timeStamp % 3600) / 60);
        _second = parseInt(_timeStamp) % 60;
        //补0
        _day = (_day < 10 ? '0' + _day : _day + '');
        _hour = (_hour < 10 ? '0' + _hour : _hour + '');
        _minute = (_minute < 10 ? '0' + _minute : _minute + '');
        _second = (_second < 10 ? '0' + _second : _second + '');
        _secondFn(_day, _hour, _minute, _second);
    }
    _timer = setInterval(count, 1000);
};

右侧固定代码（随页面滚动）

发表于 2020-03-14 09:37:12 | 下载附件

右侧固定左侧固定滚动页面右侧固定

/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2020-02-20 13:02:44
 * @version $Id$
 */

// 谭子良 右侧固定代码优化
// id 右侧固定容器
// offsetBotton 底部固定位置
function aFixedbottom(id, offsetBotton) {
	var offsetBotton = offsetBotton || 0;
	var objMarginLeft = 0;
	var isIE6 = ($.browser.msie && $.browser.version == '6.0') ? true : false;
	var Container = $('#' + id);

	if (Container.length != 1) return 'fixedbottom不能正确获取id';

	var initTop = Container.offset().top,
		initHeight = Container.height(),
		initWidth = Container.width(),
		initOutWidth = Container.outerWidth(),
		initWinH = $(window).height(),
		initBodyH = $('body').height();

	var Shadow = $('<div id="js_fixedbot_shadow"></div>').addClass(Container.attr('class')).height(initHeight).css({
		'visibility': 'hidden',
		'display': 'none'                                                                       
	});
	Container.after(Shadow);

	//页面高度、侧边栏高度均达不到一屏高度的情况下，无需脚本处理
	//if( initBodyH<=initWinH || initHeight<=initWinH ) return null;

	var fixedFlag = false;
	var triggerHeight;
	objMarginLeft = 1000 - initOutWidth - 500;

	this.setObjMarginLeft = function(wrapperWidth) {
		wrapperWidth = wrapperWidth ? wrapperWidth : 1000;
		objMarginLeft = wrapperWidth - initOutWidth - wrapperWidth / 2;
	}

	this.init = function() {
		var that = this;
		setInterval(function() {
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			var winH = $(window).height();
			//临界值(触发高度)
			if (!fixedFlag) {
				triggerHeight = Container.height() + Container.offset().top - $(window).height() + offsetBotton;
			}
			if (scrollTop >= triggerHeight) {
				fixedFlag = true;
				if (!isIE6) {
					Container.css({
						'position': 'fixed',
						'width': initWidth,
						'top': 'auto',
						'bottom': offsetBotton,
						'left': '50%',
						'marginLeft': objMarginLeft
					});
					Shadow.css('display', 'block');
				}
			} else {
				fixedFlag = false;
				if (!isIE6) {
					Container.css({
						'position': 'static',
						'marginLeft': 0
					})
					Shadow.css('display', 'none');
				}
			}
		}, 40);
	}
};

// 右侧栏固定效果
if ($('#adFix').length > 0) {
	var Fixedbottom = new aFixedbottom('adFix',94);
	Fixedbottom.init();
}

// --------------------------------------

// 谭子良 右侧固定代码优化
// id 右侧固定容器
// offsetBotton 底部固定位置
// endOffsetBotton 滚动条至页面底部时的最终 底部固定位置
function aFixedbottom(id, offsetBotton,endOffsetBotton) {
	var offsetBotton = offsetBotton || 0;
	var objMarginLeft = 0;
	var isIE6 = ($.browser.msie && $.browser.version == '6.0') ? true : false;
	var Container = $('#' + id);

	if (Container.length != 1) return 'fixedbottom不能正确获取id';

	var initTop = Container.offset().top,
		initHeight = Container.height(),
		initWidth = Container.width(),
		initOutWidth = Container.outerWidth(),
		initWinH = $(window).height(),
		initBodyH = $('body').height();

	var Shadow = $('<div id="js_fixedbot_shadow"></div>').addClass(Container.attr('class')).height(initHeight).css({
		'visibility': 'hidden',
		'display': 'none'
	});
	Container.after(Shadow);

	//页面高度、侧边栏高度均达不到一屏高度的情况下，无需脚本处理
	//if( initBodyH<=initWinH || initHeight<=initWinH ) return null;

	var fixedFlag = false;
	var triggerHeight;
	objMarginLeft = 1000 - initOutWidth - 500;

	this.setObjMarginLeft = function(wrapperWidth) {
		wrapperWidth = wrapperWidth ? wrapperWidth : 1000;
		objMarginLeft = wrapperWidth - initOutWidth - wrapperWidth / 2;
	}

	this.init = function() {
		var that = this;
		setInterval(function() {
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			var winH = $(window).height();
			//183为footer的高度
			var contentHeight = $('body').height() - endOffsetBotton;
			//临界值(触发高度)
			if (!fixedFlag) {
				triggerHeight = Container.height() + Container.offset().top - $(window).height() + offsetBotton;
			}
			if (scrollTop >= triggerHeight) {
				fixedFlag = true;
				if (!isIE6) {
					if (scrollTop >= (contentHeight - winH + offsetBotton)) {
						Container.css({
							'position': 'absolute',
							'width': initWidth,
							'bottom': 'auto',
							'top': contentHeight - Container.height(),
							'left': '50%',
							'marginLeft': objMarginLeft
						});
					} else {
						Container.css({
							'position': 'fixed',
							'width': initWidth,
							'top': 'auto',
							'bottom': offsetBotton,
							'left': '50%',
							'marginLeft': objMarginLeft
						});
					}
					Shadow.css('display', 'block');
				}
			} else {
				fixedFlag = false;
				if (!isIE6) {
					Container.css({
						'position': 'static',
						'marginLeft': 0
					})
					Shadow.css('display', 'none');
				}
			}
		}, 40);
	}
};

// 右侧栏固定效果
if ($('#adFix').length > 0) {
	var Fixedbottom = new aFixedbottom('adFix',10,94);
	Fixedbottom.init();
}

<<1 2 3 456 7 8 9 >>

每页显示10条，当前为第5页，总页数为22页