Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

RicardoRodrigues

menu deslizante

Por , em Javascript

Recommended Posts

Guilherme Rambo    4

Guilherme Rambo
Postado

Movido WS >> Javascript

Compartilhar este post

Link para o post
Compartilhar em outros sites

RicardoRodrigues    0

RicardoRodrigues
Postado

achei outro tutorial quase igual, so que preciso na horizontal e esse é vertical.

como faço para colocar na horizontal?

se alguem puder ajudar agraço muito.

abraços.

 

<script language="JavaScript">// begin absolutely positioned scrollable area object scripts /*Extension developed by David G. Miles (www.z3roadster.net/dreamweaver)Original Scrollable Area code developed by Thomas Brattli To add more shock to your site, visit www.DHTML Shock.com*/function verifyCompatibleBrowser(){ 	this.ver=navigator.appVersion 	this.dom=document.getElementById?1:0 	this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; 	this.ie4=(document.all && !this.dom)?1:0; 	this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;  	this.ns4=(document.layers && !this.dom)?1:0; 	this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5) 	return this } bw=new verifyCompatibleBrowser()   var speed=50 //aqui é a velocidade da animação! var loop, timer  function ConstructObject(obj,nest){ 	nest=(!nest) ? '':'document.'+nest+'.' 	this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0; 	this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0; 	this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight 	this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight 	this.up=MoveAreaUp;this.down=MoveAreaDown; 	this.MoveArea=MoveArea; this.x; this.y; 	this.obj = obj + "Object" 	eval(this.obj + "=this") 	return this } function MoveArea(x,y){ 	this.x=x;this.y=y 	this.css.left=this.x 	this.css.top=this.y }  function MoveAreaDown(move){ 	if(this.y>-this.scrollHeight+objContainer.clipHeight){ 	this.MoveArea(0,this.y-move) 	if(loop) setTimeout(this.obj+".down("+move+")",speed) 	} } function MoveAreaUp(move){ 	if(this.y<0){ 	this.MoveArea(0,this.y-move) 	if(loop) setTimeout(this.obj+".up("+move+")",speed) 	} }  function PerformScroll(speed){ 	if(initialised){ 		loop=true; 		if(speed>0) objScroller.down(speed) 		else objScroller.up(speed) 	} }  function CeaseScroll(){ 	loop=false 	if(timer) clearTimeout(timer) } var initialised; function InitialiseScrollableArea(){ 	objContainer=new ConstructObject('divContainer') 	objScroller=new ConstructObject('divContent','divContainer') 	objScroller.MoveArea(0,0) 	objContainer.css.visibility='visible' 	initialised=true; } // end absolutely positioned scrollable area object scripts </script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

RicardoRodrigues    0

RicardoRodrigues
Postado

achei xD, tava dando uma olhada numas pastas la em casa e acabei achando. agora o unico problema é q não estou conseguindo fazer ele ficar numa div de 460px, mudei o DivBg mais não adiantou, onde mudo para que ele fique com essa dimensao?

abraços.

 

 

<html><head><title>DHTMLCentral.com - Free Dynamic HTML Scripts - SideScrollMenu Demo</title><meta name="Author" content="Thomas Brattli (webmaster@dhtmlcentral.com)"><META NAME="Generator" CONTENT="Designer:Thomas Brattli (www.bratta.com)"><meta name="KeyWords" content="DHTML, HTML, Dynamic HTML, Javascript, Cascading Style Sheets, Cross-browser, Cross browser, Javascripts, DOM, Scripts, Free Scripts,menu,scrolling,animated,sidescrollmenu,bratta,arrows,"><meta name="Description" content="Dynamic HTML Central - The ultimate place to find DHTML scripts, demos, tutorials and help."><style type="text/css">body			 {background-color:#ffffff;}#divMenu a	   {color:#999999; text-decoration:underline;}#divMenu a:hover {color:#333333; text-decoration:underline;}#divBg		   {position:absolute; z-index:10; width:2000px; left:0px; height:100px; clip:rect(0px 10px 10px 0px); visibility:hidden;}#divMenu		 {position:absolute; z-index:11; left:11px; top:1px; color:#333333; font-size:13px; font-family:verdana,arial,helvetica,sans-serif; visibility:inherit;}#divArrowLeft	{position:absolute; z-index:12; width:11px; height:20px; left:0px; top:0px; visibility:inherit;}#divArrowRight   {position:absolute; z-index:12; width:11px; height:20px; top:0px; visibility:inherit;} </style><script language="JavaScript" type="text/javascript">/**********************************************************************************   SideScrollMenu *   Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>*   This script was released at DHTMLCentral.com*   Visit for more great scripts!*   This may be used and changed freely as long as this msg is intact!*   We will also appreciate any links you could give us.**   Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>  and modified by Michael van Ouwerkerk*********************************************************************************/function lib_bwcheck(){ //Browsercheck (needed)	this.ver=navigator.appVersion	this.agent=navigator.userAgent	this.dom=document.getElementById?1:0	this.opera5=this.agent.indexOf("Opera 5")>-1	this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; 	this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;	this.ie4=(document.all && !this.dom && !this.opera5)?1:0;	this.ie=this.ie4||this.ie5||this.ie6	this.mac=this.agent.indexOf("Mac")>-1	this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; 	this.ns4=(document.layers && !this.dom)?1:0;	this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)	return this}var bw=new lib_bwcheck()/**************************************************************************Variables to set.***************************************************************************/sLeft = 0		 //The left placement of the menusTop = 120		//The top placement of the menusMenuheight = 30  //The height of the menusArrowwidth = 11  //Width of the arrowssScrollspeed = 20 //Scroll speed: (in milliseconds, change this one and the next variable to change the speed)sScrollPx = 8	 //Pixels to scroll per timeout.sScrollExtra = 15 //Extra speed to scroll onmousedown (pixels)/**************************************************************************Scrolling functions***************************************************************************/var tim = 0var noScroll = truefunction mLeft(){	if (!noScroll && oMenu.x<sArrowwidth){		oMenu.moveBy(sScrollPx,0)		tim = setTimeout("mLeft()",sScrollspeed)	}}function mRight(){	if (!noScroll && oMenu.x>-(oMenu.scrollWidth-(pageWidth))-sArrowwidth){		oMenu.moveBy(-sScrollPx,0)		tim = setTimeout("mRight()",sScrollspeed)	}}function noMove(){	clearTimeout(tim);	noScroll = true;	sScrollPx = sScrollPxOriginal;}/**************************************************************************Object part***************************************************************************/function makeObj(obj,nest,menu){	nest = (!nest) ? "":'document.'+nest+'.';	this.elm = bw.ns4?eval(nest+"document.layers." +obj):bw.ie4?document.all[obj]:document.getElementById(obj);   	this.css = bw.ns4?this.elm:this.elm.style;	this.scrollWidth = bw.ns4?this.css.document.width:this.elm.offsetWidth;	this.x = bw.ns4?this.css.left:this.elm.offsetLeft;	this.y = bw.ns4?this.css.top:this.elm.offsetTop;	this.moveBy = b_moveBy;	this.moveIt = b_moveIt;	this.clipTo = b_clipTo;	return this;}var px = bw.ns4||window.opera?"":"px";function b_moveIt(x,y){	if (x!=null){this.x=x; this.css.left=this.x+px;}	if (y!=null){this.y=y; this.css.top=this.y+px;}}function b_moveBy(x,y){this.x=this.x+x; this.y=this.y+y; this.css.left=this.x+px; this.css.top=this.y+px;}function b_clipTo(t,r,b,l){	if(bw.ns4){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l;}	else this.css.clip="rect("+t+"px "+r+"px "+b+"px "+l+"px)";}/**************************************************************************Object part end***************************************************************************//**************************************************************************Init function. Set the placements of the objects here.***************************************************************************/var sScrollPxOriginal = sScrollPx;function sideInit(){	//Width of the menu, Currently set to the width of the document.	//If you want the menu to be 500px wide for instance, just 	//set the pageWidth=500 in stead.	pageWidth = (bw.ns4 || bw.ns6 || window.opera)?innerWidth:document.body.clientWidth;		//Making the objects...	oBg = new makeObj('divBg')	oMenu = new makeObj('divMenu','divBg',1)	oArrowRight = new makeObj('divArrowRight','divBg')		//Placing the menucontainer, the layer with links, and the right arrow.	oBg.moveIt(sLeft,sTop) //Main div, holds all the other divs.	oMenu.moveIt(sArrowwidth,null)	oArrowRight.css.width = sArrowwidth;	oArrowRight.moveIt(pageWidth-sArrowwidth,null)		//Setting the width and the visible area of the links.	if (!bw.ns4) oBg.css.overflow = "hidden";	if (bw.ns6) oMenu.css.position = "relative";	oBg.css.width = pageWidth+px;	oBg.clipTo(0,pageWidth,sMenuheight,0)	oBg.css.visibility = "visible";}//executing the init function on pageload if the browser is ok.if (bw.bw) onload = sideInit;</script></head><body marginleft="0" marginheight="0"><!-- START DELETE --><div style="position:absolute; left:0; top:0"><a href="#" onclick="self.close(); return false"><img src="/images/logo.gif" width="165" height="54" alt="" border="0" alt="Click to close window"></a></div><br><br><br><!-- END DELETE --><div id="divBg">	<div id="divMenu">		<nobr>		[<a href="#">link 1</a>] 		[<a href="#">link 2</a>] 		[<a href="#">link 3</a>] 		[<a href="#">link 4</a>] 		[<a href="#">link 5</a>]  		[<a href="#">link 6</a>]  		[<a href="#">link 7</a>]  		[<a href="#">link 8</a>]  		[<a href="#">link 9</a>]  		[<a href="#">link 10</a>] 		[<a href="#">link 11</a>] 		[<a href="#">link 12</a>] 		[<a href="#">link 13</a>] 		[<a href="#">link 14</a>]		[<a href="#">link 15</a>] 		[<a href="#">link 16</a>] 		[<a href="#">link 17</a>] 		[<a href="#">link 18</a>] 		[<a href="#">link 19</a>] 		[<a href="#">link 20</a>] 		[<a href="#">link 21</a>] 		[<a href="#">link 22</a>] 		[<a href="#">link 23</a>] 		[<a href="#">link 24</a>] 		[<a href="#">link 25</a>] 		[<a href="#">link 26</a>] 		[<a href="#">link 27</a>] 		[<a href="#">link 28</a>] 		[<a href="#">link 29</a>] 		[<a href="#">link 30</a>]		</nobr>		</div>	<div id="divArrowLeft"><a href="#" onmouseover="noScroll=false; mLeft()" onmouseout="noMove()" onclick="sScrollPx-=sScrollExtra; return false" onfocus="if(this.blur)this.blur()" onmousedown="sScrollPx+=sScrollExtra"><img src="arrowleft.gif" width="11" height="21" alt="" border="0"></a></div>	<div id="divArrowRight"><a href="#" onmouseover="noScroll=false; mRight()" onmouseout="noMove()" onclick="sScrollPx-=sScrollExtra; return false" onfocus="if(this.blur)this.blur()" onmousedown="sScrollPx+=sScrollExtra"><img src="arrowright.gif" width="11" height="21" alt="" border="0"></a></div></div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

RicardoRodrigues    0

RicardoRodrigues
Postado

consegui =D, mudei pageWidth = (bw.ns4 || bw.ns6 || window.opera)?innerWidth:document.body.clientWidth;para pageWidth = 460 e ficou ok,agora a ultima duvida, tem o elemento <nobr> para deixar os links na mesma linha, so que com essa tag o codigo nao vai ser validado, e se eu tirar ela fica em duas linhas, coloquei no divMenu um display:inline; e continuou em duas linhas, como coloco em uma linha so os links?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito