GamesMir Среда, 08.02.2012, 16:16:31
Приветствую Вас Гость | RSS
GamesMir.com
Главная | ..::Форум GamesMir::.. | Регистрация | Вход
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Информация!!!

Страница 1 из 212»
..::Форум GamesMir::.. » .::Дополнительный раздел::. » Дополнения для UcoZ » Эффект отражения изображения
Эффект отражения изображения
Danil_KAДата: Четверг, 26.06.2008, 17:00:05 | Сообщение # 1
..:::SuPeR AdmiN:::..
Сообщений: 1495
Репутация: 52
Статус:

Вот сам скрипт:

Code
<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 += ' '
             }
                     
             newClasses += classes[j];
            }
           }

           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>

и для теста можно поставить эту картинку

Code
<img class="userAvatar" src="http://gamesmir.com/gamesmir1.jpg" border="0">

для вызова отражения воспользуйтесь class="userAvatar" в <img class="userAvatar" src="http://games.......

Оригинал скрипта тут http://cow.neondragon.net/stuff/reflection/

Пример скрипта!

Прикрепления:

[img]http://gamesmir.com/USERBARA.png[/img]
[url=http://ie8top.ucoz.ru/][img]http://ie8top.ucoz.ru/MainBTN.png[/img][/url]
[url=http://letitbit.net/tmpl/partners.php?aff=GamesMir][img]http://letitbit.net/images/promo/user5.png[/img][/url]
 
Реклама
$ekt0rДата: Четверг, 26.06.2008, 22:02:56 | Сообщение # 2
Новичок
Сообщений: 69
Репутация: 0
Статус:
а куда его ставить? я чето пробувал неолучилось
и насчет етого непонял
Code
class="userAvatar" в <img class="userAvatar" src="http://games.......


http://my-warez.ru/
ТУт есть ВСЕ! и ВСЕ БЕСПЛАТНО!
 
Реклама
Danil_KAДата: Пятница, 27.06.2008, 09:24:55 | Сообщение # 3
..:::SuPeR AdmiN:::..
Сообщений: 1495
Репутация: 52
Статус:
Quote ($ekt0r)
а куда его ставить? я чето пробувал неолучилось

в HTML код сайта!!!
Чтоб картинка отражалась надо вставить в <img src="http........ вот это class="userAvatar"
Получится примерно такой код:

<img class="userAvatar" src="http://ссылка_на_картинку....

Тут всё легко =)

Пример скрипта!


[img]http://gamesmir.com/USERBARA.png[/img]
[url=http://ie8top.ucoz.ru/][img]http://ie8top.ucoz.ru/MainBTN.png[/img][/url]
[url=http://letitbit.net/tmpl/partners.php?aff=GamesMir][img]http://letitbit.net/images/promo/user5.png[/img][/url]
 
Реклама
$ekt0rДата: Суббота, 28.06.2008, 20:27:17 | Сообщение # 4
Новичок
Сообщений: 69
Репутация: 0
Статус:
аа ет для определенной картинки?


http://my-warez.ru/
ТУт есть ВСЕ! и ВСЕ БЕСПЛАТНО!
 
Реклама
Danil_KAДата: Суббота, 28.06.2008, 20:32:56 | Сообщение # 5
..:::SuPeR AdmiN:::..
Сообщений: 1495
Репутация: 52
Статус:
Quote ($ekt0r)
аа ет для определенной картинки?

Для какой хочешь!!!


[img]http://gamesmir.com/USERBARA.png[/img]
[url=http://ie8top.ucoz.ru/][img]http://ie8top.ucoz.ru/MainBTN.png[/img][/url]
[url=http://letitbit.net/tmpl/partners.php?aff=GamesMir][img]http://letitbit.net/images/promo/user5.png[/img][/url]
 
Реклама
$ekt0rДата: Суббота, 28.06.2008, 20:45:15 | Сообщение # 6
Новичок
Сообщений: 69
Репутация: 0
Статус:
блин! я хотел чтоб все авики атражались! так незя?


http://my-warez.ru/
ТУт есть ВСЕ! и ВСЕ БЕСПЛАТНО!
 
Реклама
Danil_KAДата: Суббота, 28.06.2008, 21:04:38 | Сообщение # 7
..:::SuPeR AdmiN:::..
Сообщений: 1495
Репутация: 52
Статус:
Quote ($ekt0r)
блин! я хотел чтоб все авики атражались! так незя?

Можно....

Сказано же поставить class="userAvatar"


[img]http://gamesmir.com/USERBARA.png[/img]
[url=http://ie8top.ucoz.ru/][img]http://ie8top.ucoz.ru/MainBTN.png[/img][/url]
[url=http://letitbit.net/tmpl/partners.php?aff=GamesMir][img]http://letitbit.net/images/promo/user5.png[/img][/url]
 
Реклама
SpamДата: Пятница, 11.07.2008, 00:51:32 | Сообщение # 8
Крутой пользователь
Сообщений: 311
Репутация: 2
Статус:
Норм smile

Добавлено (11.07.2008, 00:50)
---------------------------------------------

Quote (Danil_KA)
<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 += ' '
}

newClasses += classes[j];
}
}

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>


ЭТО КУДА СУНУТЬ?

Добавлено (11.07.2008, 00:51)
---------------------------------------------

Quote (Danil_KA)
<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 += ' '
}

newClasses += classes[j];
}
}

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>


ЭТО КУДА СУНУТЬ?
 
Реклама
Danil_KAДата: Пятница, 11.07.2008, 09:01:04 | Сообщение # 9
..:::SuPeR AdmiN:::..
Сообщений: 1495
Репутация: 52
Статус:
Quote (Spam)
ЭТО КУДА СУНУТЬ?

В любое место.... можно вниз или вверх.... разницы нету.....


[img]http://gamesmir.com/USERBARA.png[/img]
[url=http://ie8top.ucoz.ru/][img]http://ie8top.ucoz.ru/MainBTN.png[/img][/url]
[url=http://letitbit.net/tmpl/partners.php?aff=GamesMir][img]http://letitbit.net/images/promo/user5.png[/img][/url]
 
Реклама
SpamДата: Пятница, 11.07.2008, 18:10:52 | Сообщение # 10
Крутой пользователь
Сообщений: 311
Репутация: 2
Статус:
Quote (Danil_KA)
<img class="userAvatar" src="http://gamesmir.com/gamesmir1.jpg" border="0">

и это тожу куда хочь?
 
Реклама
Danil_KAДата: Пятница, 11.07.2008, 18:24:23 | Сообщение # 11
..:::SuPeR AdmiN:::..
Сообщений: 1495
Репутация: 52
Статус:
<img class="userAvatar" src="http://ССЫЛКА_НА_КАРТИНКУ" border="0">

ЭТО ТУДА КУДА ТЕБЕ НАДО!!!!


[img]http://gamesmir.com/USERBARA.png[/img]
[url=http://ie8top.ucoz.ru/][img]http://ie8top.ucoz.ru/MainBTN.png[/img][/url]
[url=http://letitbit.net/tmpl/partners.php?aff=GamesMir][img]http://letitbit.net/images/promo/user5.png[/img][/url]
 
Реклама
CristallДата: Среда, 20.08.2008, 16:23:30 | Сообщение # 12
Младший пользователь
Сообщений: 105
Репутация: 6
Статус:
мде.. wacko

 
Реклама
n1ght(o_O)Дата: Вторник, 09.09.2008, 21:03:02 | Сообщение # 13
Новичок
Сообщений: 91
Репутация: 3
Статус:
мда...... wacko wacko wacko

 
Реклама
SpiteFul_AngeLДата: Среда, 10.09.2008, 11:33:35 | Сообщение # 14
Пользователь
Сообщений: 220
Репутация: 5
Смайл настроения:
Статус:
Нда..... wacko wacko wacko
Пофлудили и хватит =)

 
Реклама
RedBuLLДата: Среда, 10.09.2008, 13:52:32 | Сообщение # 15
Проверенный
Сообщений: 188
Репутация: 4
Статус:
помойму не очень красиво... только если только ранги полльзователей отражались...

<A href="" target="_blank" onmouseover="parent.location='http://ucoz-modern.ucoz.net'" _self"="">Бесплатное изготовление аватаров, баннеров, шапок на сайт! А так же скрипты и графика для uCoz</A>
 
Реклама
..::Форум GamesMir::.. » .::Дополнительный раздел::. » Дополнения для UcoZ » Эффект отражения изображения
Страница 1 из 212»
Поиск:

Статистика Форума
Последние темы Читаемые темы Лучшие пользователи Новые пользователи

Форма входа, простая ...

(0)

Хороший изменённый ми...

(0)

Новая форма входа для...

(0)

Слайдер партнерских м...

(0)

Элегантная форма вход...

(0)

Очень хорошие флэш ра...

(0)

Форма входа

(0)

Интересное видео

(28)

Прогнозы на спорт и п...

(0)

Блок статистики польз...

(0)

Как что сделать?

(350)

Скрипты для ваших сай...

(175)

>>>Обратный отсчёт<...

(161)

Игра в слова !!!

(144)

Анекдоты

(102)

Первый конкурс на Gam...

(102)

Кто во что щас играет...

(84)

Болтание

(72)

Бесканечная ысторея !...

(68)

Вырази в смайлах...

(64)

Реклама



Хостинг от uCoz © 2008-2012