О проекте | Услуги  | 

Удаленная работа
для творческих личностей

dimaninc
VIP аккаунт
[dimaninc] рейтинг: 1009.68
Веб-проекты любой сложности

Хотите опередить других фрилансеров?

интересное  |  блоги

фрилансеры  |  рейтинг

sunnyshine
[sunnyshine] рейтинг: 1992.50
В портфолио 172 работы
st_valentin
[st_valentin] рейтинг: 1986.13
В портфолио 321 работа
v-grebennikov
[v-grebennikov] рейтинг: 1383.25
В портфолио 1798 работ
dimaninc
VIP аккаунт
[dimaninc] рейтинг: 1009.68
В портфолио 70 работ
stg
[stg] рейтинг: 831.59
В портфолио 211 работ

работы  |  лучшие

интересное  |  статьи

фрилансеры  |  свежак

reshetnikova24
[reshetnikova24] рейтинг: 0.00
Зарегистрирован 27.05.2017 18:07
В портфолио нет работ
skyfox
[skyfox] рейтинг: 0.00
Зарегистрирован 27.05.2017 15:27
В портфолио нет работ
ghjtt
[ghjtt] рейтинг: 0.00
Зарегистрирован 27.05.2017 14:38
В портфолио нет работ
leyimona
[leyimona] рейтинг: 0.00
Зарегистрирован 27.05.2017 14:11
В портфолио нет работ
janicegak
[janicegak] рейтинг: 0.00
Зарегистрирован 27.05.2017 05:58
В портфолио нет работ

интересное  |  новости

обратная связь
Замечания или пожелания по работе сайта?
Улучшим его персонально для Вас!
Либо пишите на
Пользователей: 62774 | Проектов: 26872

Статьи / Плагин diCrossfade для jQuery, плавное перетекание одной картинки в другую

Плагин diCrossfade для jQuery, плавное перетекание одной картинки в другую

на одном проекте понадобилось соорудить рекламный блок, в котором бы картинки-ссылки плавно сменялись бы: следующая, постепенно из полностью прозрачной становилась бы 100% видимой, перекрывая собой предыдущую. и так по кругу.



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



делаем скелет для плагина


(function($) {

$.fn.diCrossfade = function(settings) {
// здесь будет наш код
}

}(jQuery));


прикидываем, какие настройки нам понадобятся:


    settings = $.extend({
href: false, //ссылка, туда будет вести новая картинка, если надо
pic: '', //URL картинки
speed: 2000 //скорость смены картинки, в милисекундах
}, settings || {});


эту функцию будем использовать для привязки ссылки к картинке. если ссылки нет, то ничего не привязываем. если есть, то в зависимости от тега, в котором содержится новая картинка, либо присваеваем ссылку в аттрибут href, либо вешаем переход по ссылке на событие onclick:



    function set_href($e, href)
{
if (!href) return false;

if ($e.get(0).tagName.toUpperCase() == 'A')
$e.attr('href', href);
else
{
$e.css({cursor: 'pointer'}).click(function() {
window.location.href = href;
return false;
});
}
}


вставляем контейнер с новой картинкой позади старого:



      var $this = $(this);
var $helper = $this.clone().attr('id', '').css({ //клонируем исходный контейнер и переназначаем некоторые css-свойства
display: 'block',
position: 'absolute',
margin: 0,
padding: 0,
backgroundImage: 'url('+settings.pic+')',
width: $this.width()+'px',
height: $this.height()+'px'
}).insertBefore($this);;

set_href($helper, settings.href); //вешаем новую ссылку на оба элемента - на новую картинку...
set_href($this, settings.href); //...и на все еще отображаемую старую


плавно меняем прозрачность старой картинки на ноль, а после мгновенно подменяем картинку в старом контейнере на новую, а временный контейнер с новой картинкой удаляем:



      $this.animate({opacity: 0}, settings.speed, function() {
$this.css({
backgroundImage: $helper.css('backgroundImage'),
opacity: 1.0
});

$helper.remove(); //временный контейнер удаляется
});


ну и собираем все воедино:



// (c) 2013 dimaninc
// dimaninc@gmail.com, http://dalance.ru/users/dimaninc/

(function($) {

$.fn.diCrossfade = function(settings) {

settings = $.extend({
href: false,
pic: '',
speed: 2000
}, settings || {});

function set_href($e, href)
{
if (!href) return false;

if ($e.get(0).tagName.toUpperCase() == 'A')
$e.attr('href', href);
else
{
$e.css({cursor: 'pointer'}).click(function() {
window.location.href = href;
return false;
});
}
}

return this.each(function(){

var $this = $(this);
var $helper = $this.clone().attr('id', '').css({
display: 'block',
position: 'absolute',
margin: 0,
padding: 0,
backgroundImage: 'url('+settings.pic+')',
width: $this.width()+'px',
height: $this.height()+'px'
}).insertBefore($this);;

set_href($helper, settings.href);
set_href($this, settings.href);

$this.animate({opacity: 0}, settings.speed, function() {
$this.css({
backgroundImage: $helper.css('backgroundImage'),
opacity: 1.0
});

$helper.remove();
});

});

}

}(jQuery));


скачать готовый скрипт можно тут: jquery.dicrossfade.js



пример использования:



<!doctype html>
<html>
<head>
<title>diCrossfade jquery plugin test</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="../jquery.dicrossfade.js" type="text/javascript"></script>
<style>
.wrapper {
border: 2px dashed #aaa;
display: inline-block;
}

.wrapper .pic {
width: 440px;
height: 300px;
background: transparent center center no-repeat;
position: relative; /* не забываем об этом, иначе zindex работать не будет */
}
</style>
</head>

<body>

<p><button>go</button></p>

<div class="wrapper">
<div class="pic"></div>
</div>

<script type="text/javascript">
$(document).ready(function() {

var pics_ar = [
{pic: 'i/baggio.jpg'},
{pic: 'i/fob.jpg', href: 'http://falloutboy.com'},
{pic: 'i/hangover.jpg'}
];

var pic_idx = 0;

$('.wrapper .pic').diCrossfade({
href: pics_ar[pic_idx].href || false,
pic: pics_ar[pic_idx].pic,
speed: 0
});

$('button').click(function() {
if (++pic_idx > pics_ar.length - 1)
pic_idx = 0;

$('.wrapper .pic').stop(true, true).diCrossfade({
href: pics_ar[pic_idx].href || false,
pic: pics_ar[pic_idx].pic,
speed: 1500
});
});

});
</script>

</body>
</html>


в случае, если у кого есть замечания и предложения - пишите, с радостью отвечу.
( Комментировать )
sergogogo
19:54 14.01.2016
[ рейтинг: 19.94 ] [ В портфолио 2 работы ]
велаписед))
Тема:
Сообщение:
( Комментировать )

...