Jquery左右滑动插件之实现超级炫酷动画效果附源码下载

2024-09-28 07:41:38

分享一款基于jQuery超级酷动画滑动插件。这是一款基于jquery.pogo-slider插件实现的多个滑块切换特效。效果图如下，如果大家觉得还不错，很满意可以下载源码哦。

效果展示源码下载

实现的代码。

html代码：

<div class="pogoSlider" id="js-main-slider">
  <div class="pogoSlider-slide" data-transition="slideOverLeft" data-duration="1000" style="background-image:url(img/slide1.jpg);"></div>
  <div class="pogoSlider-slide " data-transition="fold" data-duration="1000" style="background-image:url(img/slide2.jpg);"></div>
  <div class="pogoSlider-slide " data-transition="shrinkReveal" data-duration="1000" style="background-image:url(img/slide3.jpg);"></div>
 </div><!-- .pogoSlider -->

jQuery实现切换页面过渡动画效果

直接为大家介绍制作过程,希望大家可以喜欢. HTML结构该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素,div.cd-cover-layer用于制作页面切换时的遮罩层,div.cd-loading-bar是进行ajax加载时的loading进度条. <main> <div class="cd-index cd-main-content"> <div> <h1>Page Transition</
jQuery控制DIV层实现由大到小，由远及近动画变化效果

本文实例讲述了jQuery控制DIV层实现由大到小,由远及近动画变化效果.分享给大家供大家参考.具体如下: 这里介绍jQuery控制DIV由大到小,由远及近动画变化效果,使用jquery生成动画效果的一个小例子,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-div-animate-cha-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
jQuery动画显示和隐藏效果实例演示(附demo源码下载)

本文实例讲述了jQuery动画显示和隐藏效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示. 完整实例代码点击此处本站下载. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="
jQuery实现有动画淡出效果的二级折叠菜单代码

本文实例讲述了jQuery实现有动画淡出效果的二级折叠菜单代码.分享给大家供大家参考,具体如下: 这里介绍jQuery实现有动画淡出效果的二级折叠菜单代码,相当不错,因考虑功能的实现,所以没有怎么美化,不过这样也好,可以给大家更多的空间来修饰美化,想怎么弄就怎么弄了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-dh-flash-fade-in-out-2-menu-demo/ 具体代码如下: <!DOCTYPE html PU
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)

本文实例讲述了jquery实现仿新浪微博带动画效果弹出层代码.分享给大家供大家参考.具体如下: 这是一款jquery实现带动画的弹出层,最开始是模拟新浪微博中的弹出层,后来引入了jQuery,又想了想,加入点动画效果不知怎么样,后来就写出了这么一个弹出的网页层效果,你点击按钮后就可以看到一个渐出的可关闭的弹出层,点击关闭后,当然也是渐渐的消失的,移动时根据鼠标位置计算控件左上角的绝对位置,松开鼠标后停止移动并恢复成不透明. 运行效果截图如下: 在线演示地址如下: http://demo.jb51
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)

本文实例讲述了jQuery实现的给图片点赞+1动画效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示. 完整实例代码点击此处本站下载. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&
jQuery简单实现QQ空间点赞已经取消点赞

看到有网友制作了对空间好友的动态点赞,加了个以及取消赞的功能.直接运行的脚本好友动态点赞代码 jQuery("a.qz_like_btn_v3[data-clicklog='like']").each(function(index,item){ console.log(item); jQuery(item).trigger('click'); }); jQuery(window).scroll(function(){ jQuery("a.qz_like_btn_v3[dat
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)

本文实例讲述了jQuery实现的点赞随机数字显示动画效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示. 完整实例代码点击此处本站下载. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=
jQuery实现连续动画效果实例分析

本文实例讲述了jQuery实现连续动画效果的方法.分享给大家供大家参考.具体如下: 这里介绍jQuery实现一连串的连续动画效果,将这些动画运用先设置好,然后在jQuery的作用下完成一个接一个的动画,这在网页游戏编写中是个基础但重要的动画生成技巧,对于前台设计来说也是有必要掌握的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-lx-animate-style-demo/ 具体代码如下: <!DOCTYPE html PUBLI
jQuery实现带有动画效果的回到顶部和底部代码

本文实例讲述了jQuery实现带有动画效果的回到顶部和底部代码.分享给大家供大家参考,具体如下: 这款动画版的回到顶部和底部效果代码,也算是比较常见的一款网页特效了,像淘宝网就有这种效果,使用了jQuery插件,加入了动画效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-animate-style-scroll-top-buttom-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C

Jquery左右滑动插件之实现超级炫酷动画效果附源码下载

相关推荐

随机推荐