Как вернуть scrollBar на страницу.
Уесть такая страница.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=window-1251" />
<title>Я Мерепещающаяся картинка!</title>
<style>
body{padding:0;margin:0;}
#slidediv1{width:100%;height:100%;position: fixed;}
.tdiv{position: fixed; width:300px; height:30px; background: rgba(0, 0, 0, 0.8); top:0; left:20px; color:#f99206;padding:5px;}
.bdiv{position: fixed; width:300px; height:30px; background: rgba(0, 0, 0, 0.8); bottom:0; right:20px; color:#f1f1f1;padding:5px;}
.newsdiv{position: fixed; width:300px; height:300px; background: rgba(0, 0, 0, 0.9); color:#f1f1f1;padding:5px; border-radius:10px 10px 10px 10px; border: 2px dashed #fff;margin:50px !important;}
</style>
</head>
<body >
<div id="slidediv1" style="background:url(https://pp.vk.me/c307514/v307514138/a569/7mb8m9F-JFQ.jpg);"></div>
<div class="tdiv"><div align="center"><b>Картинка:</b> Небеса</div></div>
<div class="bdiv"><div id="stop" style="float:left">Стоп</div><div id="down" style="float:left">Вниз</div><div id="scrolldown" style="float:left">Прокрутить Вниз</div></div>
<div id="firstdiv">
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div></div>
<script>
function afun(divname,divarwidth){
document.getElementById('down').onclick=function(){flydown();}
document.getElementById('stop').onclick=function(){clearInterval(s);}
var position='';
var z=0;
var l=0;
var i=1;
var e=document.getElementById(divname);
var num=e.children.length;
function flydown(){
var topdown=[screen.height/2 , screen.height/2+100+divarwidth];
while(i<num){
if(z==0){z=1;}else{z=0;}
e.children[i].style.top=i*divarwidth+'px';
e.children[i].style.left=topdown[z]+'px';i++;}clearInterval(s);
}
if(screen.height>=720){
var topposition=[Math.floor(Math.random()*screen.height/6-100) , screen.height/2-100+Math.floor(Math.random()*80)];
while(i<num){
position+=(i*300+Math.floor(Math.random()*50))+Math.floor(Math.random()*screen.width/10);
position+='^';
i++;
}i=0;
positionarry=position.split('^');
while(i<num){
pi=i-1;
if(z==0){z=1;}else{z=0;}
e.children[i].style.top=topposition[z]+50+'px';
e.children[i].style.left=positionarry[i]+'px';i++;
}
function animate(){
l++;
while(i<num){
e.children[i].style.left=positionarry[i]-l+'px';i++;
}
i=0;
}}
else{flydown()}
var s=setInterval(function(){animate();},50);
}
afun('firstdiv',300);
</script>
</body>
</html>
На которой плавно перемещаться div-ы с права налево.Так же есть кнопочка "Вниз" (После сделаю картинку) По которой все эти Div-ы выстраиваются в шамотном порядке сверху вниз. Но вот проблема. . . Нет СКРОЛИНГА! Есть всего одни идея. Но она не очень хорошая и я её приберёг на крайний случай. (Писать свой скролигл используя style.toр/left) |
[html run] допиши. А то нет кнопки Посмотреть
|
danik.js,
Всё =) |
Често говоря я не увидел шахматного порядка, тыкая на кнопку Вниз. И не понимаю какой скроллинг тебе нужен.
Проставь высоту через [html height=1000] |
:write:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<title>Я Мерепещающаяся картинка!</title>
<style>
body{padding:0;margin:0;}
#slidediv1{width:100%;height:100%;position: fixed;}
.tdiv{position: fixed; width:300px; height:30px; background: rgba(0, 0, 0, 0.8); top:0px; left:20px; color:#f99206;padding:5px;}
.bdiv{position: fixed; width:300px; height:30px; background: rgba(0, 0, 0, 0.8); bottom:0; right:20px; color:#f1f1f1;padding:5px;}
.newsdiv{position: absolute; width:300px; height:300px; background: #000000; color:#f1f1f1;padding:5px; border-radius:10px 10px 10px 10px; border: 2px dashed #fff;margin:50px !important;}
#firstdiv{position: relative;}
</style>
</head>
<body >
<div id="slidediv1" style="background:url(file:///C:/Users/Rail-gun/Desktop/e9zca.jpg);"></div>
<div class="tdiv"><div align="center"><b>Картинка:</b> Небеса</div></div>
<div class="bdiv"><div id="stop" style="float:left">Стоп</div><div id="down" style="float:left">Вниз</div><div id="scrolldown" style="float:left">Прокрутить Вниз</div></div>
<div id="firstdiv">
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div></div>
<script>
function afun(divname,divarwidth){
document.getElementById('down').onclick=function(){flydown();}
document.getElementById('stop').onclick=function(){clearInterval(s);}
var position='';
var z=0;
var l=0;
var i=1;
var e=document.getElementById(divname);
var num=e.children.length;
function flydown(){
var topdown=[screen.height/2 , screen.height/2+100+divarwidth];
while(i<num){
if(z==0){z=1;}else{z=0;}
e.children[i].style.top=i*divarwidth+'px';
e.children[i].style.left=topdown[z]+'px';i++;}clearInterval(s);
}
if(screen.height>=720){
var topposition=[Math.floor(Math.random()*screen.height/6-100) , screen.height/2-100+Math.floor(Math.random()*80)];
while(i<num){
position+=(i*300+Math.floor(Math.random()*50))+Math.floor(Math.random()*screen.width/10);
position+='^';
i++;
}i=0;
positionarry=position.split('^');
while(i<num){
pi=i-1;
if(z==0){z=1;}else{z=0;}
e.children[i].style.top=topposition[z]+50+'px';
e.children[i].style.left=positionarry[i]+'px';i++;
}
function animate(){
l++;
while(i<num){
e.children[i].style.left=positionarry[i]-l+'px';i++;
}
i=0;
}}
else{flydown()}
var s=setInterval(function(){animate();},50);
}
afun('firstdiv',300);
</script>
</body>
</html>
|
рони,Вот спасибо. У меня не стразу ваш пост появился =)
Тогда написание своего скролла можно положить обратно в долгий ящик =) |
koeshiro,а что в примере выше скрола таки нет?
|
рони,
спасибо вам большое =) |
| Часовой пояс GMT +3, время: 17:41. |