jQuery实现点击小图片淡入淡出显示大图片特效


Posted in Javascript onSeptember 09, 2015

分享一款基于jQuery点击淡入淡出显示图片特效。这是一款基于jQuery+CSS3实现酷炫效果的图片切换特效代码。效果图如下:

jQuery实现点击小图片淡入淡出显示大图片特效

在线预览    源码下载

html代码:

<center><p style="color:#334960">点击图标进行展示</p></center>
 <div class="main">
  <div id="coolShow"></div>
  <div id="handBar"></div>
 </div>
 <script type="text/javascript">
  /*定义需要展示的图片以及图片的展示时间*/
  $(document).ready(function () {
   $('#coolShow').coolShow({
    imgSrc: ['images/1.png', 'images/2.png', 'images/3.png'],
    speed: 40
   });
  });
 </script>
Javascript 相关文章推荐
jquery 添加节点的几种方法介绍
Sep 04 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 Javascript
layui表格内容溢出的解决方法
Sep 06 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 #Javascript
使用impress.js制作幻灯片
Sep 09 #Javascript
谈谈impress.js初步理解
Sep 09 #Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 #Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 #Javascript
JavaScript中实现Map的示例代码
Sep 09 #Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 #Javascript
You might like
用PHP查询域名状态whois的类
2006/11/25 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
CI框架表单验证实例详解
2016/11/21 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
python在命令行下使用google翻译(带语音)
2014/01/16 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
python的scipy实现插值的示例代码
2019/11/12 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
美德少年事迹材料1000字
2014/08/21 职场文书
2014年接待工作总结
2014/11/26 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
python代码实现备忘录案例讲解
2021/07/26 Python