Движущаяся картинка ввиде фона?
Как сделать так что бы картинка движущаяся по произвольной траектории была за текстом?
вот пытался что то сделать через 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> Помогите люди добрые :) |
:help:
|
<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);
}
Вам еще много чего нужно сделать для хорошей анимации. Советую почитать статью |
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>
|
<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> |
А все, разобрался. Огромное спасибо! :)
|
| Часовой пояс GMT +3, время: 01:29. |