JQuery 操作Class实现前段交互方案（推荐）

news2025/1/11 8:00:46

一、JQuery基础+控制图片宽度实现动画交互

1.html页面声明周期

//页面生命周期

//页面的数据html，加载完成，图片+ajax+视频在异步加载中

//document.ready---DOMContentLoaded ----小程序onload ---Vue created()

//页面加载完成

//window.onload ---小程序onload ----- Vue mounted()

2.Jquery操作class整理

//jQuery 操作class

//判断样式 hasClass('样式名称')

//添加样式 addClass('样式名称')

//移除样式 removeClass('样式名称')

//切换样式 toggleClass('样式名称')

3.控制图片宽度动画交互

css

        .block{
            width: 200px;
            transition: all ease 1s;
        }

        /**
        样式名字可以处理效果
        **/
        .block.active{
            width: 800px;
            height: auto;
        }

html+js

<img class="block" src="http://www.jnqianle.cn/upload/logo/content/202301/30/075fae49-4808-436c-ae7e-d1cf4dcc0a5d.jpg" alt="">
<script>
    
    $(function(){

        //点击事件
        $('img').click(function(){
            $(this).toggleClass('active');
        });

    });
</script>

效果：

二、Jquery鼠标滑过下拉效果动画

css

.block {
    width: 100px;
    height: 0px;
    transition: all ease 0.6s;
    background: green;
    opacity: 0;
}

/**
样式名字可以处理效果
**/
.block.active {
    height: 100px;
    opacity: 1;
}
.btn {
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color: blue;
    color: white;
    border-radius: 10px;
}

html+js

<div class="btn">
    切换
</div>
<div class="block"></div>
<script>
    $(function () {
        //点击事件
        $('.btn').mouseenter(function () {
            $('.block').addClass('active');
        }).mouseout(function () {
            $('.block').removeClass('active');
        });

    });
</script>

效果：

三、Jquery实现消息通知动画效果

css：

.block {
    padding: 10px 20px;
    height: 30px;
    transition: all ease 0.6s;
    background: green;
    position: fixed;
    left: 50%;
    top: -60px;
    transform: translateX(-50%);
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    color: white;
}
/**
样式名字可以处理效果
**/
.block.active {
    opacity: 1;
    top: 300px;
}

.btn {
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color: blue;
    color: white;
    border-radius: 10px;
}

html+Js：

<div class="block">
    温馨提示，这是一条通知
</div>
<script>
    $(function () {
        //点击事件
        $('.block').addClass('active');

        setTimeout(() => {
            $('.block').removeClass('active');
        }, 2000);
    });
</script>

效果：