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


Posted in Javascript onNovember 25, 2015

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

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

具体代码如下:

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

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

<link rel="stylesheet" href="css/animate.min.css"/>
<script type="text/javascript" src="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="#">三水点靠木</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);
  });
 
 });

源码下载:jquery+css实现动感的图片切换效果源码

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

Javascript 相关文章推荐
jquery 入门教程 [翻译] 推荐
Aug 17 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
JS模板实现方法
Apr 03 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
Jan 06 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
js实现导航吸顶效果
Feb 24 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
详解Vue之父子组件传值
Apr 01 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 #Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 #Javascript
Prototype框架详解
Nov 25 #Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 #Javascript
Bootstrap每天必学之下拉菜单
Nov 25 #Javascript
使用Javascript写的2048小游戏
Nov 25 #Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 #Javascript
You might like
浅析php变量作用域的一些问题
2013/08/08 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
实例讲解python中的序列化知识点
2018/10/08 Python
python通过http下载文件的方法详解
2019/07/26 Python
python 实现多线程下载视频的代码
2019/11/15 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
使用python对excel表格处理的一些小功能
2021/01/25 Python
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
final, finally, finalize的区别
2012/03/01 面试题
公路绿化方案
2014/05/12 职场文书
授权收款委托书范本
2014/10/10 职场文书
人民检察院起诉书
2015/05/20 职场文书
初中团委工作总结
2015/08/13 职场文书