• 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();
    }
每页显示10条,当前为第1页,总页数为18页