js的一些实用小案例

2024-03-27 14:39:10

1、轮播图(思路见代码)

　　实现效果:点击下方的按钮，实现相应的图片的切换，点击左右按钮，实现向左或者向右切换图片，轮播图自动轮播，当鼠标移到图片上方，自动轮播停止，鼠标移除后，自动轮播恢复

　　实现思路: 对标签的class属性的属性值进行操作，先写好对应的属性值的样式及效果，然后利用js对属性值进行操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 360px;
            height: 277px;
            border: 10px solid #000;
            overflow: hidden;
            margin: 0 auto;
            position: relative;
        }
        .btns{
            position: absolute;
            bottom: 20px;
            width: 100%;
            height: 20px;
            background: #fff;
            z-index: 999;
        }
        .btns button{
            border-radius: 50%;
        }
        .content{
            height: 257px;
            text-align: center;
            line-height: 257px;
            font-size: 100px;
            position: relative;
        }
        .box{
            width: 100%;
            height: 100%;
            position: absolute;
            background: #000;
            color: #fff;
            opacity: 0;
            /* transform: rotate(0deg); */
            transition: opacity 1s,transform 1s;
        }
        .box img{
            width: 100%;
            height: 100%;
        }
        button.active{
            color: aliceblue;
            background: black;
        }
        .box.active{
            display: block;
            z-index: 1;
            opacity: 1;
            /* transform: rotate(360deg); */
        }
        #left_btn,#right_btn{
            position: absolute;
            top: 50%;
            margin-top: -10px;
            z-index: 999;
        }
        #right_btn{
            right: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="btns">
            <button data-index="0" class="btn active">1</button>
            <button data-index="1" class="btn">2</button>
            <button data-index="2" class="btn">3</button>
        </div>
        <div class="content">
            <div class="box active"><img src="https://img20.360buyimg.com/da/s1180x940_jfs/t1/22886/39/6392/67839/5c53100aEeaae8352/7a4d3de1156321ae.jpg.webp" alt=""></div>
            <div class="box"><img src="https://img11.360buyimg.com/pop/s1180x940_jfs/t1/94077/40/13431/91413/5e57629eE39ab060a/4adceb3e5e3863fe.jpg.webp" alt=""></div>
            <div class="box"><img src="https://img20.360buyimg.com/pop/s1180x940_jfs/t1/95963/25/13739/84993/5e606cc3Eaf064df7/edd18ca669882399.jpg.webp" alt=""></div>
        </div>
        <button id="left_btn">left</button>
        <button id="right_btn">right</button>
    </div>
    <script>
        var ele_btns = document.querySelectorAll(".btn");

        var ele_boxs = document.querySelectorAll(".box");
        var ele_left = document.getElementById("left_btn");
        var ele_right = document.getElementById("right_btn");
        var ele_container = document.querySelector(".container")
        var index = null;

        //轮播图下方按钮
        for(var i = 0; i < ele_btns.length; i++){
            ele_btns[i].addEventListener("click" , function(){
                //调用下方函数移除所有的active属性
                removeClass(ele_btns , "active");
                removeClass(ele_boxs , "active");
                for(var j = 0; j < ele_btns.length; j++){
                    //确定点击的按钮对应的图片
                    if(this === ele_btns[j]){
                        break;
                    }
                }
                //将对应的图片的下标赋值给全局变量,(对应下标即获取的ele_boxs中的下标)
                index = j;
                //给当前点击的按钮添加active属性
                this.className += " active";
                //给当前对应的按钮的图片添加active属性
                ele_boxs[index].className += " active";
            })
        }
        
        //左边按钮
        ele_left.addEventListener("click" , function(){
            //调用下方函数移除所有的active属性
            removeClass(ele_btns , "active");
            removeClass(ele_boxs , "active")
            //向左切换，即下标递减
            index--;
            //当下标小于0时从左后面的图片重新开始
            if(index < 0){
                index = ele_btns.length -1;
            }
            //对应的按钮及图片添加active
            ele_btns[index].className += " active";
            ele_boxs[index].className += " active"
        })

        ele_right.addEventListener("click" , function(){
            removeClass(ele_btns , "active");
            removeClass(ele_boxs , "active")
            index++;
            if(index > ele_btns.length - 1){
                index = 0;
            }
            ele_btns[index].className += " active";
            ele_boxs[index].className += " active"
        })

        //定时自动轮播图片
        var timer = null;
        timer = setInterval(function(){
            removeClass(ele_btns , "active");
            removeClass(ele_boxs , "active")
            index++;
            if(index > ele_btns.length - 1){
                index = 0;
            }
            ele_btns[index].className += " active";
            ele_boxs[index].className += " active"
        } , 1000)

        //当鼠标移到图片上方时，停止自动轮播
        ele_container.addEventListener("mouseover", function(){
            clearInterval(timer);
        })

        //当鼠标从图片上方移走时，开启自动轮播
        ele_container.addEventListener("mouseout", function(){
                timer = setInterval(function(){
                removeClass(ele_btns , "active");
                removeClass(ele_boxs , "active")
                index++;
                if(index > ele_btns.length - 1){
                    index = 0;
                }
                ele_btns[index].className += " active";
                ele_boxs[index].className += " active"
            } , 1000)
        })

        //清除所有的active属性
        function removeClass(ele , class_name){
            for(var i = 0; i <ele.length ; i++){
                //将所有的属性名切割成数组
                ele_class_arr = ele[i].className.split(" ");
                //如果数组中存在想要删除的属性(即上方的active属性)，就进入if中
                if(ele_class_arr.indexOf(class_name) !== -1){
                    //删除掉active属性
                    ele_class_arr.splice(ele_class_arr.indexOf(class_name) , 1);
                }
                //将删除掉active属性的数组重新转换成字符串
                ele_class_str = ele_class_arr.join(" ");
                //将转换完成之后的字符串赋予给对应的DOM的属性中
                ele[i].className = ele_class_str;
            }
        }
     
     
    </script>
</body>
</html>

View Code

2、鼠标拖拽回放

　　实现效果:鼠标左键在box上方按下，保持鼠标左键按下拖拽鼠标，box会跟随鼠标一起移动，鼠标左键抬起，box停止跟随，点击回放按钮，box会按照原路径进行返回

　　实现思路:拖拽 :将鼠标的位置赋值给按照一定的规律赋值给box的偏移量，回放：将鼠标的移动坐标添加到一个对象中，点击回放，倒序将坐标赋值给box偏移量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background: yellowgreen;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div id="box">
        <button id="replay">回放</button>
    </div>
    <script>
        var ele_box = document.getElementById("box");
        var ele_replay = document.getElementById("replay")
        //开启鼠标拖拽判断
        var flag = false;

        //鼠标按下时到box的距离
        var offset_X = null;
        var offset_Y = null;
        //拖拽边界
        var right_boundary = null;
        var bottom_boundary = null;

        var position_list = [];
        
        //鼠标按下
        ele_box.addEventListener("mousedown" , function( evt ){
            flag = true;
            var e = evt || event;
            //获取鼠标按下时距离box的边框的距离
            offset_X = e.offsetX;
            offset_Y = e.offsetY;
            //右边界与下边界
            right_boundary = document.body.offsetWidth - ele_box.offsetWidth;
            bottom_boundary = document.documentElement.clientHeight - ele_box.offsetHeight;  
            
            //记录鼠标按下时box的位置
            position_list.push({
                x : ele_box.offsetLeft,
                y : ele_box.offsetTop
            })
            console.log(position_list)
        })
        //鼠标移动时
        document.addEventListener("mousemove" , function( evt ){
            var e = evt || event;
            if(flag === false){
                return false
            }
            //让鼠标的光标处在鼠标点击的位置
            var left = e.clientX - offset_X;
            var top = e.clientY - offset_Y;

            //判断时候到了边界
            top = top <= 0 ? 0 : top;
            top = top >= bottom_boundary ? bottom_boundary : top;
            left = left <= 0 ? 0 :left;
            left = left >= right_boundary ? right_boundary : left;

            ele_box.style.left = left + "px";
            ele_box.style.top = top + "px";
            //在位置对象position_list中获取鼠标上一次移动的位置
            var last_item = position_list[position_list.length - 1];
            //只记录每次移动超过5px的位置
            if(Math.abs(left - last_item.x) > 5 || Math.abs(top - last_item.y)){
                position_list.push({
                    x : left,
                    y : top
                })
            }
        })
        //鼠标抬起时，改变状态，关闭鼠标拖拽
        ele_box.addEventListener("mouseup",function( evt ){
            flag = false
        })

        var timer = null;
        //回放功能,倒叙读取位置对象position_list中的每一个坐标
        ele_replay.addEventListener("click",function(){
            clearInterval(timer)
            timer = setInterval(function(){
                // 删除数组之中最后一项,每个被删除的项都要单独使用一下;
                var item = position_list.pop();
                ele_box.style.left = item.x + "px";
                ele_box.style.top  = item.y + "px";
                if(position_list.length === 0){
                        clearInterval(timer);
                    }
             },20)
        })
       
    </script>
</body>
</html>

View Code

3、鼠标跟随提示框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tip-box{
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 100px;
            background: #ddd;
            border: #b6b6b6;
            display: none;
        }
        li{
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <ol class="title-list">
            <li>
                <a href="" title="4399小游戏">4399小游戏</a>  
                <div class="tip-box">
                    4399小游戏4399小游戏4399小游戏4399小游戏4399小游戏4399小游戏4399小游戏4399小游戏
                </div>
            </li>
            <li>
                <a href="">7k7k7k小游戏</a>
                <!-- 提示框 -->
                <div class="tip-box">
                    7k7k7k小游戏7k7k7k小游戏7k7k7k小游戏7k7k7k小游戏7k7k7k小游戏7k7k7k小游戏7k7k7k小游戏
                </div>
            </li>
        </ol>
    </div>
    <script>
        var ele_a = document.querySelectorAll(".title-list a");
        
        for(var i = 0; i < ele_a.length; i++){
            //鼠标移入时触发事件，显示提示框
            ele_a[i].addEventListener("mouseover", function( evt ){
                var ele_tip = this.nextElementSibling;
                ele_tip.style.display = "block"
                var e = evt || event
                ele_tip.style.left = e.pageX + "px";
                //提示框和鼠标保持距离
                ele_tip.style.top = e.pageY + 20 + "px"
            })
            //鼠标移动时，提示框跟着移动
            ele_a[i].addEventListener("mousemove", function( evt ){
                var ele_tip = this.nextElementSibling;
                var e = evt || event
                ele_tip.style.left = e.pageX + "px";
                ele_tip.style.top = e.pageY + 20 + "px"
            })
            //鼠标移出时，提示框消失
            ele_a[i].addEventListener("mouseout", function( evt ){
                var ele_tip = this.nextElementSibling;
                ele_tip.style.display = "none"
            })
        }
    </script>
</body>
</html>

View Code

　　以上就是用js实现的一些小案例，后续会更新一些新的小案例，希望能对伙伴们有帮助

　　同时如果伙伴们有发现什么错误，请大家指点

码农公寓

相关文章