javascript dom 编程艺术动画效果

最新推荐文章于 2021-10-31 20:33:21 发布

原创最新推荐文章于 2021-10-31 20:33:21 发布 · 524 阅读

CC 4.0 BY-SA版权

本文介绍如何使用JavaScript和CSS实现网页上的动画效果及滑动功能，包括位置定位、移动消息显示和幻灯片预览等交互体验提升。

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>