Войти
или
зарегистрироваться
Главная
Портфолио
Отзывы
Контакты
Вход
Регистрация
Новые сообщения
Участники
Правила форума
RSS
Подписки
Поиск
Страница
1
из
1
1
Форум CREWEBIK.ru » design studio for uCoz
»
ФОРУМ ВЕБ МАСТЕРОВ
»
html & css
»
Hover
(Анимация картинки с помощью hover)
Hover
kurban52
1
');return false;" rel="nofollow" href="javascript://" name="6489">
12.08.2014 в 21:42
скрипт есть но ни как не получается его связать с картинкой (( пример
Это не реклама
exclusiv...
2
');return false;" rel="nofollow" href="javascript://" name="6490">
12.08.2014 в 22:02
во-первых поставь кодирвку скрипта utf-8
во-вторых нужно смотреть нет ли конфликта между скриптами, потому что на юкозе это часто получается при применении скриптов сторонних
в-третьих, там скорее всего у тебя в html не прописаны все классы от этого скрипта и поэтому он у тебя не работает, может еще и то что ты его не правильно применяешь.
Так что ты смотри внимательно
kurban52
3
');return false;" rel="nofollow" href="javascript://" name="6492">
13.08.2014 в 12:31
а возможно полный рип в ucoz
css я так понял не нужен
я хочу поставить на главной странице будет ли конфликт с Ilight
можешь показать маленький пример
вот код может что подскажешь еще кодировка стоит мне кажется что скрипт 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
из
1
1
Главная страница форума
Главный раздел
Сайт и форум
Конкурсы
Дизайн мастерская
Наши работы
Студия CREWEBIK
CREWEBIK design
Готовые PSD Работы
Уроки дизайна
Оценка ваших работ
Вопросы
ФОРУМ ВЕБ МАСТЕРОВ
Faq по uCoz
Анимация и флеш(Flash)
Меню
Пользователи
Новости сайта
Каталог файлов
Скрипты и коды
Форум
Мини-чат
Переключатели страниц
html & css
Другие шаблоны для uCoz
Разное и полезное
Общение пользователей
Развлекательные игры
Мусорка
Корзина
Поиск: