Страница 1 из 11
Форум CREWEBIK.ru » design studio for uCoz » ФОРУМ ВЕБ МАСТЕРОВ » html & css » Hover (Анимация картинки с помощью hover)
Hover
kurban52
/avatar/17/1784-838717.jpg
1');return false;" rel="nofollow" href="javascript://" name="6489">
12.08.2014 в 21:42 скрипт есть но ни как не получается его связать с картинкой (( примерЭто не реклама
exclusiv...
/avatar/01/4333-414916.png
2');return false;" rel="nofollow" href="javascript://" name="6490">
12.08.2014 в 22:02 во-первых поставь кодирвку скрипта utf-8
во-вторых нужно смотреть нет ли конфликта между скриптами, потому что на юкозе это часто получается при применении скриптов сторонних
в-третьих, там скорее всего у тебя в html не прописаны все классы от этого скрипта и поэтому он у тебя не работает, может еще и то что ты его не правильно применяешь.
Так что ты смотри внимательно wink
kurban52
/avatar/17/1784-838717.jpg
3');return false;" rel="nofollow" href="javascript://" name="6492">
13.08.2014 в 12:31 а возможно полный рип в ucoz
css я так понял не нужен
я хочу поставить на главной странице будет ли конфликт с Ilight
можешь показать маленький пример biggrin

вот код может что подскажешь еще кодировка стоит мне кажется что скрипт hover привязан к какому то контейнеру ?
Код
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>$SITE_NAME$</title>
<link type="text/css" rel="StyleSheet" href="/_st/my.css" />
<link href="/css/style.css" rel="stylesheet" type="text/css">
<link href="/css/slider.css" rel="stylesheet" type="text/css">
</head><link type="text/css" rel="StyleSheet" href="/ajax/ajax.css" />   
<script src="/js/jquery-1.5.min.js" type="text/javascript"></script>
<script src="/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="/js/slider.js" type="text/javascript"></script>

<!-- Add custom files -->
<script src="/js/jq_vt.js" type="text/javascript"></script>
<link href="/css/custom.css" rel="stylesheet" type="text/css">
<!-- End: Add custom files -->

<!-- Add placeholder plugin -->
<script src="/js/plugins/placeholder/jquery.placeholder.js" type="text/javascript"></script>
<!-- End: Add placeholder plugin -->

<!-- Add validator plugin -->
<script src="/js/plugins/validator/jquery.validationEngine.js" type="text/javascript"></script>
<script src="/js/plugins/validator/z.trans.en.js" type="text/javascript"></script>
<link href="/js/plugins/validator/validationEngine.jquery.css" rel="stylesheet" type="text/css">
<!-- End: Add validator plugin -->

<script src="/js/cufon-yui.js" type="text/javascript"></script>
<script src="/js/Ubuntu_5F400.font.js" type="text/javascript"></script>
<script type="text/javascript">

   Cufon.replace('h1, h2, h3', { color: '-linear-gradient(#b8b4b1, #edebe8)', textShadow: '1px 1px #000' });
   Cufon.replace('h5, h6', { textShadow: '1px 1px #000' });
   Cufon.replace('#aside h5, #aside h6', { textShadow: '1px 1px #fff' });
   Cufon.replace('#breadcrumbs h1', { color: '-linear-gradient(#0e0e0e, #202020)', textShadow: '1px 1px #fff' });
   Cufon.replace('h1 span.fl', { color: '-linear-gradient(#950d38, #dc3560)', textShadow: '1px 1px #000' });
   Cufon.replace('#breadcrumbs h1 span.fl', {color: '-linear-gradient(#950d38, #a00d33)', textShadow: '1px 1px #fff' });
   Cufon.replace('h4', { color: '#181818',textShadow: '1px 1px #fff' });
   Cufon('#mainmenu > li > a', {
   color: '-linear-gradient(#b8b4b1, #edebe8)', textShadow: '1px 1px #000'/*,
   hover: {
   color: '-linear-gradient(#950d38, #dc3560)', textShadow: '1px 1px #000',
   }*/
   });
   Cufon.replace('#mainmenu > li.act > a', {
   color: '-linear-gradient(#950d38, #dc3560)', textShadow: '1px 1px #000'
   });
   Cufon('.pages > a', {
   color: '-linear-gradient(#b8b4b1, #edebe8)', textShadow: '0px -1px #000',
   hover: {
   color: '-linear-gradient(#b8b4b1, #edebe8)', textShadow: '0px -1px #5b1b25'
   }
   });
   Cufon.replace('.pages > a.act', {
   color: '-linear-gradient(#b8b4b1, #edebe8)', textShadow: '0px -1px #5b1b25'
   });
     
   slider_auto = 1000*10; // interval in ms for slider autoplay, 0 - autoplay disabled

</script>
<body>
$GLOBAL_AHEADER$
<div id="pxs_container" class="pxs_container">
   <div class="pxs_bg">
   <div class="pxs_bg1"></div>
   <div class="pxs_bg2"></div>
   <div class="pxs_bg3"></div>
   </div>
   <div class="pxs_loading">Загрузка изображений...</div>
   <div class="pxs_slider_wrapper">
   <ul class="pxs_slider">
   <li>
   <div class="holder">
   <img src="/html-pics/html-slider-pic/s-0.jpg" width="922" height="362" alt="" />
   <div class="mask"></div>
   <div class="desc_outer">
   <div class="desc">
   <h4>Ландщафт</h4>
   <div class="desc_text">
   Также широко используется в дизайне ландшафта, в оформлении мостов, лестниц и дорожек. В отличии от исскуственного камня природный дагестанский камень не меняет цвет и долговечен при правельной укладке.
   </div>
   <a href="#">Details</a><a class="desc_details"></a>
   </div>
   </div>
   </div>
   </li>
   <li>
   <div class="holder">
   <img src="/html-pics/html-slider-pic/s-1.jpg" width="922" height="362" alt="" />
   <div class="mask"></div>
   <div class="desc_outer">
   <div class="desc">
   <h4>Загородные виллы</h4>
   <div class="desc_text">
   Также мы можем предложить вам облицовку загородных коттеджей в дворцовом, классическом, современном стиле. В ассортименте камень около 25 видов.
   </div>
   <a href="#">Details</a><a class="desc_details"></a>
   </div>
   </div>
   </div>
   </li>
   <li>
   <div class="holder">
   <img src="/html-pics/html-slider-pic/s-2.jpg" width="922" height="362" alt="" />
   <div class="mask"></div>
   <div class="desc_outer">
   <div class="desc">
   <h4>Беседки</h4>
   <div class="desc_text">
   Наибольшей популярностью пользуются беседки. Строительство беседок во все времена было востребованным не только благодаря моде, но и исключительно полезному их качеству — уединение, отдых на свежем воздухе, праздничный ужин под звездным небом — кто откажется от такого удовольствия?
   </div>
   <a href="#">Details</a><a class="desc_details"></a>
   </div>
   </div>
   </div>
   </li>
   <li>
   <div class="holder">
   <img src="/html-pics/html-slider-pic/s-3.jpg" width="922" height="362" alt="" />
   <div class="mask"></div>
   <div class="desc_outer">
   <div class="desc">
   <h4>Классика</h4>
   <div class="desc_text">
   sed words which
   </div>
   <a href="#">Details</a><a class="desc_details"></a>
   </div>
   </div>
   </div>
   </li>
   <li>
   <div class="holder">
   <img src="/html-pics/html-slider-pic/s-4.jpg" width="922" height="362" alt="" />
   <div class="mask"></div>
   <div class="desc_outer">
   <div class="desc">
   <h4>Ручные работы</h4>
   <div class="desc_text">
   r If you arm Ipsum,
   </div>
   <a href="#">Details</a><a class="desc_details"></a>
   </div>
   </div>
   </div>
   </li>
   <li>
   <div class="holder">
   <img src="/html-pics/html-slider-pic/s-5.jpg" width="922" height="362" alt="" />
   <div class="mask"></div>
   <div class="desc_outer">
   <div class="desc">
   <h4>дворцы</h4>
   <div class="desc_text">
   oing to use psum,
   </div>
   <a href="#">Details</a><a class="desc_details"></a>
   </div>
   </div>
   </div>
   </li>
   </ul>
   <div class="pxs_thumbnails_holder">
   <span class="pxs_prev"></span>
   <ul class="pxs_thumbnails">
   <li><div><img src="/html-pics/slider-small/1m.jpg" alt="First Image" /><i></i></div></li>
   <li><div><img src="/html-pics/slider-small/2m.jpg" alt="Second Image" /><i></i></div></li>
   <li><div><img src="/html-pics/slider-small/3m.jpg" alt="Third Image" /><i></i></div></li>
   <li><div><img src="/html-pics/slider-small/4m.jpg" alt="Forth Image" /><i></i></div></li>
   <li><div><img src="/html-pics/slider-small/5m.jpg" alt="Fifth Image" /><i></i></div></li>
   <li><div><img src="/html-pics/slider-small/6m.jpg" alt="Sixth Image" /><i></i></div></li>
   </ul>
   <span class="pxs_next"></span>
   </div>
   </div>
   <div id="best_lable"></div>
</div>
     
<div id="content_t"></div>
<div id="content_spot_t">
<div id="content_spot_b">
<div id="content" class="section">

   <div class="cols">
   <div class="col_1-4">
   <h3>Отделка камнем</h3>
   <img src="/bag/thumb_cache_223x223_664df99cd5551d8753cfe4432ac3c318.png" onMouseMove='onMoveImg(this.style);' onMouseOut='onOutImg(this.style);'>
   </div>
   <div class="col_1-4">
<h3>Преимуще</h3>
   <img src="/bag/thumb_cache_223x223_e3a40344727cea0b95eadac1e6acbc.png" onMouseMove='onMoveImg(this.style);' onMouseOut='onOutImg(this.style);'>
   </div>
   <div class="col_1-4">
   <h3>Почему</h3>
   <img src="/bag/thumb_cache_223x223_e3a40344727cea0b95eadac1e6acbccc.png" onMouseMove='onMoveImg(this.style);' onMouseOut='onOutImg(this.style);'>
   </div>
   <div class="col_1-4">
   <h3>Мастера</h3>
   <img src="/bag/thumb_cache_223x223_3eb843bb2201c039a224f6a5b93906b3.png" onMouseMove='onMoveImg(this.style);' onMouseOut='onOutImg(this.style);'>
     
     
     
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
   <script type="text/javascript" src="/js/jquery-1.5.min.js"></script>
   <script src="//code.jquery.com/jquery-latest.js"></script>
   <script src="/bag/jquery.min.js"></script>
   <script src="/bag/jquery.fancybox.js"></script>
   <script src="/bag/bootstrap.js"></script>
   <script src="/bag/hover.js"></script>
   <script src="/bag/init.js"></script>
   <script src="/bag/jquery.easing.1.3.min.js"></script>
   <script src="/bag/modernizr.custom.95504.js"></script>
     

<script>
        
   $(function () {
   /* Текущее положение курсора */
   var cursorPosition = [];

   /**
   * Следит за перемещением курсора и записывает текущее положение в объект cursor
   */
   $(document).on('mousemove', function (e) {

   if (cursorPosition) {

   if (cursorPosition.length > 3) {
   cursorPosition.splice(0, cursorPosition.length - 3);
   }

   cursorPosition.push({
   x: e.pageX,
   y: e.pageY
   });
   }
   });
   /**
   * Работает с событиями (фото) на главной странице
   *
   */
   (function () {
   var container = $('.portfolio-list'),
   itemsSelector = 'div.portfolio-item',
   excludeClass = 'b-event_large',
   infoblockSelector = '.portfolio-mask';
   container.on('mouseenter mouseleave', itemsSelector, function (e) {
   var $this = $(this),
   eventType = e.type,
   infoblock = $this.find(infoblockSelector),
   offsets = $this.offset(),
   cursor = cursorPosition[0],
   cursorNow = null,
   width = $this.width(),
   height = $this.height(),
   сoordinates = {},
   speed = 400;

   if (!infoblock.length) return;

   /* Вычисляем необходимые значения */

   if (cursor) {

   if (eventType == 'mouseenter') {

   if (cursor.x < offsets.left) {
   сoordinates.left = -width;
   } else if (cursor.x > offsets.left + width) {
   сoordinates.left = width;
   } else {
   сoordinates.left = 0;
   }

   if (cursor.y < offsets.top) {
   сoordinates.top = -height;
   } else if (cursor.y > offsets.top + height) {
   сoordinates.top = height;
   } else {
   сoordinates.top = 0;
   }

   show();

   } else if (eventType == 'mouseleave') {

   setTimeout(function () {

   cursorNow = cursorPosition[cursorPosition.length-1];

   if (cursorNow.x < offsets.left) {
   сoordinates.left = -width;
   } else if (cursorNow.x > offsets.left + width) {
   сoordinates.left = width;
   } else {
   сoordinates.left = 0;
   }

   if (cursorNow.y < offsets.top) {
   сoordinates.top = -height;
   } else if (cursorNow.y > offsets.top + height) {
   сoordinates.top = height;
   } else {
   сoordinates.top = 0;
   }

   hide();

   }, 50);
   }

   } else {

   сoordinates = {
   top:0,
   left:0
   };

   if (eventType == 'mouseenter') {
   show();
   } else if (eventType == 'mouseleave') {
   hide();
   }
   }
   /* Анимируем */

   function show () {

   infoblock
   .stop()
   .css({
   top: сoordinates.top,
   left: сoordinates.left,
   opacity: 0,
   display: 'block'
   })
   .animate({ top:0, left:0, opacity:1 }, speed, 'easeOutCubic');
   }

   function hide () {

   infoblock
   .stop()
   .animate({
   top:сoordinates.top,
   left:сoordinates.left,
   opacity:'hide'
   });
   }

   });
   })();
});

</script>

     
     
     
     
     
     
     
     
   </div>   
</div>
</div>
</div>

<div id="footer_t"></div>
$GLOBAL_BFOOTER$
</body>
</html>
вот сама страница тестоваяWebPage
Форум CREWEBIK.ru » design studio for uCoz » ФОРУМ ВЕБ МАСТЕРОВ » html & css » Hover (Анимация картинки с помощью hover)
Страница 1 из 11
Поиск: