特效大全有什么用?

我们做网站时,网站上会有很多的特效,如:鼠标滑动下拉菜单焦点轮播图滚动展示Tab标签切换等等,我们要做出这些效果需要写大量的HTML+JS代码,比较复杂,甚至还会出现多个效果不兼容的情况。

为了简化特效制作方法,提高制作效率,特意汇总了这个jquery特效大全,将多种特效集于一个JS插件(已提供下载,不管你做什么效果,只需要在代码里放上这个JS文件,就可以做出下面实例中的特效效果!

1. 标签切换 / 书签切换 / 默认效果

查看示例页面

1.0-标签切换

常用参数(切换看看)
效果[effect]: 自动运行[autoPlay]:
触发方式[trigger]: 缓动效果[easing]:
效果速度[delayTime]: 前后按钮循环[pnLoop]:

当前调用代码:jQuery(".slideTxtBox").slide({});

注意:缓动效果对于fade影响不大;不同缓动效果设置适当“效果速度”,会有最佳效果。

2. 焦点图 / 幻灯片

查看示例页面

2.0-焦点图/幻灯片

常用参数(切换看看)
效果[effect]: 自动运行[autoPlay]:
触发方式[trigger]: 缓动效果[easing]:
效果速度[delayTime]: 停止播放[mouseOverStop]:
前后按钮循环[pnLoop]:

当前调用代码:jQuery(".slideBox").slide({mainCell:".bd ul"});

注意:缓动效果对于fade影响不大;不同缓动效果设置适当“效果速度”,会有最佳效果。

3. 图片滚动-左

查看示例页面

3.0-图片滚动-左

常用参数(切换看看)
效果[effect]: 自动运行[autoPlay]:
滚动个数[scroll]: 可视个数[vis]:
缓动效果[easing]: 效果速度[delayTime]:
前后按钮循环[pnLoop]: 触发方式[trigger]:
停止播放[mouseOverStop]:

当前调用代码:jQuery(".picScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true});

注意1:不同缓动效果设置适当“效果速度”,会有最佳效果。
注意2:现在是全按钮开启情况,不需要按钮的时候,只要删除按钮html或者隐藏即可。

4. 图片滚动-上

查看示例页面

4.0-图片滚动-上

常用参数(切换看看)
效果[effect]: 自动运行[autoPlay]:
滚动个数[scroll]: 可视个数[vis]:
缓动效果[easing]: 效果速度[delayTime]:
前后按钮循环[pnLoop]: 触发方式[trigger]:
停止播放[mouseOverStop]:

当前调用代码:jQuery(".picScroll-top").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true});

注意1:不同缓动效果设置适当“效果速度”,会有最佳效果。
注意2:现在是全按钮开启情况,不需要按钮的时候,只要删除按钮html或者隐藏即可。

5. 图片无缝滚动-左

查看示例页面

5.0-图片无缝滚动-左

常用参数(切换看看)
效果[effect]: 可视个数[vis]:
运行速度[interTime]: 默认反方向运动[opp]:
前后按钮循环[pnLoop]: 触发方式[trigger]:
停止播放[mouseOverStop]:

当前调用代码:jQuery(".picMarquee-left").slide({mainCell:".bd ul",autoPlay:true});

6. 图片无缝滚动-上

查看示例页面

6.0-图片无缝滚动-上

常用参数(切换看看)
效果[effect]: 可视个数[vis]:
运行速度[interTime]: 默认反方向运动[opp]:
前后按钮循环[pnLoop]: 触发方式[trigger]:
停止播放[mouseOverStop]:

当前调用代码:jQuery(".picMarquee-top").slide({mainCell:".bd ul",autoPlay:true});

7. 文字滚动-左

查看示例页面

7.0-文字滚动-左

常用参数(切换看看)
效果[effect]: 自动运行[autoPlay]:
滚动个数[scroll]: 可视个数[vis]:
缓动效果[easing]: 效果速度[delayTime]:
前后按钮循环[pnLoop]: 触发方式[trigger]:
停止播放[mouseOverStop]:

当前调用代码:jQuery(".txtScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true});

注意1:不同缓动效果设置适当“效果速度”,会有最佳效果。
注意2:现在是全按钮开启情况,不需要按钮的时候,只要删除按钮html或者隐藏即可。

8. 文字滚动-上

查看示例页面

8.0-文字滚动-上

常用参数(切换看看)
效果[effect]: 自动运行[autoPlay]:
滚动个数[scroll]: 可视个数[vis]:
缓动效果[easing]: 效果速度[delayTime]:
前后按钮循环[pnLoop]: 触发方式[trigger]:
停止播放[mouseOverStop]:

当前调用代码:jQuery(".txtScroll-top").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true});

注意1:不同缓动效果设置适当“效果速度”,会有最佳效果。
注意2:现在是全按钮开启情况,不需要按钮的时候,只要删除按钮html或者隐藏即可。

9. 文字无缝滚动-左

查看示例页面

9.0-文字无缝滚动-左

常用参数(切换看看)
效果[effect]: 可视个数[vis]:
运行速度[interTime]: 默认反方向运动[opp]:
前后按钮循环[pnLoop]: 触发方式[trigger]:
停止播放[mouseOverStop]:

当前调用代码:jQuery(".txtMarquee-left").slide({mainCell:".bd ul",autoPlay:true});

10. 文字无缝滚动-上

查看示例页面

10.0-文字无缝滚动-上

常用参数(切换看看)
效果[effect]: 可视个数[vis]:
运行速度[interTime]: 默认反方向运动[opp]:
前后按钮循环[pnLoop]: 触发方式[trigger]:
停止播放[mouseOverStop]:

当前调用代码:jQuery(".txtMarquee-top").slide({mainCell:".bd ul",autoPlay:true});

12.0-导航

常用参数(切换看看)
效果[effect]: 效果速度[delayTime]:
延迟触发[triggerTime]: 默认执行[defaultPlay]:
返回默认[returnDefault]: 缓动效果[easing]:

当前调用代码:jQuery("#nav").slide({ type:"menu", titCell:".nLi", targetCell:".sub"});

12. 手风琴

查看示例页面

13.0-手风琴

常用参数(切换看看)
效果[effect]: 效果速度[delayTime]:
触发方式[trigger]: 延迟触发[triggerTime]:
默认执行[defaultPlay]: 返回默认[returnDefault]:
缓动效果[easing]:

当前调用代码:jQuery(".sideMen").slide({titCell:"h3", targetCell:"ul",defaultIndex:1});

  • 多行滚动基础示例

  • 多列滚动基础示例

  • targetCell基础示例

  • SuperSlide组合应用基础示例

  • 同一页面使用多个效果示例

  • 双重Tab(slide组合)

  • Tab+无缝滚动(slide组合)

  • 图片导航焦点图

X

^回到顶部 1书签切换 2幻灯片 3图片滚动-左 4图片滚动-上 5图片无缝滚动-左 6图片无缝滚动-上 7文字滚动-左 8文字滚动-上 9文字无缝滚动-左 10文字无缝滚动-上 11常用导航 [v2.1] 12手风琴 [v2.1] T1其它基础效果