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

最新推荐文章于 2024-07-11 16:03:41 发布

ZhangXD_BLOG

最新推荐文章于 2024-07-11 16:03:41 发布

阅读量762

点赞数

分类专栏： JavaScript HTML5+CSS3

本文链接：https://blog.csdn.net/u012054869/article/details/51668558

版权

HTML5+CSS3 同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

JavaScript

41 篇文章 0 订阅

订阅专栏

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>