使用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');