JavaScript
Главная
Вход
Регистрация

JavaScript — объектно-ориентированный

скриптовый язык программирования.

Меню сайта

Категории раздела
Разное [14]
Иконки [1]
Приветствие [7]
Кодировщики [6]
Фото эффекты [6]
Хитрые скрипты [10]
Фрейм JavaScript [2]
Формат файла .js [1]
Эффекты с окнами [4]
Звуковые эффекты [4]
Ссылки и эффекты [12]
Текстовые эффекты [28]
Кнопки с эффектами [12]
Визуальные эффекты [10]
Эффекты с курсорами [6]
Онлайн генератор ников и паролей [2]
Софт, программы, скачать [15]

Главная » Файлы » Визуальные эффекты

Блоки с закругленными углами.
01.08.2010, 21:42



Дополнительные возможности оформления. Например, с помощью Java Script можно сделать блок текста, который закруглит углы блока. Это может пригодится при оформлении текста на сайте...








Код:
   <script type="text/JavaScript">
var isIE=navigator.userAgent.toLowerCase().indexOf("msie")>-1;var isMoz=document.implementation&&document.implementation.createDocument;var isSafari=((navigator.userAgent.toLowerCase().indexOf("safari")!=-1)&&(navigator.userAgent.toLowerCase().indexOf("mac")!=-1))?true:false;function curvyCorners(){if(typeof(arguments[0])!="object"){throw newCurvyError("First parameter of curvyCorners() must be an object.")}if(typeof(arguments[1])!="object"&&typeof(arguments[1])!="string"){throw newCurvyError("Second parameter of curvyCorners() must be an object or a class name.")}if(typeof(arguments[1])=="string"){var G=0;var A=getElementsByClass(arguments[1])}else{var G=1;var A=arguments}var D=new Array();if(arguments[0].validTags){var F=arguments[0].validTags}else{var F=["div"]}for(var C=G,B=A.length;C<B;C++){var E=A[C].tagName.toLowerCase();if(inArray(F,E)!==false){D[D.length]=new curvyObject(arguments[0],A[C])}}this.objects=D;this.applyCornersToAll=function(){for(var H=0,I=this.objects.length;H<I;H++){this.objects[H].applyCorners()}}}function curvyObject(){this.box=arguments[1];this.settings=arguments[0];this.topContainer=null;this.bottomContainer=null;this.masterCorners=new Array();this.contentDIV=null;var G=get_style(this.box,"height","height");var D=get_style(this.box,"width","width");var A=get_style(this.box,"borderTopWidth","border-top-width");var H=get_style(this.box,"borderTopColor","border-top-color");var C=get_style(this.box,"backgroundColor","background-color");var E=get_style(this.box,"backgroundImage","background-image");var B=get_style(this.box,"position","position");var F=get_style(this.box,"paddingTop","padding-top");this.boxHeight=parseInt(((G!=""&&G!="auto"&&G.indexOf("%")==-1)?G.substring(0,G.indexOf("px")):this.box.scrollHeight));this.boxWidth=parseInt(((D!=""&&D!="auto"&&D.indexOf("%")==-1)?D.substring(0,D.indexOf("px")):this.box.scrollWidth));this.borderWidth=parseInt(((A!=""&&A.indexOf("px")!==-1)?A.slice(0,A.indexOf("px")):0));this.boxColour=format_colour(C);this.boxPadding=parseInt(((F!=""&&F.indexOf("px")!==-1)?F.slice(0,F.indexOf("px")):0));this.borderColour=format_colour(H);this.borderString=this.borderWidth+"px solid "+this.borderColour;this.backgroundImage=((E!="none")?E:"");this.boxContent=this.box.innerHTML;if(B!="absolute"){this.box.style.position="relative"}this.box.style.padding="0px";if(isIE&&D=="auto"&&G=="auto"){this.box.style.width="100%"}if(this.settings.autoPad==true&&this.boxPadding>0){this.box.innerHTML=""}this.applyCorners=function(){for(var Z=0;Z<2;Z++){switch(Z){case 0:if(this.settings.tl||this.settings.tr){var W=document.createElement("DIV");W.style.width="100%";W.style.fontSize="1px";W.style.overflow="hidden";W.style.position="absolute";W.style.paddingLeft=this.borderWidth+"px";W.style.paddingRight=this.borderWidth+"px";var R=Math.max(this.settings.tl?this.settings.tl.radius:0,this.settings.tr?this.settings.tr.radius:0);W.style.height=R+"px";W.style.top=0-R+"px";W.style.left=0-this.borderWidth+"px";this.topContainer=this.box.appendChild(W)}break;case 1:if(this.settings.bl||this.settings.br){var W=document.createElement("DIV");W.style.width="100%";W.style.fontSize="1px";W.style.overflow="hidden";W.style.position="absolute";W.style.paddingLeft=this.borderWidth+"px";W.style.paddingRight=this.borderWidth+"px";var X=Math.max(this.settings.bl?this.settings.bl.radius:0,this.settings.br?this.settings.br.radius:0);W.style.height=X+"px";W.style.bottom=0-X+"px";W.style.left=0-this.borderWidth+"px";this.bottomContainer=this.box.appendChild(W)}break}}if(this.topContainer){this.box.style.borderTopWidth="0px"}if(this.bottomContainer){this.box.style.borderBottomWidth="0px"}var d=["tr","tl","br","bl"];for(var h in d){if(h>-1<4){var c=d[h];if(!this.settings[c]){if(((c=="tr"||c=="tl")&&this.topContainer!=null)||((c=="br"||c=="bl")&&this.bottomContainer!=null)){var V=document.createElement("DIV");V.style.position="relative";V.style.fontSize="1px";V.style.overflow="hidden";if(this.backgroundImage==""){V.style.backgroundColor=this.boxColour}else{V.style.backgroundImage=this.backgroundImage}switch(c){case"tl":V.style.height=R-this.borderWidth+"px";V.style.marginRight=this.settings.tr.radius-(this.borderWidth*2)+"px";V.style.borderLeft=this.borderString;V.style.borderTop=this.borderString;V.style.left=-this.borderWidth+"px";break;case"tr":V.style.height=R-this.borderWidth+"px";V.style.marginLeft=this.settings.tl.radius-(this.borderWidth*2)+"px";V.style.borderRight=this.borderString;V.style.borderTop=this.borderString;V.style.backgroundPosition="-"+(R+this.borderWidth)+"px 0px";V.style.left=this.borderWidth+"px";break;case"bl":V.style.height=X-this.borderWidth+"px";V.style.marginRight=this.settings.br.radius-(this.borderWidth*2)+"px";V.style.borderLeft=this.borderString;V.style.borderBottom=this.borderString;V.style.left=-this.borderWidth+"px";V.style.backgroundPosition="-"+(this.borderWidth)+"px -"+(this.boxHeight+(X+this.borderWidth))+"px";break;case"br":V.style.height=X-this.borderWidth+"px";V.style.marginLeft=this.settings.bl.radius-(this.borderWidth*2)+"px";V.style.borderRight=this.borderString;V.style.borderBottom=this.borderString;V.style.left=this.borderWidth+"px";V.style.backgroundPosition="-"+(X+this.borderWidth)+"px -"+(this.boxHeight+(X+this.borderWidth))+"px";break}}}else{if(this.masterCorners[this.settings[c].radius]){var V=this.masterCorners[this.settings[c].radius].cloneNode(true)}else{var V=document.createElement("DIV");V.style.height=this.settings[c].radius+"px";V.style.width=this.settings[c].radius+"px";V.style.position="absolute";V.style.fontSize="1px";V.style.overflow="hidden";var M=parseInt(this.settings[c].radius-this.borderWidth);for(var T=0,g=this.settings[c].radius;T<g;T++){if((T+1)>=M){var O=-1}else{var O=(Math.floor(Math.sqrt(Math.pow(M,2)-Math.pow((T+1),2)))-1)}if(M!=g){if((T)>=M){var L=-1}else{var L=Math.ceil(Math.sqrt(Math.pow(M,2)-Math.pow(T,2)))}if((T+1)>=g){var J=-1}else{var J=(Math.floor(Math.sqrt(Math.pow(g,2)-Math.pow((T+1),2)))-1)}}if((T)>=g){var I=-1}else{var I=Math.ceil(Math.sqrt(Math.pow(g,2)-Math.pow(T,2)))}if(O>-1){this.drawPixel(T,0,this.boxColour,100,(O+1),V,-1,this.settings[c].radius)}if(M!=g){for(var S=(O+1);S<L;S++){if(this.settings.antiAlias){if(this.backgroundImage!=""){var K=(pixelFraction(T,S,M)*100);if(K<30){this.drawPixel(T,S,this.borderColour,100,1,V,0,this.settings[c].radius)}else{this.drawPixel(T,S,this.borderColour,100,1,V,-1,this.settings[c].radius)}}else{var b=BlendColour(this.boxColour,this.borderColour,pixelFraction(T,S,M));this.drawPixel(T,S,b,100,1,V,0,this.settings[c].radius,c)}}}if(this.settings.antiAlias){if(J>=L){if(L==-1){L=0}this.drawPixel(T,L,this.borderColour,100,(J-L+1),V,0,0)}}else{if(J>=O){this.drawPixel(T,(O+1),this.borderColour,100,(J-O),V,0,0)}}var Q=this.borderColour}else{var Q=this.boxColour;var J=O}if(this.settings.antiAlias){for(var S=(J+1);S<I;S++){this.drawPixel(T,S,Q,(pixelFraction(T,S,g)*100),1,V,((this.borderWidth>0)?0:-1),this.settings[c].radius)}}}this.masterCorners[this.settings[c].radius]=V.cloneNode(true)}if(c!="br"){for(var Z=0,f=V.childNodes.length;Z<f;Z++){var U=V.childNodes[Z];var e=parseInt(U.style.top.substring(0,U.style.top.indexOf("px")));var m=parseInt(U.style.left.substring(0,U.style.left.indexOf("px")));var o=parseInt(U.style.height.substring(0,U.style.height.indexOf("px")));if(c=="tl"||c=="bl"){U.style.left=this.settings[c].radius-m-1+"px"}if(c=="tr"||c=="tl"){U.style.top=this.settings[c].radius-o-e+"px"}switch(c){case"tr":U.style.backgroundPosition="-"+Math.abs((this.boxWidth-this.settings[c].radius+this.borderWidth)+m)+"px -"+Math.abs(this.settings[c].radius-o-e-this.borderWidth)+"px";break;case"tl":U.style.backgroundPosition="-"+Math.abs((this.settings[c].radius-m-1)-this.borderWidth)+"px -"+Math.abs(this.settings[c].radius-o-e-this.borderWidth)+"px";break;case"bl":U.style.backgroundPosition="-"+Math.abs((this.settings[c].radius-m-1)-this.borderWidth)+"px -"+Math.abs((this.boxHeight+this.settings[c].radius+e)-this.borderWidth)+"px";break}}}}if(V){switch(c){case"tl":if(V.style.position=="absolute"){V.style.top="0px"}if(V.style.position=="absolute"){V.style.left="0px"}if(this.topContainer){this.topContainer.appendChild(V)}break;case"tr":if(V.style.position=="absolute"){V.style.top="0px"}if(V.style.position=="absolute"){V.style.right="0px"}if(this.topContainer){this.topContainer.appendChild(V)}break;case"bl":if(V.style.position=="absolute"){V.style.bottom="0px"}if(V.style.position=="absolute"){V.style.left="0px"}if(this.bottomContainer){this.bottomContainer.appendChild(V)}break;case"br":if(V.style.position=="absolute"){V.style.bottom="0px"}if(V.style.position=="absolute"){V.style.right="0px"}if(this.bottomContainer){this.bottomContainer.appendChild(V)}break}}}}var Y=new Array();Y.t=Math.abs(this.settings.tl.radius-this.settings.tr.radius);Y.b=Math.abs(this.settings.bl.radius-this.settings.br.radius);for(z in Y){if(z=="t"||z=="b"){if(Y[z]){var l=((this.settings[z+"l"].radius<this.settings[z+"r"].radius)?z+"l":z+"r");var N=document.createElement("DIV");N.style.height=Y[z]+"px";N.style.width=this.settings[l].radius+"px";N.style.position="absolute";N.style.fontSize="1px";N.style.overflow="hidden";N.style.backgroundColor=this.boxColour;switch(l){case"tl":N.style.bottom="0px";N.style.left="0px";N.style.borderLeft=this.borderString;this.topContainer.appendChild(N);break;case"tr":N.style.bottom="0px";N.style.right="0px";N.style.borderRight=this.borderString;this.topContainer.appendChild(N);break;case"bl":N.style.top="0px";N.style.left="0px";N.style.borderLeft=this.borderString;this.bottomContainer.appendChild(N);break;case"br":N.style.top="0px";N.style.right="0px";N.style.borderRight=this.borderString;this.bottomContainer.appendChild(N);break}}var P=document.createElement("DIV");P.style.position="relative";P.style.fontSize="1px";P.style.overflow="hidden";P.style.backgroundColor=this.boxColour;P.style.backgroundImage=this.backgroundImage;switch(z){case"t":if(this.topContainer){if(this.settings.tl.radius&&this.settings.tr.radius){P.style.height=R-this.borderWidth+"px";P.style.marginLeft=this.settings.tl.radius-this.borderWidth+"px";P.style.marginRight=this.settings.tr.radius-this.borderWidth+"px";P.style.borderTop=this.borderString;if(this.backgroundImage!=""){P.style.backgroundPosition="-"+(R-this.borderWidth)+"px 0px"}this.topContainer.appendChild(P)}this.box.style.backgroundPosition="0px -"+(R-this.borderWidth)+"px"}break;case"b":if(this.bottomContainer){if(this.settings.bl.radius&&this.settings.br.radius){P.style.height=X-this.borderWidth+"px";P.style.marginLeft=this.settings.bl.radius-this.borderWidth+"px";P.style.marginRight=this.settings.br.radius-this.borderWidth+"px";P.style.borderBottom=this.borderString;if(this.backgroundImage!=""){P.style.backgroundPosition="-"+(X-this.borderWidth)+"px -"+(this.boxHeight+(R-this.borderWidth))+"px"}this.bottomContainer.appendChild(P)}}break}}}if(this.settings.autoPad==true&&this.boxPadding>0){var a=document.createElement("DIV");a.style.position="relative";a.innerHTML=this.boxContent;a.className="autoPadDiv";var n=Math.abs(R-this.boxPadding);var p=Math.abs(X-this.boxPadding);if(R<this.boxPadding){a.style.paddingTop=n+"px"}if(X<this.boxPadding){a.style.paddingBottom=X+"px"}a.style.paddingLeft=this.boxPadding+"px";a.style.paddingRight=this.boxPadding+"px";this.contentDIV=this.box.appendChild(a)}};this.drawPixel=function(R,O,I,N,P,Q,K,M){var J=document.createElement("DIV");J.style.height=P+"px";J.style.width="1px";J.style.position="absolute";J.style.fontSize="1px";J.style.overflow="hidden";var L=Math.max(this.settings.tr.radius,this.settings.tl.radius);if(K==-1&&this.backgroundImage!=""){J.style.backgroundImage=this.backgroundImage;J.style.backgroundPosition="-"+(this.boxWidth-(M-R)+this.borderWidth)+"px -"+((this.boxHeight+L+O)-this.borderWidth)+"px"}else{J.style.backgroundColor=I}if(N!=100){setOpacity(J,N)}J.style.top=O+"px";J.style.left=R+"px";Q.appendChild(J)}}function insertAfter(B,C,A){B.insertBefore(C,A.nextSibling)}function BlendColour(L,J,G){var D=parseInt(L.substr(1,2),16);var K=parseInt(L.substr(3,2),16);var F=parseInt(L.substr(5,2),16);var C=parseInt(J.substr(1,2),16);var I=parseInt(J.substr(3,2),16);var E=parseInt(J.substr(5,2),16);if(G>1||G<0){G=1}var H=Math.round((D*G)+(C*(1-G)));if(H>255){H=255}if(H<0){H=0}var B=Math.round((K*G)+(I*(1-G)));if(B>255){B=255}if(B<0){B=0}var A=Math.round((F*G)+(E*(1-G)));if(A>255){A=255}if(A<0){A=0}return"#"+IntToHex(H)+IntToHex(B)+IntToHex(A)}function IntToHex(A){base=A/16;rem=A%16;base=base-(rem/16);baseS=MakeHex(base);remS=MakeHex(rem);return baseS+""+remS}function MakeHex(A){if((A>=0)&&(A<=9)){return A}else{switch(A){case 10:return"A";case 11:return"B";case 12:return"C";case 13:return"D";case 14:return"E";case 15:return"F"}}}function pixelFraction(H,G,A){var C=0;var B=new Array(1);var F=new Array(1);var I=0;var D="";var E=Math.sqrt((Math.pow(A,2)-Math.pow(H,2)));if((E>=G)&&(E<(G+1))){D="Left";B[I]=0;F[I]=E-G;I=I+1}var E=Math.sqrt((Math.pow(A,2)-Math.pow(G+1,2)));if((E>=H)&&(E<(H+1))){D=D+"Top";B[I]=E-H;F[I]=1;I=I+1}var E=Math.sqrt((Math.pow(A,2)-Math.pow(H+1,2)));if((E>=G)&&(E<(G+1))){D=D+"Right";B[I]=1;F[I]=E-G;I=I+1}var E=Math.sqrt((Math.pow(A,2)-Math.pow(G,2)));if((E>=H)&&(E<(H+1))){D=D+"Bottom";B[I]=E-H;F[I]=0}switch(D){case"LeftRight":C=Math.min(F[0],F[1])+((Math.max(F[0],F[1])-Math.min(F[0],F[1]))/2);break;case"TopRight":C=1-(((1-B[0])*(1-F[1]))/2);break;case"TopBottom":C=Math.min(B[0],B[1])+((Math.max(B[0],B[1])-Math.min(B[0],B[1]))/2);break;case"LeftBottom":C=(F[0]*B[1])/2;break;default:C=1}return C}function rgb2Hex(B){try{var C=rgb2Array(B);var G=parseInt(C[0]);var E=parseInt(C[1]);var A=parseInt(C[2]);var D="#"+IntToHex(G)+IntToHex(E)+IntToHex(A)}catch(F){alert("There was an error converting the RGB value to Hexadecimal in function rgb2Hex")}return D}function rgb2Array(A){var C=A.substring(4,A.indexOf(")"));var B=C.split(", ");return B}function setOpacity(F,C){C=(C==100)?99.999:C;if(isSafari&&F.tagName!="IFRAME"){var B=rgb2Array(F.style.backgroundColor);var E=parseInt(B[0]);var D=parseInt(B[1]);var A=parseInt(B[2]);F.style.backgroundColor="rgba("+E+", "+D+", "+A+", "+C/100+")"}else{if(typeof(F.style.opacity)!="undefined"){F.style.opacity=C/100}else{if(typeof(F.style.MozOpacity)!="undefined"){F.style.MozOpacity=C/100}else{if(typeof(F.style.filter)!="undefined"){F.style.filter="alpha(opacity:"+C+")"}else{if(typeof(F.style.KHTMLOpacity)!="undefined"){F.style.KHTMLOpacity=C/100}}}}}}function inArray(C,B){for(var A=0;A<C.length;A++){if(C[A]===B){return A}}return false}function inArrayKey(B,A){for(key in B){if(key===A){return true}}return false}function addEvent(E,D,B,A){if(E.addEventListener){E.addEventListener(D,B,A);return true}else{if(E.attachEvent){var C=E.attachEvent("on"+D,B);return C}else{E["on"+D]=B}}}function removeEvent(E,D,B,A){if(E.removeEventListener){E.removeEventListener(D,B,A);return true}else{if(E.detachEvent){var C=E.detachEvent("on"+D,B);return C}else{alert("Handler could not be removed")}}}function format_colour(B){var A="#ffffff";if(B!=""&&B!="transparent"){if(B.substr(0,3)=="rgb"){A=rgb2Hex(B)}else{if(B.length==4){A="#"+B.substring(1,2)+B.substring(1,2)+B.substring(2,3)+B.substring(2,3)+B.substring(3,4)+B.substring(3,4)}else{A=B}}}return A}function get_style(obj,property,propertyNS){try{if(obj.currentStyle){var returnVal=eval("obj.currentStyle."+property)}else{if(isSafari&&obj.style.display=="none"){obj.style.display="";var wasHidden=true}var returnVal=document.defaultView.getComputedStyle(obj,"").getPropertyValue(propertyNS);if(isSafari&&wasHidden){obj.style.display="none"}}}catch(e){}return returnVal}function getElementsByClass(G,E,A){var D=new Array();if(E==null){E=document}if(A==null){A="*"}var C=E.getElementsByTagName(A);var B=C.length;var F=new RegExp("(^|s)"+G+"(s|$)");for(i=0,j=0;i<B;i++){if(F.test(C[i].className)){D[j]=C[i];j++}}return D}function newCurvyError(A){return new Error("curvyCorners Error:\n"+A)};
</script>
<style>
.myBox
{
margin: 20 auto;
border: 0px solid #000;
color: #000;
width: 40%;
padding: 20px;
text-align: left;
background-color: #F5F5F5;
border: 1px solid #000;
float:left;
}
.myBox2{
float:left;
width: 40px;
padding: 20px;
}
</style>
<script type="text/JavaScript">
window.onload=function()
{settings={tl:{radius:20},tr:{radius:20},bl:{radius:20},br:{radius:20},antiAlias:true,autoPad:true,validTags:["div"]}
var myBoxObject=new curvyCorners(settings,"myBox");myBoxObject.applyCornersToAll();}
</script>
</head>
<body>
<br><br><br>
<div class="myBox" style="margin-left:40px">
<p align=justify>Дополнительные возможности оформления. Например, с помощью Java Script можно сделать блок текста, который закруглит углы блока. Это может пригодится при оформлении текста на сайте... </p>
</div>
<div class="myBox2">
</div>
</body>
Категория: Визуальные эффекты | Добавил: Besigor
Просмотров: 2341 | Загрузок: 0 | Комментарии: 6 | Рейтинг: 0.0/0
Всего комментариев: 0
avatar
ONLINE
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Статистика




Бесплатные JavaScript © 2024