JavaScript DOM编程艺术第十章

来源：互联网发布：我国的医疗数据网站编辑：程序博客网时间：2024/06/05 20:02

overflow属性：visible,hidden,scroll,auto

visible：不裁剪溢出的内容。浏览器将溢出的内容呈现在其容器元素的显示区域以外，全部内容都可见、
hidden：隐藏溢出的内容。内容只显示在其容器元素的显示区域里，这意味着只有一部分内容可见、
scroll：类似于hidden，浏览器将对溢出的内容进行隐藏，但显示一个滚动条以便让用户能够滚动看到内容的其他部分、
auto：类似于scroll，但浏览器只在确实发生溢出时才显示滚动条，如果内容没有溢出，就不显示滚动条、

图片自动切换代码如下：

**HTML**<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8" />        <title>Web Design</title>        <link href="css/layout.css" rel="stylesheet" media="screen" />        <script src="js/addLoadEvent.js"></script>        <script src="js/moveElement.js"></script>        <script src="js/prepareSlideshow.js"></script>    </head>    <body>    <div id="content">        <h1>Web Design</h1>        <p>There 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="topics.gif" alt="building blocks of web design" id="preview">        </div>      </div>      </body></html>

**CSS**body{    margin:0 auto;    background:#99a4af;}#content{    margin:100px auto;    padding:30px;    width:500px;    height:350px;    border:1px solid #afbd8a;}#linklist {    float:left;    margin-right:10px;}li {    margin:7px;}#slideshow {    margin-left:10px;    width:100px;    height:100px;    position:relative;    /*relative 是为了使图片使用绝对位置*/    overflow:hidden; }#preview {    position:absolute;}

**Javascript**function addLoadEvent(func){    var oldonload = window.onload;    if(typeof window.onload !="function"){        window.onload = func;    }else {        window.onload = function(){        oldonload();        func();        }    }}

function prepareSlideshow(){    //确保浏览器支持DOM方法    if(!document.getElementsByTagName) return false;    if(!document.getElementById) return false;    //确保元素存在    if(!document.getElementById("linklist")) return false;    if(!document.getElementById("preview")) return false;    //为图片应用样式    var preview = document.getElementById("preview");    //取得所有链接    var list = document.getElementById("linklist");    var links = list.getElementsByTagName("a");    //为mouseover事件添加动画    links[0].onmouseover = function(){        moveElement("preview",-100,0,10);    }    links[1].onmouseover = function(){        moveElement("preview",-200,0,10);    }    links[2].onmouseover = function(){        moveElement("preview",-300,0,10);    }}addLoadEvent(prepareSlideshow);

/*注释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.top);    //判断    if(xpos < 200){        xpos++;    }    if(xpos > 200){        xpos--;    }    if(ypos < 100){        ypos++;    }    if(ypos > 100){        ypos--;    }    if(xpos == 200&& ypos ==100){        return true;    }    elem.style.left = xpos+"px";    elem.style.top = ypos+"px";    movemen = setTimeout("moveMessage()",10);} 注释*///封装moveElement函数四个参数：元素，目标左值，目标上值，时间function moveElement(elementId,final_x,final_y,interval){    if(!document.getElementById) return false;    if(!document.getElementById(elementId))return false;    //eleme对应想移动的对象    var elem = document.getElementById(elementId);    if(elem.movement){        clearTimeout(elem.movement);    }    if(!elem.style.left){        elem.style.left = "0px";    }    if(!elem.style.top){        elem.style.top = "0px";    }    //把elem的位置赋值给xpos，ypos    var xpos = parseInt(elem.style.left);    var ypos = parseInt(elem.style.top);    var dist = 0;    //判断    if(xpos < final_x){        dist = Math.ceil((final_x - xpos)/10);        xpos = xpos + dist;    }    if(xpos > final_x){        dist = Math.ceil((xpos - final_x)/10);        xpos = xpos - dist;    }    if(ypos < final_y){        dist = Math.ceil((final_y - ypos)/10);        ypos = ypos + dist;    }    if(ypos > final_y){    dist = Math.ceil((ypos - final_y)/10);        ypos = ypos - dist;    }    if(xpos == final_x&& ypos ==final_y){        return true;    }    elem.style.left = xpos+"px";    elem.style.top = ypos+"px";    var repeat = "moveElement('"+elementId+"',"+final_x+","+final_y+","+interval+")";    elem.movement = setTimeout(repeat,interval);}//addLoadEvent(positionMessage);//addLoadEvent(moveMessage);

鼠标在链接处，图片会有动画效果

阅读全文

0 0