学步园

使用JQuery插件修饰窗口边角(jQuery Corner Demo)

在吕的部落格里面，有许多关于Prototype和JQuery的文章，还有一些FCKeditor的，强烈推荐大家去看看。

 

介绍圆角原理文章:基于Prototype的圆角工具类 (基于prototype1.5.0)

在jq-corner.js中的相应计算圆角的算法:
case "round":  return Math.round(width*(1-Math.cos(Math.asin(i/width))));

正是基于Prototype的圆角工具类 介绍的算法....

因为我个人喜欢Prototype库, 所以我抄袭改编了一下jq-corner.js的代码, 移植到prototype1.5.0.js下:

prototype-corner.js
 1//
 2// prototype-corner.js - base on prototype.js for creating corner effects
 3// Learn from jQuery-corner.js
 4//
 5
 6Element.addMethods({
 7    corner: function(element, type) {
 8        function gbc(element) {
 9            for ( ; element && element.nodeName.toLowerCase() != "html"; element = element.parentNode  ) {
10                var v = Element.getStyle(element,"backgroundColor");
11                if ( v.indexOf("rgb") >= 0 ) { 
12                    rgb = v.match(/\d+/g); 
13                    return "#"+ rgb.map(function(o) { return parseInt(o).toColorPart(); }).join('');
14                }
15                if ( v && v != "transparent" )
16                    return v;
17            }
18            return "#ffffff";
19        }
20        function getW(i) {
21            switch(fx) {
22            case "round":  return Math.round(width*(1-Math.cos(Math.asin(i/width))));
23            case "cool":   return Math.round(width*(1+Math.cos(Math.asin(i/width))));
24            case "sharp":  return Math.round(width*(1-Math.cos(Math.acos(i/width))));
25            case "bite":   return Math.round(width*(Math.cos(Math.asin(i/width))));
26            case "slide":  return Math.round(width*(Math.atan2(i,width/i)));
27            case "jut":    return Math.round(width*(Math.atan2(width,i)));
28            case "curl":   return Math.round(width*(Math.atan(i)));
29            case "tear":   return Math.round(width*(Math.cos(i)));
30            case "wicked": return Math.round(width*(Math.tan(i)));
31            case "long":   return Math.round(width*(Math.sqrt(i)));
32            case "sculpt": return Math.round(width*(Math.log(i,width)));
33            case "dog":    return (i&1) ? (i+1) : width; // Thanks, Dave!
34            case "dog2":   return (i&2) ? (i+1) : width; // a bit wider than 'dog'
35            case "dog3":   return (i&3) ? (i+1) : width; // a bit wider than 'dog2'
36            case "fray":   return (i%2)*width;
37            case "notch":  return width; 
38            default:       return i+1; // bevel
39            }
40        }
41        element = $(element);
42        type = (type||"").toLowerCase();
43        var edges = { T:0, B:1 };
44        var width = parseInt((type.match(/(\d+)px/)||[])[1]) || 10;  
45        var re = /round|bevel|notch|bite|cool|sharp|slide|jut|curl|tear|fray|wicked|sculpt|long|dog3|dog2|dog/;
46        var fx = ((type.match(re)||["round"])[0]);
47        var opts = {
48            TL:     /top|tl/.test(type),       TR:     /top|tr/.test(type),
49            BL:     /bottom|bl/.test(type),    BR:     /bottom|br/.test(type)
50        };
51        if ( !opts.TL && !opts.TR && !opts.BL && !opts.BR )
52            opts = { TL:1, TR:1, BL:1, BR:1 };
53        opts.swap = /bite|jut|sculpt/.test(fx); // flag to reorder element insertion
54        var strip = Element.extend(document.createElement("div"));
55        strip.setStyle({
56            overflow: "hidden",
57            height: "1px",
58            backgroundColor: "transparent",
59            borderStyle: "solid",
60            borderColor: gbc(element.parentNode)
61        });
62        var pad = {
63            T: parseInt(element.getStyle('paddingTop'))||0,     R: parseInt(element.getStyle('paddingRight'))||0,
64            B: parseInt(element.getStyle('paddingBottom'))||0,  L: parseInt(element.getStyle('paddingLeft'))||0
65        };
66        for ( var j in edges) {
67            var bot = edges[j];
68            strip.style.borderStyle = "none "+(opts[j+'R']?"solid":"none")+" none "+(opts[j+'L']?"solid":"none");
69            var d = document.createElement("div");
70            d.style.margin = !bot ? "-"+pad.T+"px -"+pad.R+"px "+(pad.T-width)+"px -"+pad.L+"px" : 
71                    (pad.B-width)+"px -"+pad.R+"px -"+pad.B+"px -"+pad.L+"px";
72            d.style.backgroundColor = "transparent";
73            d.style.zIndex = "1";
74            var append = (bot && !opts.swap) || (!bot && opts.swap);
75            for ( var i=0; i < width; i++ ) {
76                var w = Math.max(0,getW(i));
77                var e = strip.cloneNode(false);
78                e.style.borderWidth = "0 "+(opts[j+'R']?w:0)+"px 0 "+(opts[j+'L']?w:0)+"px";
79                append ? d.appendChild(e) : d.insertBefore(e, d.firstChild);
80            }
81            bot ? element.appendChild(d) : element.insertBefore(d, element.firstChild);
82        }
83        return element;
84    }
85});

效果和用法都与jq-corner.js一致...
如: $$('div.corner').invoke('corner', 'round 15px');
$('cornerBox').corner('cool');