【javaScript案例】之实用的小技巧~

2021/10/31 22:11:22

编程Tag： javascript 实用 div event height document 案例 box 50

本文主要是介绍【javaScript案例】之实用的小技巧~，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

首先来看第一个效果图：

在这里插入图片描述
这个效果主要实现了背景的移动和鼠标控制飞机的移动~

背景的移动通过改变backgroundPostionY来实现；鼠标控制飞机的移动通过调用onmousemove函数，传入event事件参数，然后获取鼠标位置来实现改变飞机的位置。具体见下面的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        #container {
            width: 300px;
            height: 500px;
            margin: 60px auto;
            margin-bottom: 0;
            /* text-align: center; */
            background-image: url(../img/black.jpg);
            background-repeat: no-repeat;
            position: relative;
        }

        #container img {
            width: 100px;
            height: 100px;
            position: absolute;
            bottom: 10px;
            left: 125px;
        }
    </style>
</head>

<body>
    <div id="container">
        <img src="../img/plane.png" alt="" id="imgi">
    </div>
    <script>
        let box = document.getElementById("container");
        let img = document.getElementById("imgi");
        var tem = 0;
        setInterval(() => {
            tem = tem - 10;
            box.style.backgroundPositionY = tem + "px";
            if (tem <= -1300) {
                tem = 0;
            }
        }, 50);

        box.onmousemove = function (event) {
            let x = event.clientX - box.offsetLeft;
            let y = event.clientY - box.offsetTop;
            // console.log(event.clientY,box.offsetTop)
            // console.log(x,y)
            if (x - 50 < 0) {
                x = 50;
            }
            if (x + 50 > 300) {
                x = 250;
            }
            if (y - 50 < 0) {
                y = 50;
            }
            if (y + 50 > 500) {
                y = 450;
            }
            img.style.left = x - 50 + "px";
            img.style.top = y - 50 + "px";
        }
        
    </script>
</body>

</html>

第二个效果图：

在这里插入图片描述

这个效果是当滚动鼠标下拉页面之后，想要返回首屏时，点击界面上固定位置的按钮，可以返回首屏。

该效果的实现需要用到scrollTop，但要注意：我们修改的是document.documentElement.scrollTop，使整个页面返回首屏。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            height:2000px;
        }
        #box{
            width: 100px;
            height: 70px;
            position: fixed;
            right:70px;
            top:380px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>首页</div>
        <button id="box">返回</button>
        <script>
            let btn=document.getElementById("box");
            btn.onclick=function(){
                // document.body.scrollTop=0;    //根据浏览器来定是哪个
                document.documentElement.scrollTop=0;
            }
        </script>
    </div>
</body>
</html>

３. 最后一个效果如下：

在这里插入图片描述
此效果是滚动鼠标，使盒子的长度随鼠标的滚动发生变化。

需要用到的知识点有两个，一个是鼠标滚动事件的响应函数onwheel，在其中获取wheelDelta，当其值大于0时，盒子高度减小，反之盒子高度增加；

二是修改盒子的高度用到了clientHeight或者offsetHeight

最后记得要return　false，防止出现默认的既滚动盒子也滚动页面的情况（因为一般我们需要的是只滚动盒子）。

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #nav{
            height: 200px;
            width: 200px;
            background-color:rgba(221, 94, 94, 0.753);
            border-radius: 18px;
        }
        #container{
            display: flex;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="nav"></div>
    </div>

    <script>
        var div=document.getElementById("nav");
        div.onwheel=function(event){
            //alert(event.detail);//火狐
            //alert(event.wheelDelta);//获取滚轮滚动的方向，向上180，向下-180
            if(event.wheelDelta>0){
                div.style.height=div.clientHeight-10+"px";
            }else{
                //console.log(div.style.height+" "+div.clientHeight);
                div.style.height=div.clientHeight+10+"px";
            }
            return false;//防止默认的 滚轮应该滚div但是滚了整个页面
        }
    </script>
    
</body>
</html>

这篇关于【javaScript案例】之实用的小技巧~的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

【javaScript案例】之实用的小技巧~

相关编程文章