Регистрация    Войти
Авторизация

Зеркально отражение аватара в Форуме для ucoz.

Зеркально отражение аватара в Форуме для ucoz.

Зеркально отражение аватара в Форуме для ucoz. Красивое зеркальное отражение аватара на javascript (скрин мой)


ПУ--->Управление дизайном ----> Общий вид страниц форума (Между head и /head )

<script type="text/javascript">   
document.getElementsByClassName = function(className) {  
   var children = document.getElementsByTagName('*') || document.all;  
   var elements = new Array();  
    
   for (var i = 0; i < children.length; i++) {  
   var child = children[i];  
   var classNames = child.className.split(' ');  
   for (var j = 0; j < classNames.length; j++) {  
   if (classNames[j] == className) {  
   elements.push(child);  
   break;  
   }  
   }  
   }  
   return elements;  
}  

var Reflection = {  
   defaultHeight : 0.5,  
   defaultOpacity: 0.5,  
    
   add: function(image, options) {  
   Reflection.remove(image);  
    
   doptions = { "height" : Reflection.defaultHeight, "opacity" : Reflection.defaultOpacity }  
   if (options) {  
   for (var i in doptions) {  
   if (!options[i]) {  
   options[i] = doptions[i];  
   }  
   }  
   } else {  
   options = doptions;  
   }  
    
   try {  
   var d = document.createElement('div');  
   var p = image;  
    
   var classes = p.className.split(' ');  
   var newClasses = '';  
   for (j=0;j<classes.length;j++) {  
   if (classes[j] != "userAvatar") {  
   if (newClasses) {  
   newClasses += ' '  
   }  
    }  
   }  

   var reflectionHeight = Math.floor(p.height*options['height']);  
   var divHeight = Math.floor(p.height*(1+options['height']));  
    
   var reflectionWidth = p.width;  
    
   if (document.all && !window.opera) {  
   /* Copy original image's classes & styles to div */  
   d.className = newClasses;  
   p.className = 'reflected';  
    
   d.style.cssText = p.style.cssText;  
   p.style.cssText = 'vertical-align: bottom';  
    
   var reflection = document.createElement('img');  
   reflection.src = p.src;  
   reflection.style.width = reflectionWidth+'px';  
    
   reflection.style.marginBottom = "-"+(p.height-reflectionHeight)+'px';  
   reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(options['opacity']*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(options['height']*100)+')';  
    
   d.style.width = reflectionWidth+'px';  
   d.style.height = divHeight+'px';  
   p.parentNode.replaceChild(d, p);  
    
   d.appendChild(p);  
   d.appendChild(reflection);  
   } else {  
   var canvas = document.createElement('canvas');  
   if (canvas.getContext) {  
   /* Copy original image's classes & styles to div */  
   d.className = newClasses;  
   p.className = 'reflected';  
    d.style.cssText = p.style.cssText;  
   p.style.cssText = 'vertical-align: bottom';  
    
   var context = canvas.getContext("2d");  
    
   canvas.style.height = reflectionHeight+'px';  
   canvas.style.width = reflectionWidth+'px';  
   canvas.height = reflectionHeight;  
   canvas.width = reflectionWidth;  
    
   d.style.width = reflectionWidth+'px';  
   d.style.height = divHeight+'px';  
   p.parentNode.replaceChild(d, p);  
    
   d.appendChild(p);  
   d.appendChild(canvas);  
    
   context.save();  
    
   context.translate(0,image.height-1);  
   context.scale(1,-1);  
    
   context.drawImage(image, 0, 0, reflectionWidth, image.height);  
    
   context.restore();  
    
   context.globalCompositeOperation = "destination-out";  
   var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);  
    
   gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");  
   gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-options['opacity'])+")");  
    
   context.fillStyle = gradient;  
   if (navigator.appVersion.indexOf('WebKit') != -1) {  
   context.fill();  
   } else {  
   context.fillRect(0, 0, reflectionWidth, reflectionHeight*2);  
   }  
   }  
   }  
   } catch (e) {  
   }  
   },  
    
   remove : function(image) {  
   if (image.className == "reflected") {  
   image.className = image.parentNode.className;  
   image.parentNode.parentNode.replaceChild(image, image.parentNode);  
   }  
   }  
}  

function addReflections() {  
   var rimages = document.getElementsByClassName('userAvatar');  
   for (i=0;i<rimages.length;i++) {  
   var rheight = null;  
   var ropacity = null;  
    
   var classes = rimages[i].className.split(' ');  
   for (j=0;j<classes.length;j++) {  
   if (classes[j].indexOf("rheight") == 0) {  
   var rheight = classes[j].substring(7)/100;  
   } else if (classes[j].indexOf("ropacity") == 0) {  
   var ropacity = classes[j].substring(8)/100;  
   }  
   }  
    
   Reflection.add(rimages[i], { height: rheight, opacity : ropacity});  
   }  
}  

var previousonload = window.onload;  
window.onload = function () { if(previousonload) previousonload(); addReflections(); }  
</script>


Готово!!! smile Новые скрипты для ucoz

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: Sailor Venus  29-01-2012, 00:19   Просмотров: 3196   
newClasses, else, rimages, previous, function, className, reflectionWidth, reflection, children, vertical, context
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Пользователь offline fhineas 2 мая 2012 20:32
всё класно но только аву в лево относит, как по сридине поставить?

          1

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.