jQuery——11——显示隐藏动画以及练习对联广告

最新推荐文章于 2019-11-12 19:24:43 发布

野生小米椒

最新推荐文章于 2019-11-12 19:24:43 发布

阅读量124

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/x1037490413/article/details/102759864

版权

jQuery 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       *{
        margin: 0;
        padding: 0;
       }
    div{
        width: 200px;
        height: 200px;
        background-color: rgb(211, 112, 112);
        display: none;
    }
    </style>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
    $(function(){
    $('button').eq(0).click(function(){
        $('div').show(1000,function(){
            //1000是一秒 一秒执行完
            //作用：动画执行完毕后调用
            alert('显示动画执行完毕')
        })
    })
    $("button").eq(1).click(function(){
        $('div').hide(1000,function(){
            alert('显示动画隐藏完毕');
        })
    })
    $('button').eq(2).click(function(){
        $('div').toggle(1000);
    })
    })
    </script>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
</body>
</html>

二：对联广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       *{
        margin: 0;
        padding: 0;
       }
    .left{
        position: fixed;
        top: 200px;
        left: 0px;
    }
    .right{
        position: fixed;
        top: 200px;
        right: 0px;
    }
   img{
     display: none;
    }
    </style>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
    $(function(){
   //注意选择器用逗号相隔 兼容浏览器需要body和html都获取元素
   //监听网页的滚动
   $(window).scroll(function(){
       //获取网页滚动的偏移位
       var loc=$('html,body').scrollTop();
   //判断网页是否滚动到了指定的位置
   if(loc>=500){
       $('img').show(1000);
   }else{
    $('img').hide(1000);
   }
   })
   
    })
    </script>
</head>
<body>
    <img src="https://ww2.sinaimg.cn/bmiddle/005XXgyGly1g80ybc0o1dj30hs1fxdk6.jpg" alt="" class="left" style="width: 100px;height: 250px;">
    <img src="https://ww2.sinaimg.cn/bmiddle/005XXgyGly1g80ybc0o1dj30hs1fxdk6.jpg" alt="" class="right" style="width: 100px;height: 250px;">
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
  
</body>
</html>

野生小米椒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery——11——显示隐藏动画以及练习对联广告

一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
复制链接

扫一扫

专栏目录