jquery与CSS3实现简单的图片动画image slide with single img

jquery与CSS3实现简单的图片动画

最近忙得迷失了自己,好久都没有更新了,对不起大家了。今天来分享一个小小的动画制作方法。使用CSS3实现动画,而jquery 实现图片的切换与调用类,从而实现动感的图片切换效果。

jquery实例教程jqueryCSS3实现简单的图片动画

首选引入CSS动画文件与jquery库

<link rel="stylesheet" href="css/animate.min.css"/>
<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script>

构建简单的html

<div class="container">
    <div class="center animated">
        <h1>Image Animation with A Single Img, CSS3 & some jQuery</h1>
        <img class="animated" src="images/island_1x.png" alt=""/>
          <p>
             <a target="_blank" href="http://www.jqcool.net">jQ酷</a>,
        </p>
    </div>
</div>

再加上一些CSS,这里随意,请根据自己的项目来调整

 .container {
            width: 100vw;
            height: 100vh;
            background-color: #fff;
            position: absolute;
        }

        .center {
            width: 600px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            text-align: center;

            background-image: url(images/banana.png);
            background-position: -10000px,-10000px;
            background-repeat: no-repeat;
        }

        .center h1 {
            margin: 0px;
            padding: 0px;
            text-align: center;
            margin-bottom: 50px;
            font-size: 18px;
            text-transform: uppercase;
        }

        .center p{
            padding-top:50px;
            text-align: center;
            color: #ccc;
            font-size: 12px;

        }

        .center p a{
            text-decoration: none;
            color: inherit;
        }

        .center p a:hover{
            color:#222;
        }

        .center img{
            cursor: pointer;
        }

基本的CSS定位整个页面,动画不受以上的CSS影响。

写入JS实现动画效要

  var imgs=[    //定义存放图片路径的数组
            "images/island_1x.png",
            "images/banana.png",
            "images/rescued-illos_1x.png",
            "images/rivalry_1x.png",
            "images/sir_crags_a_lot_1x.png",
            "images/sf-cryptids_1x.png",
            "images/db_space_1x.png",
            "images/xmas1_1x.png"
    ];
    var counter =0; //图片的记数器
    $(document).ready(function () {
        $(".center").on("click","img",function(){ //定义.center单击图片事件
            $(this).removeClass("zoomIn").addClass("fadeOutRight"); //删除单击图片的zoomIn类,添加fadeOutRight类
            counter++;  //记数器加1
            setTimeout(function(){  //500毫秒后执行此方法
                if(counter==imgs.length) counter=0;  //如果到了最后一张图片则返回第一张
                $(".center img").remove(); //删除图片
                $("<img/>").attr("src",imgs[counter]).addClass("animated zoomIn").insertBefore($(".center p"));
				//拼接成下一张图片并加上缩放动画样式类animated zoomIn,最后添加上.center p元素前
                if(imgs[counter+1]!=undefined) $(".center").css("backgroundImage","url("+imgs[counter+1]+")")
				//如果下一张图片没有定义,刚为.center元素的背影图片改为下一张图片(不明白加此行代码的用意,感觉没意义。。。)
            },500);
        });

    });

代码的基本思路:定义一个数组存放需要展示的图片,接着当单击图片时删除zoomIn类,添加fadeOutRight类,实现实图右移并消失,记数器加1(用于调用下一张图片),当图片删除500毫秒后判断图片是不是最后一张,如果是,就把记数器调为0,从第一张图片开始,删除图片代码,接着创建一张新的图片代码,并把src设为下一张图片,同时加上缩放动画样式类animated zoomIn,让图片实现动画显示,之后把新建的图片代码插上p元素之前。

下载地址:本站下载 | 百度云 | 官方下载

Comments are closed.