• 跨域请求之服务器设置

    发表于 2015-12-23 18:42:14   |   下载附件
    跨域json
    // 允许该站点访问服务器
    header("Access-Control-Allow-Origin: http://www.hrloo.com");
  • 模向TAB切换滚动效果,多出来时自适应定位

    发表于 2015-12-22 10:24:00   |   下载附件
    多于9条显示时TAB定位多于5条显示时TAB定位TAB切换最多只能显示N条多出的自适应定位
    $("#courseTabs").find("li").on("touchstart",function(){
    
    		// 多于9条显示时TAB定位
    		var tabs = $(this).parent().find("li");
            var lens = tabs.length;			// 总条数
            var index = tabs.index(this);	// 当前条数
            if(lens>9){
    	        if(index>3 && index<lens-4){
    	            var lefts = (index-4)*68;
    	            $(this).parent().animate({
    	               left: -lefts+"px"
    	            },500);
    	            // $(this).parent().css("left",-lefts);
    	        }else if(index<4){
    	            $(this).parent().animate({
    	               left: "0px"
    	            },500);
    	        }else if(index>lens-5){
    	            $(this).parent().animate({
    	               left: -(lens-9)*68 + "px"
    	            },500);
    	        }
            }
    // 其它代码略
    });
  • workerman 启动

    发表于 2015-12-10 18:10:48   |   下载附件
    workerman启动workerman-chat

    进入 workerman 安装目录


    php start.php start -d


  • textarea 获取选择域位置,如果未选择便是光标位置

    发表于 2015-11-27 09:15:52   |   下载附件
    光标位置textareaselectionselectionStart
    //获取选择域位置,如果未选择便是光标位置
    var getSelection = function(el) {
        return (
        ('selectionStart' in el && function () {
            var l = el.selectionEnd - el.selectionStart;
            return {
                start: el.selectionStart,
                end: el.selectionEnd,
                length: l,
                text: el.value.substr(el.selectionStart, l)
            };
        }) ||
    
        (document.selection && function () {
    
            el.focus();
    
            var r = document.selection.createRange();
            if (r === null) {
                return {
                    start: 0,
                    end: el.value.length,
                    length: 0
                }
            }
    
            var re = el.createTextRange();
            var rc = re.duplicate();
            re.moveToBookmark(r.getBookmark());
            rc.setEndPoint('EndToStart', re);
    
            return {
                start: rc.text.length,
                end: rc.text.length + r.text.length,
                length: r.text.length,
                text: r.text
            };
        }) ||
    
        function () {
            return null;
        }
    
        )();
    }
  • //获取页面中选中的文字

    发表于 2015-11-27 09:12:06   |   下载附件
    getSelection选中文字
    // 获取页面中选中的文字
    function getSelectedText(){
         if(window.getSelection){  //FF
              return window.getSelection().toString();
         }else{ //IE
              return document.selection.createRange().text;
         }
    }
  • getSelection-获得当前输入框中的光标位置

    发表于 2015-11-24 18:42:21   |   下载附件
    光标位置document.selection.createRangeselectionStart
    //获取选择域位置,如果未选择便是光标位置
        function getSelection(el) {
            return (
                ('selectionStart' in el && function() {
                    var l = el.selectionEnd - el.selectionStart;
                    return {
                        start: el.selectionStart,
                        end: el.selectionEnd,
                        length: l,
                        text: el.value.substr(el.selectionStart, l)
                    };
                }) ||
                (document.selection && function() {
    
                    el.focus();
    
                    var r = document.selection.createRange();
                    if (r === null) {
                        return {
                            start: 0,
                            end: el.value.length,
                            length: 0
                        }
                    }
    
                    var re = el.createTextRange();
                    var rc = re.duplicate();
                    re.moveToBookmark(r.getBookmark());
                    rc.setEndPoint('EndToStart', re);
    
                    return {
                        start: rc.text.length,
                        end: rc.text.length + r.text.length,
                        length: r.text.length,
                        text: r.text
                    };
                }) ||
    
                function() {
                    return null;
                }
    
            )();
    
        }
    
        // 测试函数
        function abc(o) {
            document.getElementById("val").value = getSelection(o).start;
        }
  • jQuery Templates plugin vBeta1.0.0

    发表于 2015-11-05 09:18:25   |   下载附件
    Templates前端模板煊染插件jquery前端模板

    链接地址:https://github.com/BorisMoore/jquery-tmpl

    jQuery Templates is no longer in active development, and will be superseded by JsRender. See vBeta1.0.0 tag for released beta version. Requires jQuery version 1.4.2.

    Note: This is the original official jQuery Templates plugin. The project was maintained by the jQuery team as an official jQuery plugin. Since the jQuery team has decided not to take this plugin past beta, it has been returned to the principal developer's GitHub account (Boris Moore). For more information on the history of jQuery Templates, and the roadmap going forward, see jQuery Templates and JsViews: The Roadmap

  • CSS3动画缓动效果

    发表于 2015-11-04 08:39:28   |   下载附件
    缓动效果CSS3动画animation-play-state
    .brand-list .lt li img { width: 80px; height: 80px; padding: 5px; background: #eeeeee; border-radius: 100%; margin: 15px; cursor:pointer; 
    	-webkit-transition: 0.5s ease; 
    	-o-transition: 0.5s ease; 
    	transition: 0.5s ease; 
    	-webkit-transition-property:all;
        -moz-transition-property:all;
    	transition-property:all;
    	-webkit-animation-play-state : running;
    	-moz-animation-play-state : running;
    	animation-play-state : running;
    }
    .brand-list .lt li.selected img , .brand-list .lt li:hover img{ width: 110px; height: 116px; padding: 2px; margin: 0px; cursor:default; 
    	-webkit-transition: 0.5s ease; 
    	-o-transition: 0.5s ease; 
    	transition: 0.5s ease; 
    	-webkit-transition-property:all;
        -moz-transition-property:all;
    	transition-property:all;
    	/*
    	-webkit-animation-play-state : paused;
    	-moz-animation-play-state : paused;
    	animation-play-state : paused;
    	*/
    }
  • 倒计时函数

    发表于 2015-10-29 09:43:24   |   下载附件
    倒计时时间
    // 倒计时函数
    var setTimeoutDoing = function(node){
    	// 倒计时
    	var time = {
    		hour : parseInt(node.find('.tm').eq(0).text()),
    		minute : parseInt(node.find('.tm').eq(1).text()),
    		second : parseInt(node.find('.tm').eq(2).text())	
    	}
    	var html = {
    		hour : "00",
    		minute : "00",
    		second : "00"
    	}
    	var total = time.hour * 60 * 60 + time.minute * 60 + time.second;
    	var timer = setInterval(function(){
    		if(total == 0){
    			clearInterval(timer);
    		}else{
    			total -- ;
    			var curtime = {
    				hour : parseInt((total / (60*60))),
    				minute : parseInt(((total % (60*60)) % (60*60)) / 60),
    				second : parseInt(((total % (60*60)) % (60*60)) % 60)
    			}
    			html = {
    				hour : curtime.hour > 9 ? curtime.hour : "0" + curtime.hour,
    				minute : curtime.minute > 9 ? curtime.minute : "0" + curtime.minute,
    				second : curtime.second > 9 ? curtime.second : "0" + curtime.second
    			}
    		}
    		node.find('.tm').eq(0).text(html.hour);
    		node.find('.tm').eq(1).text(html.minute);
    		node.find('.tm').eq(2).text(html.second);	
    	},1000);
    }
    setTimeoutDoing($('.timeline'));
  • 转:hammerJs-v2.0.4详解

    发表于 2015-10-23 17:37:45   |   下载附件
    touchswiper移动端手势事件插件hammerJs

    移动端框架当前还处在初级阶段,但相对于移动端的应用来说已经有很长时间了。虽然暂时还没有PC端开发的需求量大,但移动端的Web必然是一种趋势,在接 触移动端脚本的过程中,最开始想到的是juqery。Jquery2.0版本及以上已经开始偏向移动端,如对h5的支持,但支持还是不够完善,希望jq在 后面的版本能够逐渐支持起来。

    最初在开发移动端Web的时候使用w3c标准的语法结构和原生的js开发,但相对来说开发量比较大,而且每一步都要考虑各移动端浏览器的兼容,像比较让程 序员头痛的大wp手机,很多事件都向w3c申请单独的标准。因此一个好的兼容性架构对于开发者来说可以节省很大一部分工作量。

    刚开始接触移动端框架之初也问了一些一直搞前端的朋友,大部份都在百度阿里等工作。参考大家的建议后我们做项目使用了zepto.js(很多搞前端的朋友 应该并不陌生)。这个框架有个很大的问题就是不兼容wp手机,使用zepto.js开发完项目后,再针对wp手机兼容做调整总感觉有些“得不偿失”,后来 咨询了些朋友,他们所在的公司在开发的时候基本都放弃wp的兼容(我只能对wp说“呵呵”了)。后面就咨询到有用hammer.js进行开发的。我们研究 了下,hammer.js轻量级,封装的也比较好。用起来也很方便。兼容性也不错。但网上中文资料比较少,园子写hammer的就更少了。因此有了这篇文 章。

    此文章基于hammer.js 官网:http://hammerjs.github.io/ ,版本基于v2.0.4。如果该文章的api已过期,请自行到官网查询最新api。此文章只做入门使用。

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