特效大全有什么用?
我们做网站时,网站上会有很多的特效,如:鼠标滑动下拉菜单、焦点轮播图、滚动展示、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. 手风琴
查看示例页面13.0-手风琴
常用参数(切换看看) | |||
效果[effect]: | 效果速度[delayTime]: | ||
触发方式[trigger]: | 延迟触发[triggerTime]: | ||
默认执行[defaultPlay]: | 返回默认[returnDefault]: | ||
缓动效果[easing]: |
当前调用代码:jQuery(".sideMen").slide({titCell:"h3", targetCell:"ul",defaultIndex:1});