<![CDATA[sproutcore芽心]]> http://blog.sproutcore.org zh-cn www.emlog.net 深入了解php底层机制 http://blog.sproutcore.org/?post=98

]]> Tue, 06 Dec 2011 08:10:25 +0000 怡红公子 http://blog.sproutcore.org/?post=98 高性能JavaScript_编程 http://blog.sproutcore.org/?post=97

]]> Wed, 16 Nov 2011 02:15:24 +0000 怡红公子 http://blog.sproutcore.org/?post=97 扩展常用js类基本方法 http://blog.sproutcore.org/?post=96
  •   /** 
  •          * 扩展基础类 
  •          * 得到字符串的长度，包括中文和英文 
  •          **/  
  •         String.prototype.charlen = function() {  
  •             var arr = this.match(/[^\x00-\xff]/ig);  
  •             return this.length + (arr == null ? 0 : arr.length);  
  •         }  
  •   
  •         /** 
  •          * 扩展基础类 
  •          * 格式化字符串${0} -> 参考printf %s 
  •          **/  
  •         String.prototype.format = function() {  
  •             var args = arguments;  
  •             return this.replace(/\$\{(\d+)\}/g,                
  •                 function(m, i){  
  •                     return args[i];  
  •                 });  
  •         }   
  •   
  •         /** 
  •          * 扩展基础类 
  •          * 字符串首尾去空格 
  •          **/  
  •         String.prototype.trim = function() {  
  •             return this.replace(/(^\s*)|(\s*$)/g, "");  
  •         }  
  •   
  •         /** 
  •          * 扩展基础类 
  •          * 字符串包含字符串判断 
  •          **/  
  •         String.prototype.contains = function(sub) {  
  •             return this.indexOf(sub) != -1;  
  •         }  
  •   
  •         /** 
  •          * 扩展基础类 
  •          * 字符串比较大小 
  •          **/  
  •         String.prototype.compare = function(b) {  
  •             if(!b)  
  •                 return -1;  
  •   
  •             if(this.length != b.length)  
  •                 return this.length - b.length;  
  •   
  •             var i = 0;  
  •             for (; i < this.length; i++){  
  •                 var val = this.charCodeAt(i) - b.charCodeAt(i);  
  •                 if(val != 0)  
  •                     return val;  
  •             }  
  •   
  •             return 0;  
  •         }  
  •   
  •         /** 
  •          * 扩展基础类 
  •          * 替换字符 
  •          **/  
  •         String.prototype.replaceLen = function(start, len, replaced) {  
  •             if(!len)  
  •                 return this;  
  •   
  •             if(start >= this.length)  
  •                 return this;  
  •   
  •             var returnSeg = '';  
  •             var returnSeg2 = '';  
  •             var i = 0;  
  •             for (; i < this.length; i++){  
  •                 var c = this.charAt(i);  
  •                 if(i < start)  
  •                     returnSeg += c;  
  •   
  •                 if(i >= start + len)  
  •                     returnSeg2 += c;  
  •             }  
  •   
  •             return returnSeg + replaced + returnSeg2;  
  •         }  
  •   
  •         /** 
  •          * 扩展基础类 
  •          * 替换字符，这个在替换填入比较有用，比如***天***小时 替换为 <input />天<input />小时 
  •          **/  
  •         String.prototype.replaceChar = function(target, replaced, start) {  
  •             if(!target)  
  •                 return this;  
  •   
  •             if(!start)  
  •                 start = 0;  
  •   
  •             var returnVal = this.substring(0, start);  
  •             var index = 0;  
  •             for (var i = start; i < this.length; i++) {  
  •                 var c = this.charAt(i);  
  •                 target = typeof target == 'function' ? target.call(this, index) : target;  
  •                 if (c == target) {  
  •                     returnVal += typeof replaced == 'function' ? replaced.call(this, index) : replaced;  
  •                     while (i < this.length - 1 && this.charAt(i + 1) == c) {  
  •                         i++;  
  •                     }  
  •                     index++;  
  •                 }else{  
  •                     returnVal += c;  
  •                 }  
  •             }  
  •   
  •             return returnVal;  
  •         }  
  •   
  •         /** 
  •          * 扩展基础类 
  •          * 克隆复制（简单copy而已） 
  •          **/  
  •         Array.prototype.clone = function(){  
  •             var arr = [];  
  •             var i = 0;  
  •             for(; i < this.length; i++){  
  •                 switch(typeof this[i]){  
  •                     case 'object':  
  •                         var obj = {};  
  •                         for(key in this[i])  
  •                             obj[key] = this[i][key];  
  •                         arr.push(obj);  
  •                         break;  
  •                     default:  
  •                         arr.push(this[i]);  
  •                         break;  
  •                 }  
  •             }  
  •             return arr;  
  •         }  
  •   
  •         /** 
  •          * 扩展基础类 
  •          * 清空 
  •          **/  
  •         Array.prototype.clear = function() {  
  •             this.splice(0, this.length);  
  •         }  
  •   
  •         /** 
  •          * 扩展基础类 
  •          * 数组包含元素 
  •          **/  
  •         Array.prototype.contains = function(el) {  
  •             var i;  
  •             for(i = 0; i < this.length; i++) {    
  •                 if(this[i] == el)    
  •                     return true;    
  •             }    
  •             return false;    
  •         }  
  •   
  •         /** 
  •          * 扩展基础类 
  •          * 数组添加数组 
  •          **/  
  •         Array.prototype.merge = function(arr) {  
  •             if(arr){  
  •                 var i;  
  •                 for(i = 0; i < arr.length; i++) {    
  •                     this.push(arr[i]);  
  •                 }    
  •             }  
  •         }  
  •   
  •         /** 
  •          * 扩展基础类 
  •          * 根据值和属性获取到数组的对象下标 
  •          **/  
  •         Array.prototype.indexOf = function(val, field){  
  •             var i = 0;  
  •             for(; i < this.length; i++){  
  •                 if(this[i] && (field ? this[i][field] == val : this[i] == val)){  
  •                     return i;  
  •                 }  
  •             }  
  •             return -1;  
  •         }  
  •   
  •         /** 
  •          * 扩展基础类 
  •          * 最后一个下标 
  •          **/  
  •         Array.prototype.lastIndexOf = function(val, field){  
  •             var i = 0;  
  •             var max = -1;  
  •             for(; i < this.length; i++){  
  •                 if(this[i] && (field ? this[i][field] == val : this[i] == val)){  
  •                     max = i;  
  •                 }  
  •             }  
  •             return max;  
  •         }  
  •   
  •         /** 
  •          * 扩展基础类 
  •          * 数组唯一 
  •          **/  
  •         Array.prototype.unique = function(field){  
  •             var arr = [];  
  •   
  •             var i = 0;  
  •             for(; i < this.length; i++){  
  •                 var val = field ? this[i][field] : this[i];  
  •                 var index = this.lastIndexOf(val, field);  
  •                 if(index == i)  
  •                     arr.push(this[i]);  
  •             }  
  •   
  •             return arr;  
  •         }  
  •   
  •         /** 
  •          * 扩展基础类 
  •          * 数组最大值 
  •          **/  
  •         Array.prototype.max = function(field){  
  •             var result = -1;  
  •   
  •             var i = 0;  
  •             for(; i < this.length; i++){  
  •                 var val = field ? this[i][field] : this[i];  
  •                 if(val > result)  
  •                     result = val;  
  •             }  
  •   
  •             return result;  
  •         }  
  •   
  •         /** 
  •          * 扩展基础类 
  •          * 数组最小值 
  •          **/  
  •         Array.prototype.min = function(field){  
  •             var result = -1;  
  •   
  •             var i = 0;  
  •             for(; i < this.length; i++){  
  •                 var val = field ? this[i][field] : this[i];  
  •                 if(val < result)  
  •                     result = val;  
  •             }  
  •   
  •             return result;  
  •         }  
  •   
  •         /** 
  •          * 扩展基础类 
  •          * 日期格式化 
  •          **/  
  •         Date.prototype.format = function(pat){  
  •             var year = this.getFullYear();  
  •             var month = this.getMonth() + 1;  
  •             var day = this.getDate();  
  •             var hour = this.getHours();  
  •             var minute = this.getMinutes();  
  •             var second = this.getSeconds();  
  •             // 两位补齐  
  •             month = month > 9 ? month : "0" + month;  
  •             day = day > 9 ? day : "0" + day;  
  •             hour = hour > 9 ? hour : "0" + hour;  
  •             minute = minute > 9 ? minute : "0" + minute;  
  •             second = second > 9 ? second : "0" + second;  
  •             if(!pat){  
  •                 pat = "yyyy-MM-dd";  
  •             }  
  •             pat = pat.replace(/yyyy/g, year);  
  •             pat = pat.replace(/MM/g, month);  
  •             pat = pat.replace(/dd/g, day);  
  •             pat = pat.replace(/HH/gi, hour);  
  •             pat = pat.replace(/mm/g, minute);  
  •             pat = pat.replace(/ss/g, second);  
  •             return pat;  
  •         }  
  •   
  •         // 减去时差的毫秒数（取决于使用的浏览器的locale设置）  
  •         Date.prototype.getTime2 = function(){  
  • //          return this.getTime();  
  •             return this.getTime() - this.getTimezoneOffset() / 60 * 3600 * 1000;  
  •         }  
  •   
  •         // 日期相差天数  
  •         Date.prototype.diff = function(date){  
  •             return Math.ceil((this - date) / (1000 * 60 * 60 * 24));  
  •         }  
  •   
  •         // 日期加减计算  
  •         Date.prototype.add = function(days){  
  •             return new Date(this.getTime() + days * (1000 * 60 * 60 * 24));  
  •         }  
  •   
  •         // 日期加减计算  
  •         Date.prototype.addMonth = function(months){  
  •             var day = this.getDate();  
  •             var month = this.getMonth() + 1;  
  •             var year = this.getFullYear();  
  •             month += months;    
  •             if(month > 12){  
  •                 year += Math.floor(month / 12);  
  •                 month = month % 12;  
  •             }  
  •             return Date.parse(month + '/' + day + '/' + year);  
  •         }  
  •   
  •         // 解析字符串，以默认 pat = "yyyy-MM-dd"的格式，而不是MM/dd/yyyy  
  •         Date.parse2 = function(str, pat){  
  •             if(str == null || str == '')  
  •                 return new Date();  
  •             var rstr = str.replace(/(\d{4})([-\./])(\d{1,2})\2(\d{1,2})/, "$3/$4/$1");  
  •             return new Date(Date.parse(rstr));  
  •         }  
  •   
  •         // 解析字符串，json date obj  
  •         // 减去时差的毫秒数（取决于使用的浏览器的locale设置）  
  •         Date.parse3 = function(obj){  
  • //          return new Date(obj.time);  
  •             return new Date(obj.time - new Date().getTimezoneOffset() / 60 * 3600 * 1000);  
  • //          var str = obj.year + '-' + (obj.month + 1) + '-' + obj.date + ' ' +   
  • //              obj.hours + ':' + obj.minutes + ':' + obj.seconds;  
  • //          return Date.parse2(str);  
  •         }  
  • /** 
  •  * 扩展基础类 
  •  * 克隆复制（简单copy而已） 
  •  **/  
  • Array.prototype.clone = function(){  
  •     return this.splice(0);  
  • }  
  •   
  • /** 
  •  * 扩展基础类 
  •  * 清空 
  •  **/  
  • Array.prototype.clear = function() {  
  •     this.length = 0;  
  • }  
  •  
    • ]]>     Wed, 16 Nov 2011 01:15:16 +0000 怡红公子 http://blog.sproutcore.org/?post=96     javascript 原型函数 prototype 工作原理 http://blog.sproutcore.org/?post=95 Javascript 中的原型函数（prototype）的工作原理，在 javascript 中每次声明新函数的过程中，就会为其创建一个 prototype 的属性。在未加其他附带条件情况下，所有的 prototype 属性都会自动获取 constractor 属性，constructor 内包含一个指向 prototype 属性所属函数的指针（就是说 constructor 回指构造函数本身）。 

    举个例子来说，Fruit.prototype.constructor 指向 Fruit。并且可以通过这个构造函数，为其添加更多的属性和方法。 

    当调用构造函数创建一个新实例后，该实例内部包含一个指针指向构造函数的原型函数。此时我们不用去关心内部的这个指针到底是什么（这个指针还的确有个名字：__proto__ 估计是为了对应 prototype 而起的名字吧 ~\(≧▽≦)/~ ），只需记住它的指向即可（指向构造函数的原型函数）。需要注意的是，这个 __proto__ 只存在于函数实例与构造函数的原型函数之间，而非实例与构造函数之间。 

    点击查看原图

    如上图所示，Fruit_1, Fruit_2 与构造函数没有直接的联系，只是这两个实例的 __proto__ 属性指向了 Fruit.prototype。虽然这两个实例都不包含属性和方法，但却可以通过 fruit_1.showPrice() 来调用。其理论依据是通过查找对象属性的过程来实现的。 

    举个例子来说： 

     

    1. function Fruit(){  
    2. }  
    3.   
    4. Fruit.prototype.category = "apple";  
    5. Fruit.prototype.price = 19.9;  
    6. Fruit.prototype.showPrice = function(){  
    7.     alert(this.price);   
    8. }  
    9.   
    10. var fruit_1 = new Fruit();  
    11. var fruit_2 = new Fruit();  
    12. alert(fruit_1.constructor == fruit_2.constructor);  // 输出 true  
    13. fruit_1.showPrice(); // 19.9  

    此时，Fruit（）构造函数变成了一个空函数，但却可以通过调用 prototype 往构造函数内直接增加属性和方法。并且在此时，仍然可以调用构造函数来 new 新对象，并且新对象具有通过原型函数向构造函数直接增加的属性和方法（有点拗口啊，就是说，通过原型函数直接向构造函数增加属性和方法，增加的这些属性和方法，在通过构造函数 new 出来新实例中也具有）。 

    并且通过上面的例子可以看出，通过构造函数 new 出来的不同对象，具有与构造函数相同的属性和方法。并且这些都是共有的。

    这一切的一切表明，在构造函数外部可以通过原型函数为其增加属性和方法，并且与在构造函数内部声明具有相同的效果。 

    上述代码是在没有构造函数的情况下，如果存在构造函数，则变量首先去检索具有给定名字的对象的实例函数，如果存在则执行实例函数，如果不存在，则继续向前检索原型函数。 

    犹如这条检索链：对象 -> 实例函数属性或方法 -> （若没有找到）则检索原型函数。 

    下面一个例子很好的说明了这一点： 

     

    1. function Fruit(){  
    2. this.showPrice = showPrice;  
    3. }  
    4.   
    5. function showPrice(){  
    6. alert("100000");  
    7. }  
    8.   
    9. Fruit.prototype.category = "apple";  
    10. Fruit.prototype.price = 19.9;  
    11. Fruit.prototype.showPrice = function(){  
    12. alert(this.price);   
    13. }  
    14.   
    15. var fruit_1 = new Fruit();  
    16. var fruit_2 = new Fruit();  
    17. fruit_1.showPrice(); // 100000  

    输出为100000，则正面首先从构造函数去检索，检索到了之后就不再去执行原型函数了，但如果按照 javascript 解释性语言来解释的话，输出就应该是 19.9 了。

    但是在使用 prototype 的时候一共有两种方法，一种方法就如上面所示，Fruit.prototype.xxx = "xxx";就可以。 

     

    1. function Fruit(){  
    2.         }  
    3.               
    4. Fruit.prototype = {  
    5.     category :"apple" ,  
    6.     price : 19.9 ,  
    7.     showPrice : function(){  
    8.         alert(price);  
    9.         }  
    10.     }  
    11.               
    12. var fruit = new Fruit();  
    13. alert(fruit.constructor == Fruit); // false  
    14. alert(fruit.constructor == Object); // true  

    很奇怪的一点是，fruit.constructor == Fruit() 的输出false，不再是 true 了。这是因为本质上我们已经重写了默认的 prototype 对象，因此 constructor 属性所指向的内容也就变成了新对象的 constructor 属性，而这个属性指向的是 Object 构造函数。 

    可以通过增加一句话来定义 constructor。 

     

    1. function Fruit(){  
    2.         }  
    3.               
    4. Fruit.prototype = {  
    5.     constructor:Fruit ,  
    6.     category :"apple" ,  
    7.     price : 19.9 ,  
    8.     showPrice : function(){  
    9.         alert(price);  
    10.         }  
    11.     }  
    12.               
    13. var fruit = new Fruit();  
    14. alert(fruit.constructor == Fruit); // true  
    15. alert(fruit.constructor == Object); //false  

    显示的声明 constructor 就可以让它知道所指的构造函数。 

    ]]>     Mon, 14 Nov 2011 09:14:07 +0000 怡红公子 http://blog.sproutcore.org/?post=95     如何利用jquery做个图片剪切插件 http://blog.sproutcore.org/?post=94 一、建立一个目录如下

    点击查看原图

    二、建立一个测试页面如下

     

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">  
    3.     <head>  
    4.         <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />  
    5.         <title>图片剪切测试页</title>  
    6.         <link href="style.css" media="screen" rel="stylesheet" type="text/css" />  
    7.         <link href="resources/js/imageCrop/jquery.imagecrop.css" media="screen" rel="stylesheet" type="text/css" />  
    8.         <script src="resources/js/jquery-1.6.2.min.js" type="text/javascript"></script>  
    9.         <script src="resources/js/imageCrop/jquery.imagecrop.js" type="text/javascript"></script>  
    10.     </head>  
    11.   
    12.     <body>  
    13.         <div id="wrapper">  
    14.             <h1>jQuery Image Cropping Plug-In</h1>  
    15.   
    16.             <div class="image-decorator">  
    17.                 <img alt="jQuery Image Cropping Plug-In" height="360" id="example" src="resources/images/example.jpg" width="480" />  
    18.             </div><!-- .image-decorator -->  
    19.         </div><!-- #wrapper -->  
    20.     </body>  
    21. </html>  

    三、新建一个css样式表如下

     

    1. * {  
    2.     margin : 0;  
    3.     outline : 0;  
    4.     padding : 0;  
    5. }  
    6.   
    7. body {  
    8.     background-color : #ededed;  
    9.     color : #646464;  
    10.     font-family : 'Verdana', 'Geneva', sans-serif;  
    11.     font-size : 12px;  
    12.     text-shadow : 0 1px 0 #ffffff;  
    13. }  
    14.   
    15. h1 {  
    16.     font-size : 24px;  
    17.     font-weight : normal;  
    18.     margin : 0 0 10px 0;  
    19. }  
    20.   
    21. div#wrapper {  
    22.     margin : 25px 25px 25px 25px;  
    23. }  
    24.   
    25. div.image-decorator {  
    26.     -moz-border-radius : 5px 5px 5px 5px;  
    27.     -moz-box-shadow : 0 0 6px #c8c8c8;  
    28.     -webkit-border-radius : 5px 5px 5px 5px;  
    29.     -webkit-box-shadow : 0 0 6px #c8c8c8;  
    30.     background-color : #ffffff;  
    31.     border : 1px solid #c8c8c8;  
    32.     border-radius : 5px 5px 5px 5px;  
    33.     box-shadow : 0 0 6px #c8c8c8;  
    34.     display : inline-block;  
    35.     height : 360px;  
    36.     padding : 5px 5px 5px 5px;  
    37.     width : 480px;  
    38. }  

    四、写jquery插件

    打开 /resources/js/imageCrop/jquery.imagecrop.js文件

     

    1. // 写jquery插件  
    2. (function($) {  
    3.     $.imageCrop = function(object, customOptions) {};  
    4.   
    5.     $.fn.imageCrop = function(customOptions) {  
    6.         //遍历对象
    7.         this.each(function() {  
    8.             var currentObject = this,  
    9.                 image = new Image();  
    10.   
    11.             // 当对象加载完毕添加imageCrop  
    12.             image.onload = function() {  
    13.                 $.imageCrop(currentObject, customOptions);  
    14.             };  
    15.   
    16.             // 有时剪切图片无法加载得重设src  
    17.             image.src = currentObject.src;  
    18.         });  
    19.  
    20.         return this;  
    21.     };  
    22. }) (jQuery);  

    五、写操作选项

     

    1. $.imageCrop = function(object, customOptions) {   
    2.     // 默认设置  
    3.     var defaultOptions = {  
    4.         allowMove : true,  
    5.         allowResize : true,  
    6.         allowSelect : true,  
    7.         minSelect : [0, 0],  
    8.         outlineOpacity : 0.5,  
    9.         overlayOpacity : 0.5,  
    10.         selectionPosition : [0, 0],  
    11.         selectionWidth : 0,  
    12.         selectionHeight : 0  
    13.     };  
    14.   
    15.     // 设置默认  
    16.     var options = defaultOptions;  
    17.   
    18.     // 添加自设置的
    19.     setOptions(customOptions);  
    20. };
    21.  
    22.  
    23. function setOptions(customOptions) {  
    24.     options = $.extend(options, customOptions);  
    25. };  
    26.  

     

    • allowMove –选区是否可以移动 (默认可以).
    • allowResize – 选区是否可以重设大小 (默认可以).
    • allowSelect – 是否应许用户建立选区 (默认可以).
    • minSelect – 选区最小尺寸 (默认[0, 0]).
    • outlineOpacity – 外边线透明度 (默认0.5).
    • overlayOpacity – 覆盖层透明度 (默认 0.5).
    • selectionPosition –选区相对位置 (默认[0, 0]).
    • selectionWidth – 选区宽度(默认0).
    • selectionHeight – 选区高度 (默认0).

    五、建立层

    点击查看原图

    先看下这张图，来认识下图片各层

     

    1. ...  
    2.   
    3. // 初始化图片层 
    4. var $image = $(object); 
    5.  
    6. // 初始化图片把柄
    7. var $holder = $('<div />')  
    8.     .css({  
    9.         position : 'relative'  
    10.     })  
    11.     .width($image.width())  
    12.     .height($image.height());  
    13.   
    14. // 图片填充把柄
    15. $image.wrap($holder)  
    16.     .css({  
    17.         position : 'absolute'  
    18.     });  
    19.   
    20.  
    21. //在图片 
    22. var $overlay = $('<div id="image-crop-overlay" />')  
    23.     .css({  
    24.         opacity : options.overlayOpacity,  
    25.         position : 'absolute'  
    26.     })  
    27.     .width($image.width())  
    28.     .height($image.height())  
    29.     .insertAfter($image);  
    30.  
    31. // 在图片上建立一个覆盖层
    32. var $overlay = $('<div id="image-crop-overlay" />')  
    33.     .css({  
    34.         opacity : options.overlayOpacity,  
    35.         position : 'absolute'  
    36.     })  
    37.     .width($image.width())  
    38.     .height($image.height())  
    39.     .insertAfter($image);  
    40.   
    41. // 在覆盖层上建立一个拽动层 
    42. var $trigger = $('<div />')  
    43.     .css({  
    44.         backgroundColor : '#000000',  
    45.         opacity : 0,  
    46.         position : 'absolute'  
    47.     })  
    48.     .width($image.width())  
    49.     .height($image.height())  
    50.     .insertAfter($overlay);  
    51.  
    52. // 在拽动层上建立一个边框层 
    53. var $outline = $('<div id="image-crop-outline" />')  
    54.     .css({  
    55.         opacity : options.outlineOpacity,  
    56.         position : 'absolute'  
    57.     })  
    58.     .insertAfter($trigger);  
    59.  
    60. //最后建立顶层也就是选区层  
    61. var $selection = $('<div />')  
    62.     .css({  
    63.         background : 'url(' + $image.attr('src') + ') no-repeat',  
    64.         position : 'absolute'  
    65.     })  
    66.     .insertAfter($outline);  

    为了能够在一个相对定位元素内控制决定定位元素，所以控制层是相对定位的而其他层都是绝对定位

    六、更新接口

     

    1. // 初始化一些全局变量
    2. var selectionExists,  
    3.     selectionOffset = [0, 0],  
    4.     selectionOrigin = [0, 0];
    5.  
    6. // 判断选区大小与设置最小选区比较并设置selectionExists值
    7. if (options.selectionWidth > options.minSelect[0] &&  
    8.     options.selectionHeight > options.minSelect[1])  
    9.         selectionExists = true;  
    10.     else  
    11.         selectionExists = false;  
    12.   
    13. ...  
    14.   
    15. // 先初始化插件接口
    16. updateInterface();  
    17. ...
    18. if (options.allowSelect)  
    19.     // 在拽动层绑定鼠标按下事件
    20.     $trigger.mousedown(setSelection);  
    21. ...  
    22.   
    23. // 获取当前元素位置
    24. function getElementOffset(object) {  
    25.     var offset = $(object).offset();  
    26.   
    27.     return [offset.left, offset.top];  
    28. };  
    29.   
    30. //获取鼠标相对于图片的位置 
    31. function getMousePosition(event) {  
    32.     var imageOffset = getElementOffset($image);  
    33.   
    34.     var x = event.pageX - imageOffset[0],  
    35.         y = event.pageY - imageOffset[1];  
    36.   
    37.     x = (x < 0) ? 0 : (x > $image.width()) ? $image.width() : x;  
    38.     y = (y < 0) ? 0 : (y > $image.height()) ? $image.height() : y;  
    39.   
    40.     return [x, y];  
    41. };  
    42.  
    43. ...  
    44.   
    45. // 更新覆盖层  
    46. function updateOverlayLayer() {  
    47.     $overlay.css({  
    48.         display : selectionExists ? 'block' : 'none'  
    49.     });  
    50. };
    51.  
    52. ...  
    53.   
    54. // 更新拽动层
    55. function updateTriggerLayer() {  
    56.     $trigger.css({  
    57.         cursor : options.allowSelect ? 'crosshair' : 'default'  
    58.     });  
    59. };  
    60. ...  
    61.   
    62. // 更新选区 
    63. function updateSelection() {  
    64.     // 更新边框层
    65.     $outline.css({  
    66.         cursor : 'default',  
    67.         display : selectionExists ? 'block' : 'none',  
    68.         left : options.selectionPosition[0],  
    69.         top : options.selectionPosition[1]  
    70.     })  
    71.     .width(options.selectionWidth)  
    72.     .height(options.selectionHeight);  
    73.   
    74.     // 更新选区层
    75.     $selection.css({  
    76.         backgroundPosition : ( - options.selectionPosition[0] - 1) + 'px ' + ( - options.selectionPosition[1] - 1) + 'px',  
    77.         cursor : options.allowMove ? 'move' : 'default',  
    78.         display : selectionExists ? 'block' : 'none',  
    79.         left : options.selectionPosition[0] + 1,  
    80.         top : options.selectionPosition[1] + 1  
    81.     })  
    82.     .width((options.selectionWidth - 2 > 0) ? (options.selectionWidth - 2) : 0)  
    83.     .height((options.selectionHeight - 2 > 0) ? (options.selectionHeight - 2) : 0);  
    84. };  
    85. ...  
    86.   
    87. // 更新鼠标类型 
    88. function updateCursor(cursorType) {  
    89.     $trigger.css({  
    90.             cursor : cursorType  
    91.         });  
    92.   
    93.     $outline.css({  
    94.             cursor : cursorType  
    95.         });  
    96.   
    97.     $selection.css({  
    98.             cursor : cursorType  
    99.         });  
    100. };
    101. ... 
    102. // 更新插件接口  
    103. function updateInterface(sender) {  
    104.     switch (sender) {  
    105.         case 'setSelection' : 
    106.             updateOverlayLayer(); 
    107.             updateSelection(); 
    108.  
    109.             break; 
    110.         case 'resizeSelection' : 
    111.             updateSelection(); 
    112.             updateCursor('crosshair');  
    113.   
    114.             break;  
    115.         default :  
    116.             updateTriggerLayer();  
    117.             updateOverlayLayer();  
    118.             updateSelection();  
    119.     }  
    120. };  

    七、设置选区

     

    1. ...  
    2.   
    3. // 设置选区 
    4. function setSelection(event) {  
    5.     // 阻止事件的默认动作
    6.     event.preventDefault();  
    7.   
    8.     // 阻止事件警告
    9.     event.stopPropagation();  
    10.   
    11.     // 绑定'mousemove'、'mouseup'事件
    12.     $(document).mousemove(resizeSelection).mouseup(releaseSelection);  
    13.   
    14.     // 通知选区退出 
    15.     selectionExists = true;  
    16.   
    17.     //重设选区大小
    18.     options.selectionWidth = 0;  
    19.     options.selectionHeight = 0;  
    20.   
    21.     //获取选区原始层
    22.     selectionOrigin = getMousePosition(event);  
    23.   
    24.     //设置位置 
    25.     options.selectionPosition[0] = selectionOrigin[0];  
    26.     options.selectionPosition[1] = selectionOrigin[1];  
    27.   
    28.     // 回调当前接口
    29.     updateInterface('setSelection');  
    30. };  

    八、重置选区

     

    1. ...  
    2.   
    3. // 重设当前选区大小
    4. function resizeSelection(event) {  
    5.     //  阻止事件的默认动作  
    6.     event.preventDefault();  
    7.   
    8.     // 阻止事件警告
    9.     event.stopPropagation();  
    10.   
    11.     var mousePosition = getMousePosition(event);  
    12.   
    13.     //获取选区大小
    14.     options.selectionWidth = mousePosition[0] - selectionOrigin[0];  
    15.     options.selectionHeight = mousePosition[1] - selectionOrigin[1];  
    16.   
    17.     if (options.selectionWidth < 0) {  
    18.         options.selectionWidth = Math.abs(options.selectionWidth);  
    19.         options.selectionPosition[0] = selectionOrigin[0] - options.selectionWidth;  
    20.     } else  
    21.         options.selectionPosition[0] = selectionOrigin[0];  
    22.   
    23.     if (options.selectionHeight < 0) {  
    24.         options.selectionHeight = Math.abs(options.selectionHeight);  
    25.         options.selectionPosition[1] = selectionOrigin[1] - options.selectionHeight;  
    26.     } else  
    27.         options.selectionPosition[1] = selectionOrigin[1];  
    28.   
    29.     //回调自身 
    30.     updateInterface('resizeSelection');  
    31. };  
    九、释放选区
    1. ...  
    2.   
    3. //释放当前选区
    4. function releaseSelection(event) {  
    5.     // Prevent the default action of the event  
    6.     event.preventDefault();  
    7.   
    8.     // Prevent the event from being notified  
    9.     event.stopPropagation();  
    10.   
    11.     //解除mousemove事件
    12.     $(document).unbind('mousemove');  
    13.   
    14.     // 解除mouseup事件
    15.     $(document).unbind('mouseup');  
    16.   
    17.     // 更新选区原始层
    18.     selectionOrigin[0] = options.selectionPosition[0];  
    19.     selectionOrigin[1] = options.selectionPosition[1];  
    20.   
    21.     // 当选区大小大于最小值是退出
    22.     if (options.selectionWidth > options.minSelect[0] &&  
    23.         options.selectionHeight > options.minSelect[1])  
    24.         selectionExists = true;  
    25.     else  
    26.         selectionExists = false;  
    27.   
    28.    // 当需要时回调自身
    29.     updateInterface('releaseSelection');  
    30. };  

    十、设置插件样式

    1. div#image-crop-overlay {  
    2.     background-color : #ffffff;  
    3.     overflow : hidden;  
    4. }  
    5.   
    6. div#image-crop-outline {  
    7.     background : #ffffff url('outline.gif');  
    8.     overflow : hidden;  
    9. }

    十一、测试

     

    1. <script type="text/javascript">  
    2.     ...  
    3. </script>  
    4.  
    5. ....
       
    6. $(document).ready(function() {  
    7.     $('img#example').imageCrop({  
    8.         overlayOpacity : 0.25  
    9.     });  
    10. });  

    文章出处：http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-jquery-image-cropping-plugin-from-scratch-part-i

    ]]>     Tue, 01 Nov 2011 00:57:53 +0000 怡红公子 http://blog.sproutcore.org/?post=94     送给自己，也送给失眠、焦虑、抑郁病友们 http://blog.sproutcore.org/?post=90 1、不要逃避恐惧。对它加以分析，你会发现它不过是一种身体上的感受。不要被这种感觉吓到

    2、接受所有与神经衰弱有关的奇怪感觉。不要抗争，飘然地将他们抛在脑后

    3、不要自怜

    4、尽快解决你的问题，即使没有行动，你也应该换个角度看待问题

    5、不要浪费时间想什么“或许就会......”和“要是......”

    6、直面悲痛，告诉自己时间能缓解痛苦

    7、找点事做，不要躺在床上胡思乱想。做事时要心平气和，不要烦躁地试图忘掉自己

    8、记住肌肉的力量取决你使用它时的信心

    9、接受你的强迫观念并暂时容忍它们的存在，不要抗争试图将它们推开。让时间去完成这一工作吧

    10、记住，你的康复不想很多人想要告诉你的那样一定“完全依赖与你自己”，你可能会得到帮助。不妨欣然地接受，而不必感到羞耻

    11、不要因为有病的时候无法作出决定而感到沮丧，一旦你好起来了，做决定将是件很容易的事情、

    12、不要一天天地衡量自己的进步，也不要计算自己生病的时间并为此感到绝望，一旦你 走上恢复的道路，无论你的病会拖延多久，恢复都将是必然的

    13、永远不要承认失败。记住，任何时候再给自己一次机会都不算太晚

    14、面对、接受、飘然、等待

    ]]>     Sun, 16 Oct 2011 02:48:54 +0000 怡红公子 http://blog.sproutcore.org/?post=90     精神焦虑症的自救 http://blog.sproutcore.org/?post=65 写的挺好的一本书，我看过后挺有感触的，所以推荐给那些有焦虑症、抑郁症、失眠、强迫症、神经衰弱等神经疾病朋友们，可在附件中下载

    目录：

    一、内在的力量

    二、我们的神经系统是如何工作的

    三、什么是神经疾病

    四、比较简单的神经疾病

    五、如何治疗简单的神经疾病

    六、经常性症状的治疗

    七、间歇性发作症状的治疗

    八、重新找回自己

    九、因问题、悲伤、内疚或羞耻而变得复杂的神经疾病

    十、如何治疗变得复杂的神经疾病

    十一、问题

    十二、悲伤

    十三、内疚与羞耻感

    十四、强迫症

    十五、失眠

    十六、清晨恐惧症

    十七、抑郁

    十八、丧失信心

    十九、于他人交往困难

    二十、回家困难

    二十一、焦虑

    二十二、三大法宝：工作、勇气、信仰

    二十三、该做的和不该做的

    二十四、给害怕再次患病之人的寄语

    二十五、给患者家人的建议

    二十六、什么人容易得神经疾病

    ]]>     Thu, 01 Sep 2011 09:13:58 +0000 怡红公子 http://blog.sproutcore.org/?post=65     软件工程课程设计——员工服务平台 http://blog.sproutcore.org/?post=64 自己做的软件工程课程设计，大家可以下下来参考下

    ]]>     Mon, 06 Jun 2011 08:42:40 +0000 怡红公子 http://blog.sproutcore.org/?post=64     一切都会好起来的 http://blog.sproutcore.org/?post=63 昨晚到了1点多还没睡着，也没想什么，大脑就是一直清醒着，然后就起来吃了半粒的安明药，睡了几小时，早上被奇奇怪怪的梦弄醒了，这种状况刚好已经持续半年了，时好时坏的，整的自己整个人都很消沉，刚开始的时候很挣扎，现在已经不怎么挣扎了，但偶尔还会有挣扎。

    心理疾病还是的心医，但就是一直找不到自己的心理纠结所在，我还是相信时间是治疗心理疾病的良药，只要你保持着良好的习惯，随着时间流逝，一切都会好起来的。

    ]]>     Mon, 06 Jun 2011 08:29:44 +0000 怡红公子 http://blog.sproutcore.org/?post=63     济公活佛圣 http://blog.sproutcore.org/?post=62 一生都是修来的――求什么 今日不知明日事――愁什么

    不礼爹娘礼世尊――敬什么 兄弟姐妹皆同气――争什么

    儿孙自有儿孙福――忧什么 岂可人无得运时――急什么
     
    人世难逢开口笑――苦什么 补破遮寒暖即休――摆什么
     
    食过三寸成何物――馋什么 死后一文带不去――悭什么
     
    前人田地后人收――占什么 得便宜处失便宜――贪什么
     
    举头三尺有神明――欺什么 荣华富贵眼前花――傲什么
     
    他家富贵前生定――妒什么 前世不修今受苦――怨什么
     
    赌博之人无下梢――耍什么 治家勤俭胜求人――奢什么
     
    冤冤相报几时休――结什么 世事如同棋一局――算什么
     
    聪明反被聪明误――巧什么 虚言折尽平生福――谎什么
     
    是非到底见分明――辩什么 谁能保得常无事――诮什么
     
    穴在人心不在山――谋什么 欺人是祸饶人福――卜什么
     
    寿自护生爱物增――杀什么 一旦无常万事休――忙什
    ]]>     Thu, 02 Jun 2011 09:49:18 +0000 怡红公子 http://blog.sproutcore.org/?post=62