Понедельник, 23 Декабря 2024, 13:09

Приветствую Вас Гость

[ Новые сообщения · Игроделы · Правила · Поиск ]
  • Страница 1 из 1
  • 1
скрипт уменьшение картинки jquery
watermarkДата: Среда, 05 Июня 2013, 15:44 | Сообщение # 1
был не раз
Сейчас нет на сайте
Нужна помощь в написании скрипта с помощью jquery. Для адаптивнай верстки сайта, под разные разрешение экрана.

сайт сверстан и написан скрипт . Но есть проблемки не большие вот ссылка

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

В этом скрипте все картинки задействованны

Как решить эту проблем ку?

вот скрипт

$(function(){
width=$("#mein").width()-236;
gnom = $(".gnom img");
soot = $(".box-9 img");
rw = $(".conten3 img");
width_img = soot.width();
width_photo = rw.width();
gnom.attr({"width":width})
$(window).resize(function(){
width=$("#mein").width()-236;
if(width < 426){
x = width / 426;
soot.attr({"width":width_img * x});
gnom.attr({"width":$("#mein").width()});
} else {
gnom.attr({"width":width});
}
if(width < 900 & width>760 ){
x = width / 900;
rw.attr({"width":width_photo * x});
}
});
});
</script>

HTML-cod

<body>
<div id="mein">

<div class="kar">
<a href="#" class="kont"><img src="img/d.png" width="11" height="10" /></a>
<a href="#" class="kon"><img src="img/d.png" width="11" height="10" /></a>
<a href="#" class="ko"><img src="img/d.png" width="11" height="10" /></a>
</div>
<header id="parentbox">
<a href="/"class="logo" title="На главную"><img border=0 src="img/logo.png" align="left"/></a>

<div class="head-st">
<hgroup>
<h1>Репетитор по математике и физике</h1>
<h2>Республика Беларусь</h2>
</hgroup>
</div>
<div class="head-rit">
<span>+37529467-57-35,<br/>356-12-34</span>
</div>
<br style="clear:both"/>
<div class="menu">
<ul class="men">
<li><a href="/">Главнае</a></li>
<li><a href="/">Новости</a></li>
<li><a href="/">Контакты</a></li>
<li><a href="/">Главнае</a></li>
<li><a href="/">Новости</a></li>
<li><a href="/">Контакты</a></li>
</ul><br style="clear:both"/>
</div>
</header>
<div class="tai">
Полный курс подготовки к экзаменационным тестам в Республике Беларусь
</div>
<div class="gnom">
<div class="blog-r">
<img src="img/m.png" class="op"/>
</div>
<div class="nes2">
<h3 class="m3">Новости</h3>
<ul class="menu-r">
<li><a href="#">Главнае</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Главнае</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Контакты</a></li>
</ul><br style="clear:both"/>

</div><br style="clear:both"/>
</div>
<section id="inder">

<div class="box-9">
<img src="img/1.png" class="men1"/>
<a href="/"class="t">Регистрация учеников</a>
</div>
<div class="box-9">
<img src="img/3.png"class="mena"/>
<a href="/"class="v">Oтзывы</a>
</div>
<div class="box-9">

<img src="img/4.png" class="mens"/>
<a href="/"class="f">Рейтинг учеников</a>
</div>

<div class="box-8"></div>
<div class="box-9">

<img src="img/2.png" class="mend"/>
<a href="/"class="i">Блог</a>
</div>
<div class="box-9">

<img src="img/5.png" class="menf"/>
<a href="/"class="o">Форум</a>
</div>
<div class="box-9">
<img src="img/6.png" class="meng"/>
<a href="/"class="j ">Персональная страница</a>
</div><br style="clear:both"/>

</section>
<section>
<div class="conten3">
<img src="img/mein.png" width="191" class="mein"/>
<div class="exc4">
<p> Добро пожаловать на сайт репетитора по физике и математике,
преподавателя высшей категории Евгения Борисовича Ливянта (Минск,
Беларусь).
<br/>
<br/>
Я предлагаю Вам полный курс подготовки к экзаменационным тестам по
математике и физике в Республике Беларусь. По Вашему желанию, Вы
сможете готовиться к вступительным экзаменам, приезжая ко мне на
занятия (очная форма), или дистанционно. Можно выбрать и смешанную
систему обучения. Для начала Вы можете попробовать свои силы,
выполнив вводные тесты. Результаты вводных тестов, а также
подробный разбор предложенных задач, помогут Вам выбрать
правильный путь подготовки к экзаменам.
<br/><br/>
В любом случае сразу настраивайте себя на серьёзную работу: путь к знаниям
не бывает лёгким. Настойчивость, целеустремленность и терпение – вот
главные составляющие успеха.
<br/><br/>
Готовясь к экзаменам, не забывайте, что в ВУЗ мало поступить. В нём надо
крайней мере, Вас из него не выгнали. И для этого Вам также нужна
ученики, уже поступившие в ВУЗы, отмечают, что полученные при</p>
</div>
<div class="nov">
<ul class="bt2">
<li><a href="#">Методика подготовки</a></li>
<li><a href="#">Формы обучения</a></li>
<li><a href="#">Вводные тексты</a></li>
<li><a href="#">Математика</a></li>
<li><a href="#">Физика</a></li>
<li><a href="#">Стоимость</a></li>
<li><a href="#">Скачать</a></li>
<li><a href="#">О преподавателе</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
<br style="clear:both"/>

</div>

</section>
<footer>
<div class="cones">
<div class="co3">
<span class="e">Минск 2010 </span>
 
<a href="/">Главнае</a>
<a href="/">Новости</a>
<a href="/">Контакты</a>
<a href="/">Главнае</a>
<a href="/">Новости</a>
<a href="/">Контакты</a>
</div>
<div class="co4">
<span class="e" id="q">+375(29)</span><span class="e" id="s">467-57-35, 356-12-34</span>
</div><br style="clear:both"/>
</div>
</footer>
</div>
</body>


Сообщение отредактировал watermark - Понедельник, 10 Июня 2013, 12:10
scnДата: Четверг, 06 Июня 2013, 14:00 | Сообщение # 2
был не раз
Сейчас нет на сайте
На далее, используйте пожалуйста тэг code не бейте глаза.

style="width:100%;" растянет картинку.

Если надо чтобы блок был слева, а картинка справа, то блоку float:left; width: n%;
а картинке float:right; width:b%;

Не очень хорошо сформулирован вопрос...

Думаю width=$("#mein").width() было бы лучше width=$("body").width()
watermarkДата: Понедельник, 09 Сентября 2013, 14:53 | Сообщение # 3
был не раз
Сейчас нет на сайте
У меня вопрос по скрипту jQuery
Помогите написать скрипт!
Принцып работы такой! При уменьшение окна браузера размер шрифта тоже уменьшался за счет этого скрипта.

<style>
h1{
font-size:50px;
}
</style>

<script type="text/javascript">
$(document).ready(function(){
$(function(){
width=$("body").width();
$("h1").animate({fontSize:"10px"});
});
});
</script>


Сообщение отредактировал watermark - Понедельник, 09 Сентября 2013, 15:31
  • Страница 1 из 1
  • 1
Поиск:

Все права сохранены. GcUp.ru © 2008-2024 Рейтинг