Удивительные эффекты при наведении курсора на картинку, для Блогспот, Блоггер


Пост (в основном) для пользователей:
Blogger, Блоггер (Blogspot, Блогспот)

Сегодня я покажу вам, как легко и просто, оформить изображение различными эффектами при наведении курсора. Иногда хочется выделить какую нибудь картинку особенно, вот для этого и хороши данные эффекты! Но для начала убедитесь в том, как это работает!




Эффект1 Эффект2


Эффект4 Эффект5

Эффект3

Код добавляется (куда угодно) в редакторе сообщения

Обратите внимание на маркированный красным скрипт jQuery, если эффект не работает то его нужно удалить. Информация об этом здесь.


<style>.adipoli-wrapper{position:relative;display:inline-block;margin:auto}
.adipoli-slice{display:block;position:absolute;z-index:0;height:100%}
.adipoli-box{display:block;position:absolute;z-index:0}
.post img{border:0!important;margin:0!important;padding:0!important}
.adipoli-wrapper>img,.adipoli-before,.adipoli-after{position:absolute;z-index:0}</style><script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'></script>
<script src='http://yourjavascript.com/143237963/jquery.adipoli.min.js' type='text/javascript'></script>
<script type='text/javascript'>
/*<![CDATA[*/
jQuery(function($pice){
    $pice('.effect1').adipoli({
        'startEffect' : 'normal',
        'hoverEffect' : 'popout'
    });
    $pice('.effect2').adipoli({
        'startEffect' : 'overlay',
        'hoverEffect' : 'sliceDown'
    });
    $pice('.effect3').adipoli({
        'startEffect' : 'transparent',
        'hoverEffect' : 'boxRandom'
    });
    $pice('.effect4').adipoli({
        'startEffect' : 'overlay',
        'hoverEffect' : 'foldLeft'
    });
    $pice('.effect5').adipoli({
        'startEffect' : 'transparent',
        'hoverEffect' : 'boxRainGrowReverse'
    });
 
});
/*]]>*/
         
        </script>
<script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",k="?m=1";function l(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+k;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var m=l();m&&window.location.replace(m)};
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>


Ну и последний шаг: вставляем в код вашей картинки - идентификатор class="effect1 (выделен красным фоном), где цифра, это выбранный вами эффект.

<img border="0" class="effect1" src="http://4.bp.blogspot.com/-iMK9uYw-2aM/T_NYaaCK0rI/AAAAAAAAHUw/rc10qNZX5Fk/s1600/image-effects-image-2.png" />

20 коммент.:

Лидия Васильевна
Marina Kouyarova
Dron
Justus
Максим Волченко
gdes
gdes
Justus
Unknown
Justus
Unknown
Justus
Unknown
Анонимно
Justus
Анонимно
AirZip
Justus
Анонимно
serhio777

Отправка комментария

Дорогие Друзья! К сожалению, по причине здоровья, моя активность по этому блогу будет осуществляться по мере ВОЗМОЖНОСТИ!

Доска почета

Плюсани блог!