Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Настройка скользящей кнопки (https://javascript.ru/forum/dom-window/7804-nastrojjka-skolzyashhejj-knopki.html)

Sega71 19.02.2010 22:46

Настройка скользящей кнопки
 
Господа, нашел скрипт скользящей формы отправки E-mail, сделал из формы обычную кнопку, точнее картинку с ссылкой. В этом коде картинка появляется в верхнем левом углу страницы и по диагонали спускается к установленным координатам, после чего, при прокрутке страницы вверх вниз картинка скользит вместе с видимой частью страницы, т.е. всегда перед Вами. Вопрос вот в чем: "Как сделать, чтобы картинка при открытии страницы ни откуда не спускалась, а была сразу на месте установленных координат?"
Вот сам код страницы со скриптом:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="generator" content="AceHTML 5 Pro">
</head>
<body>
<script>
var hX = -200;
var vY = -210;
</script>
<div id="image1" style="position:absolute; overflow:hidden; left:50px; top:50px; width:48px; height:48px; z-index:0"><a href="http://invisible.ax3.net/forum/index.php"><img src="3237.png" alt="" border=0 width=48 height=48></div>
<script>
var nn=(navigator.appName.indexOf("Netscape")!=-1);
var dD=document,dH=dD.html,dB=dD.body,px=dD.layers?'':'px';
function image1(iX,iY,id){
var L=dD.getElementById?dD.getElementById(id):dD.all?dD.all[id]:dD.layers[id];
this[id+'O']=L;if(dD.layers)L.style=L;L.nX=L.iX=iX;L.nY=L.iY=iY;
L.P=function(x,y){this.style.left=x+px;this.style.top=y+px;};L.Fm=function(){var pX, pY;
pX=(this.iX >=0)?0:nn?innerWidth:nn&&dH.clientWidth?dH.clientWidth:dB.clientWidth;
pY=nn?pageYOffset:nn&&dH.scrollTop?dH.scrollTop:dB.scrollTop;
if(this.iY<0)pY+=nn?innerHeight:nn&&dH.clientHeight?dH.clientHeight:dB.clientHeight;
this.nX+=.1*(pX+this.iX-this.nX);this.nY+=.1*(pY+this.iY-this.nY);this.P(this.nX,this.nY);
setTimeout(this.id+'O.Fm()',33);};
return L;}
image1(hX,vY,'image1').Fm();
</script>
</body>
</html>

С Java не дружу, методом научного тыка ничего не получается, при удалении каких-либо строк кода, картинка стоит на одном месте, при изменении числа 33, просто меняется скорость спуска картинки к установленным координатам...

Gozar 20.02.2010 08:54

Для того, чтобы:
Цитата:

Сообщение от Sega71 (Сообщение 45479)
сделать, чтобы картинка при открытии страницы ни откуда не спускалась, а была сразу на месте установленных координат?"

вышеприведенный скрипт не нужен, а нужно задать:
<div style="display:block;position:absolute;z-index:99;top:100px;left:20px;width:300px;height:400px;">тут всё что нужно и картинка тоже</div>

Sega71 20.02.2010 11:15

Извините конечно, но по моему Вы меня не правильно поняли, если пользоваться Вашим кодом, то картинка не скользит, а все время на одном месте, т.е. прокручивается вместе с страницей, а нужно чтобы страница прокручивалась, а картинка нет, т.е. оставалась всегда на виду, что и делает мой скрипт. Просто он (скрипт) делает больше чем нужно, поэтому необходимо убрать так называемое "появление" картинки (чтоб она не спускалась с верхнего левого угла, а потом скользила по странице, а была на воем месте:
<script>
var hX = -200;
var vY = -210;
</script>

без всяких появлений и выполнялись основные функции скрипта, т.е. картинка при прокрутке страницы остается все время на виду.:)

Kolyaj 20.02.2010 11:21

http://www.artlebedev.ru/tools/techn...fixed_in_msie/

Sega71 20.02.2010 15:57

Господа, благодарю Вас за помощь, нашел решение проблемы, правда не из Ваших подсказок, но все-равно спасибо, без Вас не нашел бы!
Кому интересно вот моя инструкция:
########################################################################################################################################################################################
                            Как установить скользящую картинку
########################################################################################################################################################################################
1)

Вставляем перед тегом <html> всамом вверху страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">

########################################################################################################################################################################################
2)

Вставляем после <style type="text/css">

#cat {display:block; top:180px; left:827px; position:fixed; z-index:116;}

Внимание не забываем смотреть номер последнего (z-index), иначе картинку будет невидно!!!
top:180px; left:827px; координаты нахождения картинки на странице!!! 

########################################################################################################################################################################################
3)

Вставляем между <body> и </body>

<div id="cat"><a href="http://invisible.ax3.net"><img src="images/3237.png" alt="Форум" border=0 width=48 height=48></a></div>

<div id="cat"> идентификатор блока из CSS (пункт 2)
Ставим border=0, т.к. картинка с ссылкой, чтобы небыло бардюра, т.к. светится цветом ссылки!!!
width=48 height=48 размеры самой картинки!!!
<a href="http://invisible.ax3.net"> ссылка при нажатии на картинку!!!

########################################################################################################################################################################################

InviS 21.02.2010 07:09

position: fixed

Internet Explorer 6 и ниже не поддерживает данный аргумент :D Как всегда

Sega71 21.02.2010 23:28

InviS А вот для этого есть вот чего!!!
<!--[if lte IE 6]>
   <style type="text/css">
   /*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
   /*]]>*/
   </style>
<![endif]-->

Sega71 21.02.2010 23:28

:)


Часовой пояс GMT +3, время: 09:03.