当前位置:首页 > 编程教程 > jQuery技术文章 > jquery+css实现动感的图片切换效果

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

  • 发布时间:
  • 作者:码农之家
  • 点击:198

这篇文章主要知识点是关于jquery、图片切换、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

PHP与jQuery开发实例
  • 类型:PHP开发大小:9.8 MB格式:PDF作者:(印) 乔希 (Joshi,V.) 著,
立即下载

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

本文实例讲述了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实现动感的图片切换效果,分享的代码很详细,还提供了代码的基本思路,希望大家喜欢,并且可以学以致用。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jquery 相关电子书
学习笔记
网友NO.684286

jQuery图片切换动画特效

由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换。 思路: 想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很好,弄了一个简单的例子! 首先一般图片上会有两个图片按钮,一个左切换的按钮一个右切换的按钮,当我们单击左切换按钮时,原来的图片就会向右移动XX像素,然后它左边的图片就会显示到框里,而原来的图片被隐藏了,单击右切换按钮的原理跟左按钮相似。但如果一直点同一个按钮的话,本来这个图片切换框只有3张图片的话,到最后一张的时候我们要做一个判断,让它移动回第一张或者最后一张。思路分析完了,下面看下我们的代码: 1、html代码 div id="divBox" div id="imgBox" div class="img"img src="0.jpg"//div div class="img"img src="1.jp……

网友NO.239674

基于jQuery实现的图片切换焦点图整理

1.js实现的七屏百叶窗焦点图动态特效 可以实现可以同时显示很多找竖行百叶窗效果的缩略图,代码,鼠标悬浮在一张缩略图上时,该图片就在原位置变亮并慢慢展开,同时两边的缩略图就往两边缩小靠近,需要此种焦点图效果的朋友们可以前来下载使用。 在线演示 源码下载 2.jQuery+CSS3实现的多种图片切换方式简易焦点图 今天要来分享一款简易的jQuery+CSS3焦点图应用,这款焦点图应用的图片切换方式非常丰富,而且焦点图的切换按钮比较小,图片篇幅占据比较大,因此总体比较大气。 在线演示 源码下载 3.HTML5实现的3D图片阴影翻转动画 这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果。结合电影海报图片与翻转特效更显美观大方,是一款非常优秀的特效源码。 在线演示 源码下载 4.jquery实现的带左右……

网友NO.726282

jQuery鼠标经过方形图片切换成圆边效果代码分享

这是一款基于jQuery鼠标经过方形图片切换成圆边特效代码,点击图片会弹出浮层,用户还可以自定义对应图片的标题与文字说明,适合图片页面的展示,是一款非常实用的图片特效源码。 运行效果图:--------------------------------效果演示 源码下载---------------------------------- 鼠标经过方形图片切换成圆边效果 点击图片会弹出浮层 为大家分享的jQuery鼠标经过方形图片切换成圆边效果代码如下 headtitlejQuery鼠标经过方形图片切换成圆边特效/titlelink href="css/lrtk.css" rel="stylesheet" type="text/css" /script type="text/javascript" src="js/jquery-1.7.1.js"/scriptstyle type="text/css"!--.STYLE1 { font-size: x-large; font-weight: bold;}--/style/headbody!-- 代码 开始 --div id="teamcont" div div class="parinforma cssshadow" div class="closebtn"/div div class="showLeft" div class="partener" img class="row1" src="img/partner/balidao.jpg" div class="pname"展示……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

版权投诉 / 书籍推广 / 赞助:QQ:520161757