动画相关

最新推荐文章于 2023-04-12 09:47:13 发布

数佳

最新推荐文章于 2023-04-12 09:47:13 发布

阅读量178

点赞数

分类专栏： 1.4 前端项目经验文章标签：对联广告折叠菜单下拉菜单弹窗广告无限循环滚动

本文链接：https://blog.csdn.net/yaocong1993/article/details/82663364

版权

1.4 前端项目经验专栏收录该内容

9 篇文章 1 订阅

订阅专栏

1、对联广告 2、折叠菜单 3、下拉菜单

4、弹窗广告 5、图标特效 6、无限循环滚动

1、对联广告

show()、hide()页面向下滚动到一定位置显示，向上滚动到一定位置隐藏。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>对联广告</title>
    <style>
        *{margin:0;padding:0;}
        body{height:1500px;}
        .left{position:fixed;top:200px;left:0;}
        .right{position:fixed;top:200px;right:0;}
        img{display:none;}
    </style>
</head>
<body>
    <img src="left_ad.jpg" atl="" class="left">
    <img src="right_ad.jpg" atl="" class="right">
    <script src='jquery-1.12.4.js'></script>
    <script>
        $(function(){
            // 监听网页的滚动
            $(window).scroll(function(){
                // 获取网页滚动偏移位
                var offset=$("body,html").scrollTop();
                // 显示隐藏广告
                if(offset>=300){
                    $("img").show(1000);
                }else{
                    $("img").hide(1000);
                }
            });
        });
    </script>
</body>
</html>

2、折叠菜单

slideDown()、slideUp()展开、折叠菜单。

children()获取儿子节点，siblings()获取兄弟节点。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>折叠菜单</title>
    <style>
        *{margin:0;padding:0;}
        .nav{
            list-style:none;
            width:300px;margin:100px auto;
        }
        .nav>li{
            position:relative;
            border:1px solid;border-bottom:none;
            line-height:35px;text-indent:2em;
        }
        .nav>li:last-child{border-bottom:1px solid;
            border-bottom-left-radius:10px;border-bottom-right-radius:10px;}
        .nav>li:first-child{border-top-left-radius:10px;border-top-right-radius:10px;}
        .nav>li>span{
            display:inline-block;position:absolute;right:10px;top:5px;
            width:32px;height:32px;
            background:url("arrow_right.jpg") center center no-repeat;
        }
        .nav>.current>span{transform:rotate(90deg);}
        .sub{display:none;}        
        .sub>li{
            list-style:none;
            border-bottom:1px solid #fff;
            background:#9370d8;
        }
        .sub>li:hover{background:#f00;}
    </style>
</head>
<body>
    <ul class="nav">
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span></li>
        <li>一级菜单<span></span></li>
        <li>一级菜单<span></span></li>
        <li>一级菜单<span></span></li>
        <li>一级菜单<span></span></li>
        <li>一级菜单<span></span></li>
    </ul>
    <script src='jquery-1.12.4.js'></script>
    <script>
        $(function(){
            // 监听一级菜单的点击事件
            $(".nav>li").click(function(){
                // 让当前二级菜单展开
                $(this).children(".sub").slideDown();
                // 让非当前二级菜单收起
                $(this).siblings().children(".sub").slideUp();
                // 让被点击的一级菜单箭头旋转
                $(this).addClass("current");
                // 让非当前的一级菜单箭头恢复
                $(this).siblings().removeClass("current");
            });
        });
    </script>
</body>
</html>

3、下拉菜单

在jQuery中执行动画之前建议，先调用stop()方法，否则快速切换会出现延时。

slideDown()、slideUp()展开、折叠菜单。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>下拉菜单</title>
    <style>
        *{margin:0;padding:0;}
        .nav{
            list-style:none;
            width:300px;height:50px;margin:100px auto;
            background:#f00;
        }
        .nav>li{
            float:left;
            width:100px;height:50px;
            line-height:50px;text-align:center;
        }
        .sub{
            display:none;list-style:none;
            background:#00f;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>一级菜单
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单</li>
    </ul>
    <script src='jquery-1.12.4.js'></script>
    <script>
        $(function(){            
            $(".nav>li").hover(function(){// 监听一级菜单的移入移出事件                
                var $sub=$(this).children(".sub");// 获取当前二级菜单
                $sub.stop();// 停止当前动画，否则快速移入移出出现延时
                $sub.slideToggle();// 执行动画
            });
        });
    </script>
</body>
</html>

4、弹窗广告

动画队列，所添加的动画依次执行。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>弹窗广告</title>
    <style>
        *{margin:0;padding:0;}
        .ad{display:none;position:fixed;right:0;bottom:0;}
        .ad>span{
            display:inline-block;position:absolute;right:0;top:0;
            width:30px;height:30px;
        }
    </style>
</head>
<body>
    <div class="ad">
        <img src="ad_pic.jpg" at="">
        <span></span>
    </div>
    <script src='jquery-1.12.4.js'></script>
    <script>
        $(function(){            
            // 监听span的点击事件
            $("span").click(function(){
                $(".ad").remove();
            });
            // 执行广告动画，展开、淡出、淡入
            $(".ad").stop().slideDown(1000).fadeOut(1000).fadeIn(1000);
        });
    </script>
</body>
</html>

5、图标特效

鼠标移入后，图标向上滚动，从下方出来，再向上滚动复位。animate()通过更改属性值自定义动画。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>图标特效</title>
    <style>
        *{margin:0;padding:0;}
        ul{
            list-style:none;
            width:400px;height:150px;border:1px solid;margin:100px auto;
        }
        ul>li{
            float:left;
            width:100px;height:60px;margin-top:50px;overflow:hidden;
            text-align:center;
        }
        ul>li>span{
            display:inline-block;position:relative;
            width:24px;height:24px;
            background:url("bg.png") no-repeat 0 0;
        }
    </style>
</head>
<body>
    <ul>
        <li><span></span><p>百度</p></li>
        <li><span></span><p>淘宝</p></li>
        <li><span></span><p>新浪</p></li>
        <li><span></span><p>网易</p></li>
    </ul>
    <script src='jquery-1.12.4.js'></script>
    <script>
        $(function(){            
            // 遍历每个li修改span的背景
            $.each($("li"),function(index,value){
                $(this).children("span").css({
                    background:"url(\"bg.png\") no-repeat 0 "+(-24*index)+"px"
                });
            });
            // 监听li移入事件
            $("li").mouseenter(function(){
                // 修改属性top设置自定义动画
                $(this).children("span").animate({
                    top:-50 // 将图标往上移动
                },1000,function(){
                    $(this).css("top","50px"); // 将图标定位至下方，无动画
                    $(this).animate({top:0},1000); //将图标复位
                });
            });
        });
    </script>
</body>
</html>

6、无限循环滚动

几张图片无限循环滚动，鼠标移上去时停止滚动，给非当前选中的图片添加遮罩。

margin-left+setInterval()实现滚动，fadeTo()实现遮罩。

原理：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>无限循环滚动</title>
    <style>
        *{margin:0;padding:0;}
        div{width:600px;height:170px;border:1px solid;
            margin:100px auto;overflow:hidden;}
        ul{
            list-style:none;
            width:1800px;height:170px;
            background:#000;
        }
        ul>li{float:left;}
    </style>
</head>
<body>
    <div>
        <ul>
            <li><img src="a.jpg" alt=""></li>
            <li><img src="b.jpg" alt=""></li>
            <li><img src="c.jpg" alt=""></li>
            <li><img src="d.jpg" alt=""></li>
            <li><img src="a.jpg" alt=""></li>
            <li><img src="b.jpg" alt=""></li>
        </ul>
    </div>
    <script src='jquery-1.12.4.js'></script>
    <script>
        $(function(){
            var offset=0;
            // 通过改变margin-left让图片滚动
            var timer;
            function autoPlay(){
                timer=setInterval(function(){
                    offset-=10;
                    // 增加前两张图片使得跳转看不出
                    if(offset<=-1200){
                        offset=0;
                    }
                    $("ul").css("marginLeft",offset+"px");
                },100);
            }
            autoPlay();

            //监听li的移入移出事件
            $("li").hover(function(){
                // 停止滚动
                clearInterval(timer);
                // 给非当前选项添加蒙版，淡入到0.5则背景黑色也显示0.5
                $(this).siblings().fadeTo(100,0.5);
            },function(){
                // 去除所有蒙版
                $("li").fadeTo(100,1);
                // 继续滚动
                autoPlay();
            });
        });
    </script>
</body>
</html>

数佳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动画相关

1、对联广告 2、折叠菜单 3、下拉菜单4、弹窗广告 5、图标特效 6、无限循环滚动1、对联广告show()、hide()页面向下滚动到一定位置显示，向上滚动到一定位置隐藏。&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset='utf-8'...
复制链接

扫一扫