当前位置： >
SuperSlide网页常用特效应用
特效说明：
SuperSlide 插件致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的&焦点图/幻灯片&&Tab标签切换&&图片滚动&&无缝滚动&等只需要一个SuperSlide即可解决！从此无需网上苦苦寻觅特效，无需加载n个插件，无需害怕代码冲突，你需要的只是一个SuperSlide！还可以多个SuperSlide组合创造更多效果哦~（兼容测试：IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器）
使用方法：
效果类型，可选&slide&||&menu&，引入type:&menu&专门处理菜单/导航效果
defaultPlay
默认是否执行效果（第一次运行是否执行效果）常用于导航/菜单
returnDefault
鼠标移出容器，是否返回默认状态，常用于导航/菜单
mouseOverStop
鼠标移到容器层（无缝滚动是mainCell）是否停止播放
playStateCell
&.playState&
播放/暂停状态按钮，点击后会增加/删除&pauseState&类名用于控制样色。
switchLoad
内容切换加载，暂时只支持图片，必须配合后台程序使用。当为图片的时候switchLoad为图片实际路径的属性名称，例如switchLoad:&_src&
[v2.1] 修复当scroll&1时，switchLoad无效的bug。
缓动效果；
[v2.1]更改默认效果为&swing&，使效果更流畅
每次切换效果开始时执行函数，用于处理特殊情况或创建更多效果。用法 satrtFun:function(i,c){ }； 其中i为当前分页，c为总页数
[v2.1]增加传递参数，startFun:function( i, c, slider, titCell, mainCell, targetCell, prevCell, nextCell ){}，这样简写就方便了。
例如 jQuery(&.slideBox&).slide({ startFun:function( i,c,s ){ s.show() } }); 这里的 s.show() 相当于 jQuery(&.slideBox&).show()
每次切换效果结束时执行函数，用法和startFun一致
triggerTime
毫秒，titCell触发时间，默认150毫秒延迟，以防重复执行效果。若为0即鼠标移过titCell立刻执行效果
targetCell
切换元素对象，处理内容切换元素非包裹状态下等情况，实现更多效果，处理更多情况，能和titCell、mainCell同时使用。只支持fade效果。
[v2.1] 增加支持slideDown效果。
pageStateCell
&.pageState&
分页状态对象，用于显示分页状态，例如：2/3
前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效，同时增加prevStop/nextStop类名控制样色
默认反方向运动，例如 effect:&leftMarquee& 然后设置 opp:true，则效果为右滚动。常用于leftMarquee/topMarquee
[v1.2] 程序自动分页，需结合titCell使用，若为true，则titCell为导航元素的包裹层对象。ps：scroll&1时，记得设置autoPage:true，否则分页错误。
[v2.1] 支持自定义分页html，$为数字替换位置。例如autoPage:&&li&&a&$&/a&&/li&&，如果不想输出数字：autoPage:&&li&&a&&/a&&/li&&。
导航元素对象（鼠标的触发元素对象）
切换元素的包裹层对象
1.0 & 2.0 &2.1
[v1.0] fade：渐显； || top：上滚动；|| left：左滚动；|| topLoop：上循环滚动；|| leftLoop：左循环滚动；|| topMarquee：上无缝循环滚动；|| leftMarquee：左无缝循环滚动；
[v2.0] fold：淡入淡出
[v2.1] slideDown：下拉效果
毫秒；自动运行间隔。当effect为无缝滚动(topMarquee/leftMarquee)时，相当于运行速度。
毫秒；切换效果持续时间（一次切换效果执行所用的时间长度）。
&mouseover&
titCell触发方式 || mouseover：鼠标移过触发；|| click：鼠标点击触发；
每次滚动个数。
visible缩写，mainCell的可视范围个数，当实际内容个数少于可视个数的时候，不执行SuperSlide效果。
前一个/页按钮对象。
后一个/页按钮对象。
defaultIndex
默认的当前位置索引。0是第一个； defaultIndex:1 时，相当于从第2个开始执行
titOnClassName
当前titCell位置自动增加的class名称
一款一款基于TweenMax.js焦点图网页特效，不规则图片透明渐变切换图片JS代码。酷炫网站焦点图代码素材。……
一款jQuery响应式自适应宽屏焦点图特效，该JS特效代码是一款mobilyslider.js插件实现覆盖滚动切换图片效果的焦点图，带左右按钮和索引小按钮，自动播放，点击左右按钮轮播，鼠标划过停……
一款jQuery渐变切换焦点图代码网页特效免费下载，该JS特下代码是一款鼠标移到蓝色按钮自动渐变切换的幻灯片图片特效。……
一款搜狗输入法jQuery旋转焦点图网页特效下载，基于jQuery编写，搜狗输入法官方网站3D立体旋转jquery焦点图JS代码。……
一款jQuery左右箭头按钮自动轮播焦点图网页特效，带左右按钮，自动轮播及点击按钮切换焦点图。……
5屏大气jQuery滑动门焦点图网页特效，手拉风琴动画切换焦点图特效，可设置自动切换。……
一款jQuery手机触屏左右滑动切换焦点图特效代码免费下载，该焦点图特效支持触屏滑动切换大图，做微信网站或手机方面的webapp网页必备素材代码，有需要的朋友参考下。……
一款CSS3随机动态图标选项卡菜单网页特效，鼠标悬停选项卡菜单文字向右漂移，同时左侧出现图标，单击鼠标左键，选项卡更改为当前栏目对应内容。……
一款CSS3动画缩放切换效果焦点图网页特效，基于css3制作的图片缩放切换特效，带左右按钮，自动轮播及点击左右按钮动画缩放切换JS焦点图代码。……
一款jQuery+html5触屏手机移动端焦点图特效，可点击左右按钮平滑切换图片；可触屏或鼠标拖动左右平滑切换焦点图相册特效。移动端、手机触屏JS焦点图代码免费下载。……
最新更新特效
本站关键词
科e互联版权所有
京ICP备号-1为什么调用SuperSlide后的页面内容先显示然后消失再正常？
我们知道，html的执行顺序是从上而下的，对js的执行也是一样的。所以做好的做法是需要使用特效的对象结束后立刻调用SuperSlide那就能获取最佳的用户体验，解决上述问题。
[code lang="html"]
&div class=&box&&
&div class=&hd&&&ul&&li&1&/li& &li&2&/li& &li&3&/li&&/ul&&/div&
&div class=&bd&&
&ul&&li&信息1&/li&...&/ul&
&ul&&li&信息2&/li&...&/ul&
&ul&&li&信息3&/li&...&/ul&
&script type=&text/javascript&&
jQuery(&.box&).slide();/*当box结束后立刻调用SuperSlide，会得到最好效果*/
有些用户会用下面方式调用：
[code lang="js"]
$(document).ready(function(){
jQuery(&.box&).slide();
[code lang="js"]
jQuery(function($) {
jQuery(&.box&).slide();
其实这两种执行过程是一样的，都是等待整个页面的dom加载完后再执行SuperSlide，相当于把调用SuperSlide的代码放到页面最下面。
这样的话，就会造成页面内容先显示，直到页面结束后再执行SuperSlide把相关内容隐藏，最后整个效果才正常。
此条目发表在
分类目录。将加入收藏夹。推荐这篇日记的豆列
······SuperSlide标签切换、焦点图多种组合插件
投稿：hebedich
字体：[ ] 类型：转载 时间：
SuperSlide 是致力于实现网站统一特效调用的函数，能解决大部分标签切换、焦点图切换等效果，还能多个slide组合创造更多的效果。（兼容ie内核(包括无敌的 ie6)、webkit内核、ff、opera等主流浏览器）。
此款插件包含在SuperSlide标签切换、焦点图多种组合插件,SuperSlide 是致力于实现网站统一特效调用的函数，能解决大部分标签切换、焦点图切换等效果，还能多个slide组合创造更多的效果。（兼容ie内核(包括无敌的 ie6)、webkit内核、ff、opera等主流浏览器）。适用于网站统一插件库其中包含了网站常用的大部分js效果。文件中包含使用详解。
jQuery(".slideTxtBox").slide( {effect:"left"} );
jQuery("#doubleSlideTxt").slide( { titCell:".parHd li",mainCell:".parBdIn",effect:"top",trigger:"click" } );
/* 双重slide-文本滚动效果 */
#doubleSlideTxt{ width:524 zoom:1; position: text-align:& }
#doubleSlideTxt .parHd{ position: z-index:1; top:10 left:453 width:44 overflow: }
#doubleSlideTxt .parHd li{ width:14 padding:5px 5px 5px 5& line-height:16 border:1px solid # border-left:0;&
&&& margin-bottom:5 background:# color:#b5c4d3;& cursor: margin-left:1& }
#doubleSlideTxt .parHd li.on{ background:# font-weight: color:#367399;& border-right:3px solid #4e98c6;&&
&&& margin-left:0 position: z-index:100; padding:5px 10px 5px 10}
#doubleSlideTxt .parBd{ position:& z-index:0; width:440 left:0 border:1px solid # padding:6 background:#}
#doubleSlideTxt .parBd .slideTxtBox{ background:# width:400 border:0; padding:20&&& }
#doubleSlideTxt .parBd .slideTxtBox .hd{ background:#& }
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""&
&html xmlns="&
&meta http-equiv="Content-Type" content="text/ charset=UTF-8"&
&meta http-equiv="Content-Language" content="zh-CN"&
&meta name="Keywords" content=""&
&meta name="Description" content=""&
&title&Super Slide&/title&
&script type="text/javascript" src="../jquery.pack.js"&&/script&
&script type="text/javascript" src="../jQuery.blockUI.js"&&/script&
&script type="text/javascript" src="../jquery.SuperSlide.js"&&/script&
&link href="../default.css" rel="stylesheet" type="text/css"&
&link href="../demo.css" rel="stylesheet" type="text/css"&
&!-- content S --&
&&div id="demoContent"&
&&&div class="effect"&
&&&&&&div id="doubleSlideTxt"&
&&&&&&&&div class="parHd"&
&&&&&&&&&ul&
&&&&&&&&&&li&栏目一&/li&
&&&&&&&&&&li&栏目二&/li&
&&&&&&&&&&li&栏目三&/li&
&&&&&&&&&/ul&
&&&&&&&&/div&
&&&&&&&&!-- parBd S --&
&&&&&&&&div class="parBd"&
&&&&&&&&&&div class="parBdIn"&
&&&&&&&&&&&&!-- slideTxtBox S --&
&&&&&&&&&&&&div class="slideTxtBox"&
&&&&&&&&&&&&&div class="hd"&
&&&&&&&&&&&&&&ul&&li&&a href=""&教育1&/a&&/li&&li&&a href=""&培训1&/a&&/li&&li&&a href=""&出国1&/a&&/li&&/ul&
&&&&&&&&&&&&&/div&
&&&&&&&&&&&&&div class="bd"&
&&&&&&&&&&&&&&ul class="infoList"&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&中国打破了世界软件巨头规则&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&口语：会说中文就能说英语！&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&农场摘菜不如在线学外语好玩&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&数理化老师竟也看学习资料？&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&学英语送ipad2,45天突破听说&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&学外语，上北外！&/a&&/li&
&&&&&&&&&&&&&&/ul&
&&&&&&&&&&&&&&ul class="infoList"&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&名师教作文：３妙招巧写高分&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&耶鲁小子：教你备考SAT&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&施强：高端专业语言教学&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&数理化老师竟也看学习资料？&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&【推荐】名校英语方法曝光！&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&2012高考“考点”大曝光!!&/a&&/li&
&&&&&&&&&&&&&&/ul&
&&&&&&&&&&&&&&ul class="infoList"&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&澳大利亚八大名校招生说明会&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&2012世界大学排名新鲜出炉&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&新加坡留学，国际双语课程&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&高考后留学日本名校随你选&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&教育培训行业优势资源推介&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&即刻预约今年最后一场教育展&/a&&/li&
&&&&&&&&&&&&&&/ul&
&&&&&&&&&&&&&/div&
&&&&&&&&&&&&/div&
&&&&&&&&&&&&!-- slideTxtBox E --&
&&&&&&&&&&&&!-- slideTxtBox S --&
&&&&&&&&&&&&div class="slideTxtBox"&
&&&&&&&&&&&&&div class="hd"&
&&&&&&&&&&&&&&ul&&li&&a href=""&教育2&/a&&/li&&li&&a href=""&培训2&/a&&/li&&li&&a href=""&出国2&/a&&/li&&/ul&
&&&&&&&&&&&&&/div&
&&&&&&&&&&&&&div class="bd"&
&&&&&&&&&&&&&&ul class="infoList"&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&中国打破了世界软件巨头规则&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&口语：会说中文就能说英语！&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&农场摘菜不如在线学外语好玩&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&数理化老师竟也看学习资料？&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&学英语送ipad2,45天突破听说&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&学外语，上北外！&/a&&/li&
&&&&&&&&&&&&&&/ul&
&&&&&&&&&&&&&&ul class="infoList"&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&名师教作文：３妙招巧写高分&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&耶鲁小子：教你备考SAT&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&施强：高端专业语言教学&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&数理化老师竟也看学习资料？&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&【推荐】名校英语方法曝光！&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&2012高考“考点”大曝光!!&/a&&/li&
&&&&&&&&&&&&&&/ul&
&&&&&&&&&&&&&&ul class="infoList"&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&澳大利亚八大名校招生说明会&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&2012世界大学排名新鲜出炉&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&新加坡留学，国际双语课程&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&高考后留学日本名校随你选&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&教育培训行业优势资源推介&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&即刻预约今年最后一场教育展&/a&&/li&
&&&&&&&&&&&&&&/ul&
&&&&&&&&&&&&&/div&
&&&&&&&&&&&&/div&
&&&&&&&&&&&&!-- slideTxtBox E --&
&&&&&&&&&&&&!-- slideTxtBox S --&
&&&&&&&&&&&&div class="slideTxtBox"&
&&&&&&&&&&&&&div class="hd"&
&&&&&&&&&&&&&&ul&&li&&a href=""&教育3&/a&&/li&&li&&a href=""&培训3&/a&&/li&&li&&a href=""&出国3&/a&&/li&&/ul&
&&&&&&&&&&&&&/div&
&&&&&&&&&&&&&div class="bd"&
&&&&&&&&&&&&&&ul class="infoList"&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&中国打破了世界软件巨头规则&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&口语：会说中文就能说英语！&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&农场摘菜不如在线学外语好玩&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&数理化老师竟也看学习资料？&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&学英语送ipad2,45天突破听说&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&学外语，上北外！&/a&&/li&
&&&&&&&&&&&&&&/ul&
&&&&&&&&&&&&&&ul class="infoList"&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&名师教作文：３妙招巧写高分&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&耶鲁小子：教你备考SAT&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&施强：高端专业语言教学&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&数理化老师竟也看学习资料？&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&【推荐】名校英语方法曝光！&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&2012高考“考点”大曝光!!&/a&&/li&
&&&&&&&&&&&&&&/ul&
&&&&&&&&&&&&&&ul class="infoList"&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&澳大利亚八大名校招生说明会&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&2012世界大学排名新鲜出炉&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&新加坡留学，国际双语课程&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&高考后留学日本名校随你选&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&教育培训行业优势资源推介&/a&&/li&
&&&&&&&&&&&&&&&li&&span class="date"&&/span&&a href=""&即刻预约今年最后一场教育展&/a&&/li&
&&&&&&&&&&&&&&/ul&
&&&&&&&&&&&&&/div&
&&&&&&&&&&&&/div&
&&&&&&&&&&&&!-- slideTxtBox E --&
&&&&&&&&&&/div&
&&&&&&&&/div&
&&&&&&&&!-- parBd E --&
&&&&&&/div&
&&&&&&script type="text/javascript"&
&&&&&jQuery(".slideTxtBox").slide({effect:"left"});
&&&&&jQuery("#doubleSlideTxt").slide({ titCell:".parHd li",mainCell:".parBdIn",effect:"top",trigger:"click" });
&&&&&&/script&
&!-- content E --&
以上就是本文的全部内容了，希望大家能够喜欢。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具