25.11.2010, 02:53
|
|
Интересующийся
|
|
Регистрация: 23.09.2010
Сообщений: 18
|
|
|
jQuery - превращаем интерфейс, в нечто похожее на Google Android на HTC Hero
Доброго времени суток. Дизайнер и аккаунт менеджер, расписали заказчику эффектную реализацию просмотра страниц сайта. Подход действительно интересный, но как реализовать пока, что не пойму. Необходимо сделать, нечто на подобии нескольких рабочих столов (кто пользовался linux, тот поймёт). Нечто подобное реализовано, на коммуникаторе HTC Hero с ОС Google Android, кто не понял о чём я, может посмотреть видео.
Сейчас попробую нарисовать схему, того, как это должно выглядеть на сайте.
Смысл такой, каждый экран, это DIV 1, DIV 2, DIV 3 (width:960px). Размещённые в блоке DIV 4. Жёлтая область, это область которую видит пользователь. Так вот, при нажатии, мне нужно смещать блоки, в право или лево, на такое расстояние, что бы соседний блок не "выглядывал" из-за карая экрана, ну и желательно перемещение сделать плавным. Вот как то так, поделитесь хотя бы идеями пожалуйста. 
Последний раз редактировалось dr.5y51em, 25.11.2010 в 02:57.
Причина: Уменьшил изображение :)
|
|
25.11.2010, 03:52
|
|
Интересующийся
|
|
Регистрация: 23.09.2010
Сообщений: 18
|
|
Вот, попробовал расположить элементы, всё конечно хорошо, кроме одного, НО! При просмотре последнего третьего блока, вылазит край второго 
Ах да, потом нужно будет убить горизонтальную полосу прокрутики... 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript">
<!--
$(document).ready(function(){
$('#bg').css('width', ($(window).width() - $('div._div').width())*6+'px');
$('div._div').css('margin-left', ($(window).width() - $('div._div').width())/2 + 'px');
});
-->
</script>
<style type="text/css">
._div {
font-family: Verdana, Geneva, sans-serif;
font-size: 24px;
font-weight: bold;
background-color: #999;
border: 1px solid #000;
width: 960px;
display:inline-block;
min-height:700px;
}
#bg {
background-color: #00F;
border: 1px solid #000;
min-height:768px;
}
</style>
</head>
<body>
<div id="bg">
<div class="_div" id="div1">div 1</div>
<div class="_div" id="div2">div 2</div>
<div class="_div" id="div3">div 3</div>
</div>
</body>
</html>
|
|
25.11.2010, 08:13
|
|
Интересующийся
|
|
Регистрация: 23.09.2010
Сообщений: 18
|
|
Сделал, кому интересно, можете посмотреть. Украшать по вкусу 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript">
<!--
$(document).ready(function(){
//$('div._div').css('width', '960px');
$('#bg').css('width', $(window).width()*3+10+'px');
$('#screen').css('width', $(window).width()+'px');
$('#div1').css('margin-left', ($(window).width() - $('div._div').width())/2+'px');
$('#div2').css('margin-left', ($(window).width() - $('div._div').width()) + 'px');
$('#div3').css('margin-left', ($(window).width() - $('div._div').width()) + 'px');
});
function goleft1()
{
$("#bg").animate({
marginLeft: '-'+$(window).width()-6+'px'
}, 1500 );
};
function goleft2()
{
$("#bg").animate({
marginLeft: '-'+$(window).width()-$(window).width()-12+'px'
}, 1500 );
};
function gorigth1()
{
$("#bg").animate({
marginLeft: '0px'
}, 1500 );
};
function gorigth2()
{
$("#bg").animate({
marginLeft: '-'+$(window).width()-6+'px'
}, 1500 );
};
-->
</script>
<style type="text/css">
html body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
clip: rect(0px,auto,auto,0px);
}
._div {
font-family: Verdana, Geneva, sans-serif;
font-size: 24px;
font-weight: bold;
background-color: #999;
border: 1px solid #000;
width: 960px;
display:inline-block;
min-height:700px;
position: relative;
}
#bg {
background-color: #00F;
border: 1px solid #000;
min-height:768px;
z-index:1;
}
#screen {
position: fixed;
min-width: 768px;
z-index:2;
}
</style>
</head>
<body>
<div id="screen">
<div id="bg">
<div class="_div" id="div1">div 1 <a href="#" onclick="goleft1();">Туды =></a></div>
<div class="_div" id="div2"><a href="#" onclick="gorigth1();"><= Сюды</a> div 2 <a href="#" onclick="goleft2();">Туды =></a></div>
<div class="_div" id="div3"><a href="#" onclick="gorigth2();"><= Сюды</a> div 3</div>
</div>
</div>
</body>
</html>
|
|
25.11.2010, 10:37
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
dr.5y51em,
тоже самое с интуитивной тудемой сюдемой ))) и для любого количества блоков
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#bg {
background: #00FF00;
position: absolute;
overflow: hidden;
}
#show{
position: absolute;
overflow: hidden;
background: #FFFF00;
overflow: hidden;
}
._div{
border: 4px solid #000;
background: blue;
color: white;
text-align: center;
width: 700px;
height: 700px;
float: left;
}
</style>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var b = 4;//величина бордюра ._div
$('#bg').css({'width': $(window).width(),'height':$(window).height()});
$('#show').css('width', $('#bg').width()*$('div._div').length);
$('._div').css({'margin-left':($('#bg').width() - $('div._div').width())/2-b*2,
'margin-right':($('#bg').width() - $('div._div').width())/2 } );
$('._div').css('height', $(window).height()-b*2);
function go(n){
$('#show').animate({"left":n+"="+$('#bg').width()},1000);
}
$('._div').not(":first,:last").click( function(event){
if(event.pageX>$(window).width()/2){go("-")}
else {go("+")};});
$('._div:first').click(function(){go("-")});
$('._div:last').click( function(){go("+")});
});
</script>
</head>
<body>
<div id="bg">
<div id="show">
<div class="_div" id="div1">div 1</div>
<div class="_div" id="div2">div 2</div>
<div class="_div" id="div3">div 3</div>
<div class="_div" id="div4">div 4</div>
<div class="_div" id="div5">div 5</div>
<div class="_div" id="div6">div 6</div>
</div>
</div>
</body>
</html>
|
|
25.11.2010, 15:50
|
|
Интересующийся
|
|
Регистрация: 23.09.2010
Сообщений: 18
|
|
|
Ой паисба больше... Я пока учусь постиг только азы jQuery, по этому большое человеческое спасибо.
попробую сделать плагин =)
|
|
|
|
