用jQuery实现元素被点击选中的效果

用jQuery实现元素被点击选中的效果

知识分子没文化
2021-04-16 / 0 评论 / 318 阅读 / 正在检测是否收录...

目录:

一、说明

页面中存在四个div元素,实现以下效果:

  1. 当鼠标放置在div元素上面的时候,元素呈现平滑放大效果;
  2. 鼠标点击任意一个元素,元素变大,周围出现阴影,表现出被选中的效果

演示效果如下,鼠标点击即可选中或者用按钮进行多选:

二、代码实现

提前导入jQuery文件:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

1.HTML代码

<h2>用jQuery实现元素被点击选中的效果</h2>
<div class="box">
    <div>元素1</div>
    <div>元素2</div>
    <div>元素3</div>
    <div>元素4</div>
    <button id="all-selected">全选/取消全选</button>
</div>

2.CSS代码

<style>
    h2 {
        text-align: center;
    }
    .box{
        display:flex;
        border:1px solid #aaabad;
        width:700px;
        margin:auto;
    }
    /*给盒子设置样式*/
    .box>div {
        border: 3px solid dodgerblue;
        margin: 30px auto;
        padding: 15px;
        border-radius: 10px;
        /* 定义元素的变化参数,持续时间0.5s,元素所有属性都变化 */
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -moz-transition: all 0.5s;
    }
    /*为盒子添加伪类,实现鼠标放到元素上的效果*/
    .box>div:hover {
        /* 定义变化的效果,盒子的长和宽均变为原来的1.2倍 */
        transform: scale(1.2, 1.2);
    }
    /* 元素被选中时的效果 */
    .selected {
        box-shadow: 0 0 15px deepskyblue;
        /* 定义变化的效果,盒子的长和宽均变为原来的1.2倍 */
        transform: scale(1.2, 1.2);
    }
    #all-selected {
        width:100px;
        height:35px;
        border-radius:5px;
        display:inline-block;
        margin: 40px 25px 25px;
        transition:all 0.5s;
    }
    #all-selected:hover{
        background-color:#c9c9c9;
    }
</style>

3.JS代码

<script>
    // 设置一个变量symbol,来判断当前的状态是否为选中
    let symbol = true;
    $(document).ready(function () {
        // 为box盒子添加点击事件
        $(".box>div").click(function () {
            if (symbol === true) {
                // 当symbol的值为true时,为点击的元素添加"selected"属性
                $(this).addClass("selected");
                // 同时symbol的值取反
                symbol = false;
            } else {
                // 当symbol的值为false时,移除"selected"属性
                $(this).removeClass("selected");
                // symbol的值取反
                symbol = true;
            }
        });
        // 为“全选”按钮添加全选事件
        $("#all-selected").click(function () {
            if (symbol === true) {
                $(".box>div").addClass("selected");
                symbol = false;
            } else {
                $(".box>div").removeClass("selected");
                symbol = true;
            }
        });
    });
</script>
0

评论 (0)

取消