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 相关文章推荐
Ajax提交与传统表单提交的区别说明
Feb 07 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
React快速入门教程
Jan 17 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 Javascript
node.js实现上传文件功能
Jul 15 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 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(视频)Http下载
2006/12/12 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
2017/02/23 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
keras 如何保存最佳的训练模型
2020/05/25 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
运动会通讯稿400字
2014/01/28 职场文书
开学典礼决心书
2014/03/11 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
监督检查工作方案
2014/05/28 职场文书
入党推优材料
2014/06/02 职场文书
尊老爱亲美德少年事迹材料
2014/08/14 职场文书
学校运动会报道稿
2014/09/23 职场文书
学雷锋日活动总结
2015/02/06 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript
利用Python+OpenCV三步去除水印
2021/05/28 Python
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
Redis分布式锁Redlock的实现
2021/08/07 Redis