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 相关文章推荐
给Javascript数组插入一条记录的代码
Aug 30 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
JS实现时间校验的代码
May 25 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
基于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增删改查示例自己写的demo
2013/09/04 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
Node.js获取前端ajax提交的request信息
2017/02/20 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
讲解python参数和作用域的使用
2013/11/01 Python
Python栈类实例分析
2015/06/15 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
Python 定义只读属性的实现方式
2020/03/05 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
晚会邀请函范文
2014/01/24 职场文书
社团招新策划书
2014/02/04 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
python随机打印成绩排名表
2021/06/23 Python