JavaScript DOM编程艺术第十章

最新推荐文章于 2021-05-10 21:07:28 发布

where_slr

最新推荐文章于 2021-05-10 21:07:28 发布

阅读量518

点赞数

分类专栏：学习笔记文章标签： javascript dom css html

本文链接：https://blog.csdn.net/where_slr/article/details/72492564

版权

学习笔记专栏收录该内容

44 篇文章 1 订阅

订阅专栏

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);

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

where_slr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM编程艺术第十章

overflow属性：visible,hidden,scroll,autovisible：不裁剪溢出的内容。浏览器将溢出的内容呈现在其容器元素的显示区域以外，全部内容都可见、hidden：隐藏溢出的内容。内容只显示在其容器元素的显示区域里，这意味着只有一部分内容可见、scroll：类似于hidden，浏览器将对溢出的内容进行隐藏，但显示一个滚动条以便让用户能够滚动看到内容的其他部分、auto
复制链接

扫一扫