сss (9) сss3 (14) ajax (2) css (42) drupal (7) Fix IE6 (4) font (4) html (23) javascript (22) jQuery (15) js (5) less (1) php (1) scss (1) soft (2) vue (1) webstorm (1) wordpress (1)

Смена прозрачности на jQuery 

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

<script type="text/javascript">$(document).ready(function() {
  var opacity = 0.5, toOpacity = 1.0, duration = 400;
  $('.opacity').css('opacity',opacity).hover(function() {
          $(this).fadeTo(duration,toOpacity);
      }, function() {
          $(this).fadeTo(duration,opacity);
      }
  );
});</script>

нашел на http://css-school.ru
Мітки:

CSS 3, новое свойство resize 

Свойство resize появилось в CSS 3, оно 
имеет три значения:
both - блок тянется и по горизонтали и по вертикале;
horizontal - только по горизонтали;
vertical - только по вертикале;

Попробовать можно в Safari, Mozilla Firefox
                    и Google Chrom
Мітки:

слайдер на js(JQuery)

Задача. Сделать слайд шоу….

Ну всё вроде просто: есть контент (текст, или фото), и нужно просто через интервал времени показывать блоки по очереди…

Есть список:
<ul id=sliders> <li class=active>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>

В каждом теге списка есть какой-то контент… ЦСС-гламур делать не буду, напишу просто функционал скрипта.

В стилях скрываем список, и показываем только первый блок, можно конечно скрыть все и показывать блок методом яваскрипта, но вдруг скрипты у юзера будут выключены, а так хоть что-то видно :)
<style> 
#sliders li{
display: none;
}
#sliders li.active{
display: block;
}
</style>

Подключаем библиотеку jquery, в <head>.
<script type="text/javascript" src="jquery.js"></script>

Теперь скрипт:

<script type="text/javascript">
             
/* начальный номер блока который показывать */
var i = 2; 

var func_sliders = function(){ 
/* прячет все блоки */
$("#sliders li").hide(); 
/* Показывает следующий попорядку */
$("#sliders li").eq(i-1).fadeIn("slow"); 

/* количество li */
var max = $("#scroller li").size(); 
/* если показали последний блок, то начинаем с начала */ 
if (i < max) { i++; } else i=1; 
};
 
/* функция повторяется с интервалом 2000 миллисекунд(2сек.) */       
timer = window.setInterval(func_sliders, 2000);
</script>

Вот и всё, должно работать, примитивно конечно, но вполне рабочий вариант…
Мітки:
Підписатися на: Дописи (Atom)