понедельник, 19 августа 2013 г.

Выделение картинки наведенным курсором

Если вы уделяете достойное внимание оформлению своих сообщений в и решили несколько оживить картинки в постах своего блога, то это сообщение поможет вам всего лишь за 5 минут освоить один из вариантов оживляжа )))
Например, при наведении курсора мыши на картинку с денежными купюрами в примере, который показан здесь - картинка достаточно эффектным способом увеличивается, как бы оживает под вашей рукой. Помимо увеличения, описанный ниже скрипт, позволит получать и некоторые другие эффекты оживляжа.
Однако, от слов - к делу! Выполните эти два простых шага и сами выберете наиболее понравившийся вам эффект:

1. Вставьте этот код в любой место сообщения (HTML)

<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>


*** Если работать не будет - уберите скрипт, выделенный зелёным цветом

2. В код картинки (надо включить редактор HTML) перед "scr=..." вставьте идентификатор class="effect1" - Пробуйте цифры от 1 до 5, которым будут соответствовать различные способы оживления Вашей картинки при наведении на неё курсора мыши и выбирайте наиболее понравившийся вариант.
Всех Благ! 
...и, пожалуйста, не забывайте нажимать на эти кнопочки социальных сетей: 

Комментариев нет:

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