您的位置：首页 > Web前端 > JavaScript

javascript dom 编程艺术 动画效果

2015-05-23 10:21 429 查看 
function addLoadEvent(func)
{
var oldonload=window.onload;
if(typeof window.onload!='function')
window.onload=func;
else
{
window.onload=function()
{
oldonload();
func();
}
}
}

function positionMessage()
{
if(!document.getElementById) return false;
if(!document.getElementById("message")) return false;
var elem=document.getElementById("message");
elem.style.position="absolute";
elem.style.left="50px";
elem.style.top="100px";
moveMessage("message",200,100,10);
}
/*function moveMessage()
{
if(!document.getElementById) return false;
if(!document.getElementById("message")) return false;
var elem=document.getElementById("message");
var xpos=parseInt(elem.style.left);
var ypos=parseInt(elem.style.right);
if(xpos!=10)
{
xpos+=-10;
elem.style.left=xpos+"px";

}
}*/
function moveMessage(elementId,final_x,final_y,interval)
{
if(!document.getElementById) return false;
if(!document.getElementById(elementId)) return false;

var elem=document.getElementById(elementId);
if(!elem.style.left||!elem.style.top) return false;

if(elem.movement)  //这句话基本没什么用吧
{
clearTimeout(elem.movement);
}

var xpos=parseInt(elem.style.left);
var ypos=parseInt(elem.style.top);
if(xpos==final_x&&ypos==final_y) return true;
if(xpos<final_x)
{
var dist=Math.ceil((final_x-xpos)/20); //虽然不加math.cel好像也没出什么问题。
xpos=xpos+dist;
}
else
{
var dist=Math.ceil((xpos-final_x)/20);  //向上取整的意思
xpos=xpos-dist;
}
if(ypos<final_y) ypos++;
else ypos--;
elem.style.left=xpos+"px";
elem.style.right=ypos+"px";
//moveMessage(elementId,final_x,final_y,interval),interval);
//这里这样写是不对的。
//var repeat="moveMessage('"+elementId+"',"final_x+","+final_y+","+interval+")";

var repeat="moveMessage('"+elementId+"',"+final_x+","+final_y+","+interval+")"
elem.movement=setTimeout(repeat,interval);
}

function prepareSlideshow()
{
if(!document.getElementById) return false;
if(!document.getElementsByTagName) return false;
if(!document.getElementById("linklist")) return false;
if(!document.getElementById("preview")) return false;
var preview=document.getElementById("preview");
preview.style.position="absolute";
preview.style.left="0px";
preview.style.top="0px";
var list=document.getElementById("linklist");
var links=list.getElementsByTagName("a");

links[0].onmouseover=function(){moveMessage("preview",-325,0,10);}
links[1].onmouseover=function(){moveMessage("preview",-651,0,10);}
links[2].onmouseover=function(){moveMessage("preview",-975,0,10);}
}

addLoadEvent(positionMessage);
addLoadEvent(prepareSlideshow);


#slideshow
{
width:325.5px;
height:548px;
position:relative;
overflow:hidden;
}


<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html";charset="utf-8"/>
<title>动画</title>
<script type="text/javascript" src="scripts/js.js"></script>
<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen"/>

</head>

<body>
<h1>Web Design</h1>
<p>These are the things you should know.</p>
<ol id="linklist">
<li>
<a href="structure.html">Structure</a>
</li>
<li>
<a href="presentation.html">Presentation</a>
</li>
<li>
<a href="behavior.html">Behavior</a>
</li>

</ol>
<div id="slideshow">
<img src="LOVE.jpg" alt="building blocks of web design" id="preview" />
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航