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 相关文章推荐
图片之间的切换
Jun 26 Javascript
jquery 检测元素是否存在的实例代码
Nov 19 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
jQuery实现消息弹出框效果
Dec 10 jQuery
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 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两种快速排序算法实例
2015/02/15 PHP
php简单分页类实现方法
2015/02/26 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
图解js图片轮播效果
2015/12/20 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
深入浅出学习python装饰器
2017/09/29 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
python tornado修改log输出方式
2019/11/18 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
幼儿园教师求职信
2015/03/20 职场文书
初中语文教师研修日志
2015/11/13 职场文书
php字符串倒叙
2021/04/01 PHP
pytorch中[..., 0]的用法说明
2021/05/20 Python
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis