【jQuery案例】动效案例循环滚动图、下拉菜单、弹窗广告……

最新推荐文章于 2024-08-27 19:30:26 发布

原创最新推荐文章于 2024-08-27 19:30:26 发布 · 555 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery

jQuery 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了使用jQuery实现的多种前端特效，包括循环滚动图、弹窗广告、对联广告、下拉菜单及折叠菜单等，展示了如何通过jQuery增强网站的交互性和用户体验。

一. 循环滚动图

效果：图片循环滚动，当鼠标移入时其他图片变色

jQuery代码

$(function(){
        // 定义变量
        var offset = 0
        // 设置图片滚动
        var timer
        function anmiPlay(){
            timer = setInterval(function () {
                offset += -10;
                // 当图片移动到第四张是跳转到第一张
                if (offset <= -1200) {
                    offset = 0
                }
                // 移动ul的位置
                $('ul').css('marginLeft', offset);
            }, 50)
        }
        anmiPlay();

        // 监听li的移入移出事件
        $('li').hover(function(){
            // 停止滚动
            clearInterval(timer);
            // 给非当前选择添加蒙版
            $(this).siblings().fadeTo(100,0.5);
            // 去除当前选择的蒙版
            $(this).fadeTo(100, 1);
        },function(){
            // 继续滚动
            anmiPlay();
            // 去除所有蒙版
            $('li').fadeTo(100,1)
        })
    })

页面结构：设置六张图片，防止在跳转是出现卡顿感。

移动时动的是ul而不是图片

<div>
    <ul>
        <li><img src="imgs/1.jpg"></li>
        <li><img src="imgs/2.jpg"></li>
        <li><img src="imgs/3.jpg"></li>
        <li><img src="imgs/4.jpg"></li>
        <li><img src="imgs/1.jpg"></li>
        <li><img src="imgs/2.jpg"></li>
    </ul>
</div>

css代码

	*{
        margin: 0;
        padding: 0;
    }

    div{
        width: 600px;
        height: 161px;
        border: 1px solid black;
        margin: 200px auto;
        overflow: hidden;
    }

    ul{
        list-style: none;
        width: 1800px;
        height: 161px;
        background-color: black;
    }

    ul>li{
        float: left;
    }

    ul>li>img{
        width: 300px;
        height: 161px;
    }

二. 弹窗广告

效果：上浮然后消失再出现。

jQuery代码

$(function(){
        // span的点击事件
        $('span').click(function(){
            $('.nav').remove();
        })
        
        // 执行广告动画
        // $('.nav').slideDown(1000,function(){
        //     $('.nav').fadeOut(1000,function(){
        //         $('.nav').fadeIn(1000);
        //     })
        // })

        // 利用动画队列逐个执行简化写法
        $('.nav').stop().slideDown(1000).fadeOut(1000).fadeIn(1000);
    })

页面结构

<div class="nav">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2481523084,1281116508&fm=26&gp=0.jpg">
    <span></span>
</div>

css代码

	*{
        margin: 0;
        padding: 0;
    }

    .nav{
        position: fixed;
        right: 0;
        bottom: 0;
        display: none;
    }

    .nav span{
        display: inline-block;
        width: 30px;
        height: 30px;
        position: absolute;
        right: 4px;
        top: 4px;
    }

三. 对联广告

滚动条到一定的地方浮现，反之消失

jQuery代码

	$(function(){
        // 监听网页的滚动
        $(window).scroll(function(){
            // 获取网页滚动的偏移位
            var offset = $('html,body').scrollTop();
            // 判断网页是否滚动到了指定位置
            if(offset >= 1000){
                // 显示广告
                $('img').show(1000)
            }else{
                // 隐藏广告
                $('img').hide(1000)
            }
        })
    })

页面结构

<img class="left" src="https://hbimg.huabanimg.com/a088f4cc9459b558166269335c7d041a53032d2d1dd2f0-aRBw1t_fw658/format/webp" alt="">
<img class="right" src="https://hbimg.huabanimg.com/a088f4cc9459b558166269335c7d041a53032d2d1dd2f0-aRBw1t_fw658/format/webp" alt="">

css代码

	*{
        margin: 0;
        padding: 0;
    }

    img{
        width: 150px;
        height: 400px;
        display: none;
    }

    .left{
        float: left;
        position: fixed;
        left: 0;
        top: 200px;
    }
    
    .right{
        float: right;
        position: fixed;
        right: 0;
        top: 200px;
    }

四. 下拉菜单

jQuery代码

$(function(){
        // 一级菜单移入事件
        $('.nav>li').mouseenter(function(){
            // 找到二级菜单
            var $sub = $(this).children('.sub');
            // 停止之前的动画
            $sub.stop();
            // 展开二级菜单
            $sub.slideDown(1000);
        })

        // 一级菜单移出事件
        $('.nav>li').mouseleave(function () {
            // 找到二级菜单
            var $sub = $(this).children('.sub');
            // 停止之前的动画
            $sub.stop();
            // 收起二级菜单
            $sub.slideUp(1000);
        })
    })

为了防止动画队列中动画过多，建议执行一个动画前先调用stop()方法，然后在执行动画

不加stop()方法的效果

页面结构

<ul class="nav">
    <li>一级菜单
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>        
    </li>
    <li>一级菜单
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>    
    </li>
    <li>一级菜单
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
</ul>

css代码

	*{
        margin: 0;
        padding: 0;
    }

    .nav{
        list-style: none;
        width: 300px;
        height: 50px;
        background: red;
        margin: 200px auto;
    }

    .nav>li{
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        float: left;
    }

    .sub{
        list-style: none;
        background: rebeccapurple;
        display: none;
    }

五. 折叠菜单

效果：点击打开二级菜单

jQuery代码

	$(function(){
        $('.nav>li').click(function(){
            // 拿到二级菜单
            var $sub = $(this).children('.sub'); // children()方法: 返回被选元素的所有直接子元素
            // 展开二级菜单
            $sub.slideDown(1000);
            // 找到所有非当前二级菜单
            var other = $(this).siblings().children('.sub');
            // 收起非当前的二级菜单
            other.slideUp(1000);
            // 旋转当前选中箭头
            $(this).addClass('current')
            // 恢复非当前选中箭头
            $(this).siblings().removeClass('current')
        })
    })

页面结构

<ul class="nav">
    <li>一级菜单<span></span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单<span></span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单<span></span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单<span></span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单<span></span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单<span></span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
</ul>

css部分

	*{
        margin: 0;
        padding: 0;
    }

    .nav{
        list-style: none;
        width: 300px;
        margin: 100px auto;
    }

    .nav li{
        border: 1px solid #000000;
        line-height: 35px;
        border-bottom: none;
        text-indent: 2em;
        position: relative;
    }

    .nav li:last-child{
        border-bottom: 1px solid #000000;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .nav li:first-child{
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .nav li span{
        background-image: url('imgs/openRightMini.png');
        display: inline-block;
        width: 32px;
        height: 32px;
        position: absolute;
        right: 10px;
        top: 3px;
    }

    .sub{
        display: none;
    }

    .sub li{
        list-style: none;
        background: aquamarine;
        border: none;
        border-bottom: 1px solid white;
    }

    .sub li:hover{
        background: hotpink;
    }

    .current span{
        transform: rotate(90deg);
    }