JS: скрол(нагоре-надолу)+снимка

[MontefuckeR]

Дайте някой JS да върши действие като скролираш нагоре-надолу, снимка да ходи по скрола

 

[misho]

Ето ти с JS:

scroll.js

/***********************************************
* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var startX = 10 //set x offset of bar in pixels
var startY = 20 //set y offset of bar in pixels
var verticalpos="frombottom" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function staticbar(){
	barheight=document.getElementById("webdesignby").offsetHeight
	var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
	var d = document;
	function ml(id){
		var el=d.getElementById(id);
		if(d.layers)el.style=el;
		el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
		el.x = startX;
		if (verticalpos=="fromtop")
		el.y = startY;
		else{
		el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
		el.y -= startY;
		}
		return el;
	}
	window.stayTopLeft=function(){
		if (verticalpos=="fromtop"){
		var pY = ns ? pageYOffset : iecompattest().scrollTop;
		ftlObj.y += (pY + startY - ftlObj.y)/7;
		}
		else{
		var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
		ftlObj.y += (pY - startY - ftlObj.y)/7;
		}
		ftlObj.sP(ftlObj.x, ftlObj.y);
		setTimeout("stayTopLeft()", 10);
	}
	ftlObj = ml("webdesignby");
	stayTopLeft();
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar

scroll.css

#webdesignby a:link { text-decoration: none; color: #FF0000; }
#webdesignby a:visited { text-decoration: none; color: #FF0000; }
#webdesignby a:hover {   text-decoration: underline; color: #FF0000; }
#webdesignby a:active {  text-decoration: underline; color: #FF0000; }
#webdesignby {
	position: absolute;
	bottom: 10px;
	left: 0px;
	height: 0px;
	width: 70px;
	padding: 20px;
	font-size: 12px;
    font-weight: none;
	color: #FF0000;
	text-align: center;
	z-index: 1000;
}

Тук си задаваш къде да стои снимката. В този случай е долу вляво.

Това е в head на страницата ти:

  <script type="text/javascript" src="scroll.js"></script>
  <link href="scroll.css" type="text/css" rel="stylesheet" /></head>

А това го слагаш някъде в body:

<div id="webdesignby">Тук е снимката.</div>

Това webdesignby можеш да си го смениш и с друго, по твой избор, но за целта трябва да смениш същата дума с новата и на две места в файла scroll.js и scroll.css.

edit: Забравих файла scroll.css. Виж промените по-горе! :wink: Пиши, ако не работи, че може да съм изпуснал нещо.

 

[misho]

Има и друг вариант, който не с JS, а с CSS. Просто задаваш на снимката следното:

id="img"

В случая снимката ще бъде така:

<img src="URL адреса" id="img" alt="Някакъв текст" />

В CSS файла слагаш:

#img{
	position: fixed;
	top: 10px;
	left: 10px;
	height: 100px;
	width: 150px;
}

С top, bottim, left и right задаваш на какво разстояние да стои снимката съответно от горе, долу, ляво и дясно. Т.е. ако я слагаш горе вляво, като в този случай пишеш разстоянието само от гори и ляво.
С height и width можеш да зададеш размери на снимката, а ако не искаш просто ги махни.
А position: fixed; фиксира снимката на мястото и, така че да стои там дори и като скролираш. :wink: