• 自定义宽度flex分栏布局

    发表于 2017-04-07 14:51:19   |   下载附件
    自定义分栏布局flex布局-webkit-align-items
    li {
    	display: -webkit-box; display: -webkit-flex; display: flex; margin: 1rem 0;
    	-webkit-align-items: center;
    }
    li .icon {
    	width: 3.2rem; height: 3.2rem; overflow: hidden; margin-right: 1rem;
    }
    li .text {
    	-webkit-box-flex: 1; -webkit-flex: 1; flex: 1; 
    }
  • 居中 div 框的子元素

    发表于 2017-04-07 11:26:24   |   下载附件
    box-packbox-aligndisplay:-webkit-box子元素居中显示

    HTML代码:

    <div class="overdue">
    	<div class="overdue-task">
    		<p class="cover"><img src=""></p>
    		<p>这个任务被火星人虏走了<br>还是去看看其它任务吧</p>
    		<p><a href="#" class="btn">去任务专区</a></p>
    	</div>
    </div>


    LESS代码:

    .overdue {
    	height: 100%; background: #fff; text-align: center;
    	display:-moz-box; display:-webkit-box; display: box; 
    	-moz-box-pack:center; -webkit-box-pack:center; box-pack:center;
    	-moz-box-align:center; -webkit-box-align:center; box-align:center;
    	.overdue-task {
    		padding-bottom: 15rem;
    		.cover { width: 50%; display: block; margin: 0 auto; } 
    		img { width: 100%; display: block; }
    		p {
    			._f(n,1.2rem,1.8rem); color: #999;
    		}
    	}
    }


  • 记录光标位置的Jquery插件

    发表于 2017-03-27 16:49:48   |   下载附件
    光标位置selectionStartcreateRangerange对象
    // 记录光标位置的Jquery插件 click keyup change 都绑定了,故对象上不可被清理 off()
    $.fn.setrange = function(options) {
        var defaults = {};
        var opts = $.extend(defaults, options);
        // 初始化
        var init = function(el) {
            $(el).on('click keyup change',function(){
    	    	if( 'selectionStart' in el ) {
    		        var l = el.selectionEnd - el.selectionStart;
    		        $(el).attr('rangeStart',el.selectionStart);
    		    }else if(document.selection){
    		        var ra = document.selection.createRange();
    		        var start = 0;
    		        var re = el.createTextRange();	// 创建 range对象
    		        var rc = re.duplicate(); 		// 复制 range对象
    		        re.moveToBookmark(ra.getBookmark());
    		        rc.setEndPoint('EndToStart', re);
    		        $(el).attr('rangeStart',rc.text.length);
    		    }else{
    		    	$(el).attr('rangeStart',el.value.length);
    		    }
    	    });
        };
        return this.each(function() {
            init(this);
        });
    };
    
    // 调用
    $(function(){
    	$('.txt').setrange();
    	$('.txt').on('blur',function(){
    		var rangeStart = $(this).attr('rangeStart');
    		alert(rangeStart);
    	});
    });
  • jquery插件模板

    发表于 2017-03-27 09:36:38   |   下载附件
    jquery模板jquery插件
    $.fn.reportEvent = function(options) {
        var defaults = {};
        var opts = $.extend(defaults, options);
        // 初始化
        var init = function(o) {
            $(o).hover(function(){
    	    	$(this).find('.report').show();
    	    },function(){
    	    	$(this).find('.report').hide();
    	    });
        };
        return this.each(function() {
            init(this);
        });
    };
  • 在 input textarea 光标处 插入文本

    发表于 2017-03-24 13:05:29   |   下载附件
    inputtextarea光标位置插入文本
    // 在 input textarea 光标处 插入文本
    insertAtCaret:function(obj,str) {
        if (document.selection) {
            obj.focus();
            var sel = document.selection.createRange();
            sel.text = str;
            sel.select();  
        } else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
            var startPos = obj.selectionStart,
                endPos = obj.selectionEnd,
                cursorPos = startPos,
                tmpStr = obj.value;
            obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
            cursorPos += str.length;
            obj.selectionStart = obj.selectionEnd = cursorPos;
            alert(2);
        } else {
        	alert(3);
            obj.value += str;
        }
    }
  • input placeholder 样式设置

    发表于 2017-03-09 17:57:29   |   下载附件
    inputplaceholdercss样式

    全局 input placeholder 样式设置

    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: pink;
    }
    ::-moz-placeholder { /* Firefox 19+ */
      color: pink;
    }
    :-ms-input-placeholder { /* IE 10+ */
      color: pink;
    }
    :-moz-placeholder { /* Firefox 18- */
      color: pink;
    }



    某一元素 input placeholder 样式设置

    input[type="email"].big-dog::-webkit-input-placeholder {
      color: orange;
    }
  • JavaScript hasOwnProperty() 函数详解

    发表于 2017-02-28 14:53:31   |   下载附件
    hasOwnPropertyhas对象是否含有该属性

    JavaScript hasOwnProperty() 函数详解

    hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性。如果有,返回true,否则返回false。

    该方法属于Object对象,由于所有的对象都"继承"了Object的对象实例,因此几乎所有的实例对象都可以使用该方法。IE 5.5+、FireFox、Chrome、Safari、Opera等主流浏览器均支持该函数。

    object.hasOwnProperty("name")

  • 一套绝佳的图标字体库和CSS框架

    发表于 2017-02-21 11:08:27   |   下载附件
    图标字体css字体Font Awesome

    一套绝佳的图标字体库和CSS框架 http://fontawesome.dashgame.com/

    阿里巴巴矢量图标库 http://www.iconfont.cn/

  • js之事件冒泡和事件捕获详细介绍

    发表于 2017-02-20 11:55:41   |   下载附件
    事件冒泡事件捕获stopPropagationpreventDefault

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

    IE 5.5: div -> body -> document

    IE 6.0: div -> body -> html -> document

    Mozilla 1.0: div -> body -> html -> document -> window

    (2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。

    (3)DOM事件流:同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。

  • 手机端图片滑动切换效果

    发表于 2017-02-20 11:08:34   |   下载附件
    手机端图片滑动切换效果banner图片切换

    最近在研究手机端页面,其中有个简单的图片滑动效果,折腾了半天,于是我写了个小的demo。

    大概功能:自定义是否切换,支持滑动切换,循环切换等等,具体可以拿demo代码自己本地试试

    大概思路:把当前张显示,上一张定位在最前面,下一张定义在最后面,其他隐藏,通过touchstart、touchmove、touchend 三个事件加上css3的transition变

    化效果配合,实现滑动切换图片,效果类似于手机版京东的banner

    开发是基于Zepto框架,当然也支持其他任何一款手机端框架,只需将代码中的美元符号$换为指定框架操作符即可。

    下面是该效果的源码,明白思路的朋友可以自己封装成小插件注意:只支持手机端哦

每页显示10条,当前为第9页,总页数为19页