引入vue、jQuery——背景图片渐变

最新推荐文章于 2023-11-28 09:45:48 发布

想要暴富的小乔

最新推荐文章于 2023-11-28 09:45:48 发布

阅读量342

点赞数 1

分类专栏： JavaScript小案例文章标签： html vue js css

本文链接：https://blog.csdn.net/weixin_44020515/article/details/106085649

版权

JavaScript小案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入vue之_背景图片渐变</title>
    <!--引入jQuery-->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <!--引入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <!--引入css-->
    <style>
        /*设置背景图片*/
        .screenbg ul img {
            position:fixed;/*设置背景图片位置固定*/
            bottom:0;/*距离底部0px*/
            left:0;/*左边距离0px*/
            z-index:-1;/*设置元素的堆叠顺序，图片在文字的下面*/
            overflow:hidden;/*超出部分隐藏*/
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
    <div class="screenbg" id="screenbg">
        <ul>
            <li v-for="b in bgs" v-html="b" ></li>
        </ul>
    </div>


    <script type="text/javascript">

        //创建vue对象
        var vue=new Vue({
            el:"#screenbg",
            data:{
                bgs:["<img src='images/0.jpg'>","<img src='images/1.jpg'>","<img src='images/2.jpg'>"]
            }
        });

        //jQuery
        $(function(){
            $(".screenbg ul li").each(function(){
                $(this).css("opacity","0");//设置所有的li标签透明，就是隐藏
            });
            $(".screenbg ul li:first").css("opacity","1");//将第一个li标签设置为不透明，就是显示出来
            var index = 0;//设置下标为0
            var li = $(".screenbg ul li");//获取li标签
            var number = li.size();//获取li标签的长度
            function change(index){
                li.css("visibility","visible");//设置元素可见
                /*拓展：eq选择器和eq（）方法的用法与比较
                 * $('#????:eq(0)') 返回 符合#????选择器的元素集合第一个,它的类型是jQuery对象
                 $('#????').eq(0) 返回 $('#????') jquery元素集合的第一个元素,并将之转换为 javascript对象
                 * */
                //获取当前元素的同胞进行动画隐藏
                li.eq(index).siblings().animate({opacity:0},3000);
                //获取当前元素，利用jQuery里面的动画animate逐渐显示背景图片
                li.eq(index).animate({opacity:1},3000);//当前元素的就显示
            }
            function show(){
                index = index + 1;
                if(index<=number-1){
                    change(index);
                }else{
                    index = 0;
                    change(index);
                }
            }
            t = setInterval(show,8000);
        });

    </script>
</body>
</html>

想要暴富的小乔

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
引入vue、jQuery——背景图片渐变

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>引入vue之_背景图片渐变</title>  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script&gt.
复制链接

扫一扫