javascript-第九节-键值或按钮控制div移动、轮播

来源：互联网发布：中国远征军知乎编辑：程序博客网时间：2024/06/05 04:35

1、在屏幕添加四个按钮，上下左右，来控制一个div的移动

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>点击按钮操作上下移动</title></head><style type="text/css">    #content {        position: absolute;        left: 100px;        top: 100px;        width: 200px;        height: 100px;        background: palevioletred;    }</style><body><input type="button" value="左" id="left"><input type="button" value="右" id="right"><div id="content"></div><script>    var left = document.getElementById("left");    var right = document.getElementById("right");    var content = document.getElementById("content");    var index = 100;    left.onclick = function () {        index = index - 10;        content.style.left = index + "px";    }    right.onclick = function () {        index = index + 10;        content.style.left = index + "px";    }</script></body></html>

2、通过键盘的上下左右键，来控制div的移动

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        div {            position: absolute;            left: 100px;            top: 100px;            width: 100px;            height: 100px;            background-color: cadetblue;        }    </style></head><body><div id="a"></div><script>    var div = document.getElementById("a");    var nowleft = 100;    var nowtop = 100;    document.onkeydown = function () {//        alert(event.keyCode);//    event.keyCode 事件的键值属性        if(event.keyCode==65){            nowleft= nowleft - 50;            div.style.left = nowleft + "px";        }        switch (event.keyCode) {            case 37:                nowleft = nowleft - 10;                div.style.left = nowleft + "px";                break;            case 38:                nowtop = nowtop - 10;                div.style.top = nowtop + "px";                break;            case 39:                nowleft = nowleft + 100;                div.style.left = nowleft + "px";                break;            case 40:                nowtop = nowtop + 10;                div.style.top = nowtop + "px";                break;        }    }</script></body></html>

3、实现轮播图：
方法一：setTimeout()

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>轮播图-clearTimeout</title></head><body><img src="image/index0.jpg" id="pic"><script>    var pic=document.getElementById("pic");    //图片数字循环    var num=0;    var str=0;    function change(){        num=(num+1);        //image是图片文件夹，index        pic.src="image/"+"index"+num+".jpg";        str=setTimeout(change,1500);    }    setTimeout(change,1500);    pic.onmouseover=function(){        clearTimeout(str);    }    pic.onmouseout=function(){        setTimeout(change,1500);    }</script></body></html>

方法二：setInterval()

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>轮播图</title></head><body><img src="image/index0.jpg" id="pic"><script>    var pic = document.getElementById("pic");    var num = 0;    var loop=true;    function change() {        num = (num + 1) % 12;        if (loop==true) {            pic.src = "image/" + "index" + num + ".jpg";        }    }    setInterval(change,1500);    pic.onmouseover=function(){        loop=false;    }    pic.onmouseout=function(){        loop=true;        //setInterval(change,1000);    }</script></body></html>

4、导航下拉（重点）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>下拉导航</title>    <style type="text/css">        body{            padding:0;            margin: 0;        }        .nav ul {            padding: 0;            margin: 0;            list-style-type: none;        }        .nav ul li {            float: left;            width: 100px;            height: 40px;            line-height: 40px;            background-color: #6eb3d8;            text-align: center;            margin:0 5px;        }        .nav a {            text-decoration: none;            color: white;            cursor: pointer;        }        .navNow {            display: block;            background-color: #7b5255;            color: #999999;            font-weight: bold;        }        .navlist ul{            clear: both;            position: absolute;            left: 220px;            top:25px;            list-style-type: none;            padding: 0px 5px 0 5px;        }        .navlist ul li{            width: 100px;            height: 40px;            line-height: 40px;            background-color: #7b5255;            text-align: center;        }        .navlist a{            color: white;            text-decoration: none;        }    </style></head><body><div class="nav">    <ul id="nav">        <!--<li><a href="" id="navNow">首页</a></li>-->        <!--<li><a href="">关于我们</a></li>-->        <!--<li><a href="">新闻中心</a></li>-->        <!--<li><a href="">公司文化</a></li>-->        <!--<li><a href="">联系我们</a></li>-->    </ul></div><div class="navlist">    <ul id="navlist">        <!--<li><a href="">行业动态</a></li>-->        <!--<li><a href="">行业新闻</a></li>-->        <!--<li><a href="">公司文化</a></li>-->        <!--<li><a href="">领导简介</a></li>-->    </ul></div><script>    var ul = document.getElementById("nav");    var arr = ["首页", "关于我们", "新闻中心", "公司文化", "联系我们"];    var arrlist=[            [],            ["公司介绍","领导简介"],            ["行业动态","行业新闻","行业动态","企业周刊"],            ["公司活动","公司主旨"],            ["联系我们","人才招聘"],            ];    //存放所有的a标签，目的：给a添加鼠标滑过事件    var alla = ;    for (var n = 0; n < arr.length; n++) {        //添加li标签        var li = document.createElement("li");        //添加a标签        var a = document.createElement("a");        //给a添加标题        a.innerHTML = arr[n];        //把a添加到li中        li.appendChild(a);        //把li添加到ul中        ul.appendChild(li);        //把a标签加入到数组，以便给a添加鼠标滑过事件时用        alla.push(a);    }    //遍历所有的a标签-且添加onmouseover时间    for (var n = 0; n < alla.length; n++) {        //初始默认显示第一个的状态        if (n == 0) {            alla[0].className = "navNow";        }        //给a添加onmouseover函数，进行鼠标滑过有状态值        alla[n].onmouseover=function(){            //遍历a，进行查询            for(var i=0;i<alla.length;i++){                //鼠标没有滑过没有选中的状态值                alla[i].className="";            }            //鼠标滑过选中的状态值            this.className="navNow";            //开始操作二级菜单            var index=0;            for(var j=0;j<alla.length;j++){                //获取一级菜单的下标                if(alla[j].className=="navNow"){                    index=j;                    break;                }            }            //添加二级            var ullist=document.getElementById("navlist");            ullist.style.left=110*index+"px";            var str="";            for(var m=0;m<arrlist[index].length;m++){                str=str+"<li><a href='#'>"+arrlist[index][m]+"</a></li>"            }            ullist.innerHTML=str;            //当鼠标离开下拉菜单时，菜单不显示            ullist.onmouseout=function(){                ullist.style.display="none";            }            //鼠标放上时，菜单显示            ullist.onmouseover=function(){                ullist.style.display="block";            }            //鼠标放上            ul.onmouseover=function(){                ullist.style.display="block";            }            //鼠标离开            ul.onmouseout=function(){                ullist.style.display="none";            }        }    }</script></body></html>

0 0