Разделы
vvShop | RSS © 2008 – 2017
Контакты
email: igor@veselov.sumy.ua
skype: utz0r2

jQuery плагин До/После


jQuery плагин До/После

Демо

Скачать
Download jquery.beforeafter.zip

Подключается:
<div id="container">
<div><img alt="before" src="before.jpg" width="600" height="366" /></div>
<div><img alt="after" src="after.jpg" width="600" height="366" /></div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.beforeafter.js"></script>
<script type="text/javascript">
$(function(){
    $('#container').beforeAfter();
});
</script>

Опции:
animateIntro – whether or not to have the drag bar start completely to the right of the container and gradually move by itself to the midpoint (default false)
introDelay – if animateIntro is true, the number of milliseconds to wait before beginning the automatic drag bar move to the center of the image (default 1000)
introDuration – if animateIntro is true, the number of milliseconds it will take for the drag bar to go from the right side of the image to the middle of the image (default 1000)
showFullLinks – whether or not to display links below the image that a visitor can click on that will automatically show the full before or full after image (default true)
imagePath – the path (absolute or relative) to where you store the navigation images (default ‘/js/beforeAfter/’)

Как-то так:
$('#container').beforeAfter({
    animateIntro : true,
        introDelay : 2000,
        introDuration : 500,
        showFullLinks : false
});

Видоизменяем select почти стандартными средствами


Видоизменяем select почти стандартными средствами

И так, оказывается если для стандартного select-а установить прозрачность, то он станет прозрачным, а вот сам список остается непрозрачным, занимательное и довольно полезное поведение.

css примера:
<style type=”text/css”>
.selectWrap select{
position:absolute;
margin:-2px 0px 0px -5px;
font-family:Tahoma, sans-serif;
font-size:16px;
opacity:.5;
}
.selectWrap .link{
font-size:16px;
color:#0066cc;
border-bottom:1px dotted;
}
</style>

html примера:
<div class="selectWrap">
<select>
<option>Москва</option>
<option>...</option>
</select>
<span class="link">Москва</span>
</div>

Решение работающее и в IE6 :-) Но к сожалению при использовании его не получится стилизовать как захочется текст :-(
<select size=1 style=«position:absolute; width:100px; clip:rect(2px 82px 20px 2px); color:blue; top:10px;»>
<option value=1>One</option>
<option value=2>Two</option>
<option value=3>Three</option>
</select>

копипаст с хабра ибо тру хак

QR Код


QR Код

Расшифровывается как:
Igor Veselov 
veselov.sumy.ua
icq:210283011
email:igor@veselov.sumy.ua


Разработчики QR CODE японская компания «Denso-Wave», в 1994 году была придумана система «quick response» (QR) позволяющая заложить в КОД практически любую информацию. Основное достоинство QR CODE — это легкое распознавание сканирующим оборудованием (в том числе и фотокамерой мобильного телефона), что дает возможность использования в торговле, производстве, логистике, Рекламе и маркетинге. К 2000 году QR CODE получил признание и начал активно использоваться компаниями. QR это эволюция привычного нам штрих кода, и в скором времени мы будем использовать его повсеместно.

Что такое QR CODE и как он работает
QR Код

QR Код

Вот матричный способ разбиения картинки штрих кода наглядно, блоки необязательно должны быть квадратными, в версиях более высокого уровня имеют еще более причудливую форму и их плотность соответственно увеличивается. Напомню, что количество версий кода QR равняется 40.

Огромное преимущество данного кода в том что, его можно легко распознать при помощи Вашего мобильного телефона — достаточно установить соответствующий софт.

Максимальное количество символов, которые помещаются в один QR-код:
Цифры – 7089
Цифры и буквы (включая кириллицу) – 4296
Двоичный код – 2953 байт
Иероглифы – 1817

Онлайн генератор www.qurify.com QR-кодов
Еще один онлайн генератор позволяющий воткнуть текст как у меня http://mojiq.kazina.com/

Онлайн декодер http://zxing.org/w/decode QR-кодов[center]
Декодер на телефон http://www.i-nigma.mobi/ (использует инет для декодирывания)

Общий принцип и спецификация QR-кодов http://www.swetake.com/qr/qr1_en.html

Генерация QR-кода на php

jQuery UI эффекты анимации


Эффекты на jQuery: Blinds Effect, Clipping Effect, Drop Animation Effect, Explode Effect, Folding Effect, Puffing Effect, Sliding Effect, Scaling Effect, Pulsating Effect, Bouncing Effect, Highlight Effect, Shake Effect, Transfer Effect

jQuery UI эффекты анимации

Смотреть DEMO

ModalBox на prototype


ModalBox на prototype


ModalBox — javascript инструмент для создания современных модальных диалоговых окон без использования обычных всплывающих окон и перезагрузки страницы.

Reel jQuery (вращение изображения)


Reel jQuery (вращение изображения)

Reel это jQuery плагин который позволяет вращать фотографию. То есть получается анимация за счет смени координат слайса картинки, но выглядит это как вращение.

демо аля оф. сайт
«»
Вверх