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

清疚 2022-08-23 09:58 189阅读 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">
            
            
            
            
            
        </ul>
    </div>
    <div class="navlist">
        <ul id="navlist">
            
            
            
            
        </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>