CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 267   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

8

Простая смена текста на jQuery

Jemand 26329 ,
JavaScript

1. CSS

#text {
	height: 100px;
	}
.name {
	font: 30px Tahoma;
	display: block;
	margin: 0 0 10px 0;
	color: #0094d6;
	text-shadow: 1px 1px 0 white, 2px 2px 2px #DDD;
	}
.descr {
	font: 15px Tahoma;
	padding: 0 0 0 35px;
	color: #ff7700;
	display: block;
	}

2. Подключение jQuery

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>

3. Подключение jQuery.Cycle.Lite

<script type="text/javascript" src="https://raw.github.com/malsup/cycle/master/jquery.cycle.lite.js"></script>

4. JavaScript

<script type="text/javascript">
	$(document).ready(function() {
		var parentTaglineEl = $('#text');
		parentTaglineEl.cycle({
			fx: 'fade',
			speed: 1000,
			timeout: 6000,
			random:  0
		});
	});
</script>

5. HTML

<div id="text">
	<div><span class="name">Дубна</span><span class="descr"> — наукоград на севере Московской области, крупнейший в России центр по исследованиям в области ядерной физики.</span></div>
	<div><span class="name">Жуковский</span><span class="descr"> — город в Московской области России. Наукоград Российской Федерации. Расположен в 25 км к юго-востоку от Москвы.</span></div>
	<div><span class="name">Королёв</span><span class="descr">  — город областного подчинения в Московской области России, наукоград, сотрудничает с 52 городами из 26 стран мира.</span></div>
</div>

Рекламная пауза

» 8 комментариев

  1. Здравствуйте, данный скрипт не работает в ие9, не знаете как поправить?
    Другие браузеры не проверял, но в 9ке точно беда.

  2. почему то текст не сразу меняет друг друга появляется фон сайта на такое же время как и текст.
    как решит подскажите пожалуйста

  3. Народ. а можно использовать этот метод для проигрывания картинок??
    т.е. вместо текста поставить какие-то картинки?
    и на них ссылки налепить, чтобы можно было перейти на страницы по сайту???
    Спасибо, за ответ! )) если он будет ))

  4. А можно переделать,чтобы изменялись таблицы … ???


Оставить комментарий