div层随着页面大小变化相对位置不变、按钮隐藏一半鼠标放上去就出来，不放上去就退回去

1. 在页面编写5个div，使用脚本对div进行定位，要求4个div分别呈现在浏览器的4个顶角位置，1个div居中呈现在页面正中间，通过window.onresize事件，在窗体改变大小的时候始终能够调整这几个层的位置

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    div {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
    }
</style>
<body>
    <div class="d1" id="d1"></div>
    <div class="d2" id="d2"></div>
    <div class="d3" id="d3"></div>
    <div class="d4" id="d4"></div>
    <div class="d5" id="d5"></div>

</body>
</html>
<script type="text/javascript">
    var d1=document.getElementById("d1");
    var d2=document.getElementById("d2");
    var d3=document.getElementById("d3");
    var d4=document.getElementById("d4");
    var d5=document.getElementById("d5");

    window.onresize = function(){
        var width=document.documentElement.clientWidth;
        var height=document.documentElement.clientHeight;
        d1.style.top="0px";
        d1.style.left="0px";
        d2.style.top=height-100+"px";
        d2.style.left="0px";
        d3.style.top="0px";
        d3.style.left=width-100+"px";
        d4.style.right="0px";
        d4.style.bottom="0px";
        d5.style.top=height/2-50+"px";
        d5.style.left=width/2-50+"px";
        window.setTimeout("function()",10);
    }

</script>


2. 页面中有“购买”按钮，按钮初始情况下呈现在页面的最左边，缩进在左侧页面一半的宽度。当鼠标移入按钮时，按钮可以高亮呈现，同时按钮缓慢地从屏幕中向右移动，直至整个按钮完整出现。如果在移动过程中鼠标离开按钮，则按钮缓慢向左缩进，直接恢复成初始形态

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    .menu{
        width: 160px;
        height: 35px;
        background-image: url(image/Out.gif);
        position: absolute;
        left: -80px;
        cursor: pointer;
    }
</style>
<body>
　　<div id="menu" class="menu"></div>
</body>
</html>
<script type="text/javascript">
　　//获取按钮元素
    var menu = document.getElementById("menu");
    //获取按钮的样式对象（外部样式获取的方法）
    var menuStyle = window.getComputedStyle(menu);
    //定时器
    var timer1;
    var timer2;
    
    menu.onmouseenter = menuEnter;
    menu.onmouseleave = menuLeave;

     function menuEnter(){
　　　　　　//修改背景图（背景层只要修改一次就行，但是移动是多次的，所以为了性能好就分开写）
         menu.style.backgroundImage = "url(image/Over.gif)";
         moveRight();
     }
     function menuLeave(){
　　　　　　//修改背景图（同上理由：为了性能）
         menu.style.backgroundImage = "url(image/Out.gif)";
         moveLeft();
     }
    /**
     * 向右移动
     * [moveRight description]
     * @return {[type]} [description]
     */
    function moveRight(){
        //关闭向左移动的定时器（进入前进以后就将后退清空，不然每次速度都会改变）
        window.clearTimeout(timer2);
        //获取按钮的左边距
        var left =  parseInt(menuStyle.left);
        //改变按钮的左边距，使其向右移动
        menu.style.left = left+1+"px";
        timer1 = window.setTimeout("menuEnter()",10);
        //如果按钮完全展现，关闭向右移动的定时器
        left = parseInt(menuStyle.left);
        if(left == 0){
            //关闭移动定时器
            window.clearTimeout(timer1);
        }
    }
    /**
     * 向左移动
     * [moveLeft description]
     * @return {[type]} [description]
     */
    function moveLeft(){
        //关闭向右移动的定时器（进图后退就将前进清空，不然每次速度都会改变）
        window.clearTimeout(timer1);
        //获取按钮的样式对象
        //var menuStyle = window.getComputedStyle(menu);
        //获取按钮的左边距
        var left =  parseInt(menuStyle.left);
        //设置左边距，使其向左移动
        menu.style.left = left-1+"px";
        timer2 = window.setTimeout("menuLeave()",10);
        //如果按钮缩进至页面的一半，关闭向左移动的定时器
        left = parseInt(menuStyle.left);
        if(left == -80){
            //关闭移动定时器
            window.clearTimeout(timer2);
        }
    }
</script>

 

posted @ 2021-04-20 22:23  小小野生程序员sunny  阅读(306)  评论(0)    收藏  举报