使用JQuery插件修饰窗口边角 - 边角的完美解决方案
使用JQuery插件修饰窗口边角(jQuery Corner Demo)
在吕的部落格里面,有许多关于Prototype和JQuery的文章,还有一些FCKeditor的,强烈推荐大家去看看。
![](https://www.cnblogs.com/images/cnblogs_com/fengmk2/Corner1.jpg)
介绍圆角原理文章:基于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下:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
prototype-corner.js
1
//
2
// prototype-corner.js - base on prototype.js for creating corner effects
3
// Learn from jQuery-corner.js
4
//
5![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
Element.addMethods(
{
7![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
corner: function(element, type)
{
8![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function gbc(element)
{
9![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for ( ; element && element.nodeName.toLowerCase() != "html"; element = element.parentNode )
{
10
var v = Element.getStyle(element,"backgroundColor");
11![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if ( v.indexOf("rgb") >= 0 )
{
12
rgb = v.match(/\d+/g);
13![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function getW(i)
{
21![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
strip.setStyle(
{
56
overflow: "hidden",
57
height: "1px",
58
backgroundColor: "transparent",
59
borderStyle: "solid",
60
borderColor: gbc(element.parentNode)
61
});
62![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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');
在吕的部落格里面,有许多关于Prototype和JQuery的文章,还有一些FCKeditor的,强烈推荐大家去看看。
![](https://www.cnblogs.com/images/cnblogs_com/fengmk2/Corner1.jpg)
![](https://www.cnblogs.com/images/cnblogs_com/fengmk2/Corner2.jpg)
介绍圆角原理文章:基于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下:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
1
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
32
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
33
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
34
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
35
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
36
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
37
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
38
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
39
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
40
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
41
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
42
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
43
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
44
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
45
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
46
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
47
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
48
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
49
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
50
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
51
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
52
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
53
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
54
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
55
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
56
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
57
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
58
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
59
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
60
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
61
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
62
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
63
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
64
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
65
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
66
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
67
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
68
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
69
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
70
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
71
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
72
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
73
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
74
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
75
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
76
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
77
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
78
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
79
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
80
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
81
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
82
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
83
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
84
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
85
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
效果和用法都与jq-corner.js一致...
如: $$('div.corner').invoke('corner', 'round 15px');
$('cornerBox').corner('cool');