Форум

woo_hoo · #1 (**permalink**) 17.03.2010, 14:16

Как сделать так что бы картинка движущаяся по произвольной траектории была за текстом?
вот пытался что то сделать через z-index, не пашет...

<script>
function curvemove (xid, yexpr, xexpr, ztime){

if (!xid) return null
if (!yexpr) yexpr = "x"
if (!xexpr) xexpr = "x"
if (!ztime) ztime = 100 //интоевал времени, мс

x=0            /*глобальная переменная, входящая в выражение yexpr и xepr filter:alpha(opacity=30); */

setInterval("move('" + xid +"', '" + yexpr + "', '" + xexpr + "')", ztime)
}

function move (xid, yexpr, xexpr) {
x++
document.all[xid].style.top = eval(yexpr)
document.all[xid].style.left = eval(xexpr)
}

curvemove ("myimg", "100 + 50*Math.sin(0.03*x)", "50+x", 10)
</script>

<html>
<div style="z-index:4;" >
<IMG id="myimg" src = '1.jpg' width = 30% style = "position: absolute; z-index:4; "> </div>
<div style="z-index:1; " >
<center>TEXTTEX
</div></center>
</html>

Помогите люди добрые

woo_hoo · #2 (**permalink**) 18.03.2010, 10:18

neurostep · #3 (**permalink**) 18.03.2010, 10:47

<html>
	<head>
	</head>
	<body>
	<div style="z-index:4;" >
	<IMG id="myimg" src = '1.jpg' width = 30% style = "position: absolute; z-index:4; "> </div>
	<div style="z-index:1; " >
	<center>TEXTTEX</center>
	</div>
	</body>
</html>

var x;
function curvemove (xid, yexpr, xexpr, ztime){
	 
	if (!xid) return null
	if (!yexpr) yexpr = "x"
	if (!xexpr) xexpr = "x"
	if (!ztime) ztime = 100 //интоевал времени, мс
	 
	x=0            /*глобальная переменная, входящая в выражение yexpr и xepr filter:alpha(opacity=30); */
	setInterval(function() {move(xid, yexpr, xexpr)}, ztime)
	}
	 
	function move (xid, yexpr, xexpr) {
	x++;
	document.getElementById(xid).style.top = eval(yexpr);
	document.getElementById(xid).style.left = eval(xexpr);
	}
window.onload = function() {
	curvemove("myimg", "100 + 50*Math.sin(0.03*x)", "50+x", 10);
}

Вам еще много чего нужно сделать для хорошей анимации.
Советую почитать статью

woo_hoo · #4 (**permalink**) 18.03.2010, 11:32

neurostep,

Сделал сделал все как в вашем примере, а картинка всеравно перед текстом маячит :-(

<html>
<head>  
<script type="text/JavaScript">
var x; 

function curvemove (xid, yexpr, xexpr, ztime){  
if (!xid) return null 
if (!yexpr) yexpr = "x" 
if (!xexpr) xexpr = "x" 
if (!ztime) ztime = 100 //интоевал времени, мс  
x=0           
setInterval(function() {move(xid, yexpr, xexpr)}, ztime)  
    }         
function move (xid, yexpr, xexpr) {  
x++;  
document.getElementById(xid).style.top = eval(yexpr);  
document.getElementById(xid).style.left = eval(xexpr);  
}  
window.onload = function() {  
curvemove("myimg", "100 + 50*Math.sin(0.03*x)", "50+x", 10);  
} 

</script>
</head>  
<body>  

<div style="z-index:4;" >
<IMG id="myimg" src = '1.jpg' width = 30% style = "position: absolute; z-index:4; "> </div>
<div style="z-index:1; " >
<center>
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT<br>
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT<br>
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT<br>
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT<br>
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT<br>
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT<br>
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT<br>
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT<br>
</center></div>
</body>
</html>

neurostep · #5 (**permalink**) 18.03.2010, 11:39

<html>
	<head>
	</head>
	<body>
	<div id="myimg" style="z-index:1; position:absolute; " >
	<IMG  src = '1.jpg' width = "30%" height="100"> </div>
	<div style="z-index:4; position:relative; background-color:red; height:150px;" >
	TEXTTEXT EXTTEXTEXTTEXTEXTTEXTEXTTEXTEXTTEXTEXTTEXTEXTTEXTEXTTEXTEXTTEXTEXTTEXTEXTTEXTEXTTEXTEXTTEXTEXTTEXTEXTTEXTEXTTEXTEXTTEXTEXTTEX TEXTTEXTEXTTEXTEXTTEXTEXTTEXTEXTTEXTEXTTEXTEXTTEXTEXTT
	</div>
	</body>
</html>

woo_hoo · #6 (**permalink**) 18.03.2010, 11:49

А все, разобрался. Огромное спасибо!

Форум

Справочник

Discord чат

Курсы javascript