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

Меню

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

0

Увеличительное стекло на jQuery

Jemand 13484 , ,
JavaScript

1. CSS

.zoomy	{
	position: absolute;
	display: none;
	background-repeat: no-repeat;
	border: 0;
	cursor: url(blank.gif), move;
	line-height: 100px;
	text-align: center;
	background-image: url(loading.gif);
	background-position: center;
	background-color: #fff;
	z-index: 1000;
	box-shadow: 3px 3px 10px #000;
	-webkit-box-shadow: 3px 3px 10px #000;
	-moz-box-shadow: 3px 3px 10px #000;
	}
.zoomy span {
	display: block;
	margin: 10px auto;
	background: -webkit-gradient(linear, 0% 100%, 0% 0%, color-stop(0.50, rgba(255, 255, 255, 0)), to( rgba(255, 255, 255, .5)));
	background: -moz-linear-gradient(bottom center, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .5) 100%);
	}
.zoomy img {
	opacity: 0;
	filter:alpha(opacity=0);
	}
.zoomy a {
	color: #333;
	text-decoration: none;
	}
.broke a {
	display: block;
	height: 100%;
	width: 100%;
	}
#brokeZoomy {
	display: block;
	position: absolute;
	width: 30px;
	height: 30px;
	top: 0px;
	left: 0px;
	background: #fff url(broke.gif) center no-repeat;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	}

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

3. Подключение Zoomy

<script type="text/javascript" src="jquery.zoomy0.5.js"></script>

4. JavaScript

<script type="text/javascript">
	$(function(){
		$('.zoom').zoomy({
			zoomSize: 150 // Размер "увеличительного стекла" в пикселях
		});
	});
</script>

5. HTML

<a href="5000_big.jpg" class="zoom"> 
	<img src="5000_small.jpg">  
</a>

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

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