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


Пост (в основном) для пользователей:
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
Андрей Кочерга
Justus
Максим Волченко
Сергей Боярко
Сергей Боярко
Justus
Alena Nazarchyk
Justus
Alena Nazarchyk
Justus
Alena Nazarchyk
Анонимный
Justus
Анонимный
AirZip
Justus
Анонимный
Serhio Novitskiy

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

Дорогие Друзья! К сожалению, временно, по причине здоровья, моя активность по этому блогу ВРЕМЕННО ПРИОСТАНОВЛЕНА! Предположительно до января 2018 г.

Доска почета

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