欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery --- 第四期 (jQuery动效)

程序员文章站 2022-05-29 11:58:07
学习笔记 1.jQuery动画的淡入淡出 2.jQuery广告弹窗 ......

学习笔记

1.jquery动画的淡入淡出

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery动画的淡入淡出</title>
<style>
    body{background-color: #ebebeb}
    div{
        width :200px;
        height :200px;
        background-color :red;
        display :none;
    }
</style>
<!--引用jquery库-->
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        //动画淡入
        $("button").eq(0).click(function(){
            $("div").eq(0).fadein(2000,function(){
            });
        });
        //动画淡出
        $("button").eq(1).click(function(){
            $("div").eq(0).fadeout(2000,function(){
            });
        });
        //淡出入切换
        $("button").eq(2).click(function(){
            $("div").eq(0).fadetoggle(2000,function(){
            })
        });
        //允许渐变为指定的不透明度(0-1)
         $("button").eq(3).click(function(){
            $("div").eq(0).fadeto(2000,0.5,function(){
            })
        });
    });
</script>
</head>

<body>
    <button>fadein</button>
    <button>fadeout</button>
    <button>fadetoggle</button>
    <button>fadeto</button>
    <div></div>
</body>
</html>

2.jquery广告弹窗

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery弹窗广告</title>
<!--适应移动端-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--css样式-->
<style>
    body{background-color: #ebebeb}
    div{
        width :200px;
        height :200px;
        background-color :red;
        position :fixed;
        right :0;
        bottom :0;
        display:none;
    }
    .span{
        width:40px;
        height:20px;
        position:absolute;
        background-color:green;
        right:0;
        top:0;
    }
</style>
<!--引用jquery库-->
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        //监听关闭span
       $(".span").click(function(){
           $("div").fadeout(1000);
       });
       //按照动画队列依次执行
       $("div").stop().slidedown(1000).fadeout(500).fadein(1000);
    });
</script>
</head>

<body>
    <div>
        <span class="span">关闭</span>
    </div>
</body>
</html>