jquery+css实现动感的图片切换效果

前端之家收集整理的这篇文章主要介绍了jquery+css实现动感的图片切换效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了jquery+css实现动感的图片切换效果代码分享给大家供大家参考。具体如下: 运行效果截图如下:

具体代码如下:

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

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

构建简单的html

Image Animation with A Single Img,CSS3 & some jQuery ,

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

.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实现动画效要

").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); });

});

源码下载:

以上就是jquery结合css实现动感的图片切换效果分享代码很详细,还提供了代码的基本思路,希望大家喜欢,并且可以学以致用。

原文链接:https://www.f2er.com/jquery/51497.html

猜你在找的jQuery相关文章