SuperSlide标签切换、焦点图多种组合插件
此款插件包含在SuperSlide标签切换、焦点图多种组合插件,SuperSlide是致力于实现网站统一特效调用的函数,能解决大部分标签切换、焦点图切换等效果,还能多个slide组合创造更多的效果。(兼容ie内核(包括无敌的ie6)、webkit内核、ff、opera等主流浏览器)。适用于网站统一插件库其中包含了网站常用的大部分js效果。文件中包含使用详解。
js调用:
jQuery(".slideTxtBox").slide({effect:"left"}); jQuery("#doubleSlideTxt").slide({titCell:".parHdli",mainCell:".parBdIn",effect:"top",trigger:"click"});
css代码:
/*双重slide-文本滚动效果*/ #doubleSlideTxt{width:524px;zoom:1;position:relative;text-align:left; } #doubleSlideTxt.parHd{position:absolute;z-index:1;top:10px;left:453px;width:44px;overflow:hidden;} #doubleSlideTxt.parHdli{width:14px;padding:5px5px5px5px; line-height:16px;border:1pxsolid#baccdf;border-left:0; margin-bottom:5px;background:#fff;color:#b5c4d3; cursor:pointer;margin-left:1px; } #doubleSlideTxt.parHdli.on{background:#dbeefd;font-weight:bold;color:#367399; border-right:3pxsolid#4e98c6; margin-left:0px;position:relative;z-index:100;padding:5px10px5px10px;} #doubleSlideTxt.parBd{position:relative; z-index:0;width:440px;left:0px;border:1pxsolid#baccdf;padding:6px;background:#dbeefd;} #doubleSlideTxt.parBd.slideTxtBox{background:#fff;width:400px;border:0;padding:20px; } #doubleSlideTxt.parBd.slideTxtBox.hd{background:#fff; }
HTML:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"><head> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"> <metahttp-equiv="Content-Language"content="zh-CN"> <metaname="Keywords"content=""> <metaname="Description"content=""> <title>SuperSlide</title> <scripttype="text/javascript"src="../jquery.pack.js"></script> <scripttype="text/javascript"src="../jQuery.blockUI.js"></script> <scripttype="text/javascript"src="../jquery.SuperSlide.js"></script> <linkhref="../default.css"rel="stylesheet"type="text/css"> <linkhref="../demo.css"rel="stylesheet"type="text/css"> </head> <body> <body> <!--contentS--> <divid="demoContent"> <divclass="effect"> <divid="doubleSlideTxt"> <divclass="parHd"> <ul> <li>栏目一</li> <li>栏目二</li> <li>栏目三</li> </ul> </div> <!--parBdS--> <divclass="parBd"> <divclass="parBdIn"> <!--slideTxtBoxS--> <divclass="slideTxtBox"> <divclass="hd"> <ul><li><ahref="">教育1</a></li><li><ahref="">培训1</a></li><li><ahref="">出国1</a></li></ul> </div> <divclass="bd"> <ulclass="infoList"> <li><spanclass="date">2011-11-11</span><ahref="">中国打破了世界软件巨头规则</a></li> <li><spanclass="date">2011-11-11</span><ahref="">口语:会说中文就能说英语!</a></li> <li><spanclass="date">2011-11-11</span><ahref="">农场摘菜不如在线学外语好玩</a></li> <li><spanclass="date">2011-11-11</span><ahref="">数理化老师竟也看学习资料?</a></li> <li><spanclass="date">2011-11-11</span><ahref="">学英语送ipad2,45天突破听说</a></li> <li><spanclass="date">2011-11-11</span><ahref="">学外语,上北外!</a></li> </ul> <ulclass="infoList"> <li><spanclass="date">2011-11-11</span><ahref="">名师教作文:3妙招巧写高分</a></li> <li><spanclass="date">2011-11-11</span><ahref="">耶鲁小子:教你备考SAT</a></li> <li><spanclass="date">2011-11-11</span><ahref="">施强:高端专业语言教学</a></li> <li><spanclass="date">2011-11-11</span><ahref="">数理化老师竟也看学习资料?</a></li> <li><spanclass="date">2011-11-11</span><ahref="">【推荐】名校英语方法曝光!</a></li> <li><spanclass="date">2011-11-11</span><ahref="">2012高考“考点”大曝光!!</a></li> </ul> <ulclass="infoList"> <li><spanclass="date">2011-11-11</span><ahref="">澳大利亚八大名校招生说明会</a></li> <li><spanclass="date">2011-11-11</span><ahref="">2012世界大学排名新鲜出炉</a></li> <li><spanclass="date">2011-11-11</span><ahref="">新加坡留学,国际双语课程</a></li> <li><spanclass="date">2011-11-11</span><ahref="">高考后留学日本名校随你选</a></li> <li><spanclass="date">2011-11-11</span><ahref="">教育培训行业优势资源推介</a></li> <li><spanclass="date">2011-11-11</span><ahref="">即刻预约今年最后一场教育展</a></li> </ul> </div> </div> <!--slideTxtBoxE--> <!--slideTxtBoxS--> <divclass="slideTxtBox"> <divclass="hd"> <ul><li><ahref="">教育2</a></li><li><ahref="">培训2</a></li><li><ahref="">出国2</a></li></ul> </div> <divclass="bd"> <ulclass="infoList"> <li><spanclass="date">2011-11-11</span><ahref="">中国打破了世界软件巨头规则</a></li> <li><spanclass="date">2011-11-11</span><ahref="">口语:会说中文就能说英语!</a></li> <li><spanclass="date">2011-11-11</span><ahref="">农场摘菜不如在线学外语好玩</a></li> <li><spanclass="date">2011-11-11</span><ahref="">数理化老师竟也看学习资料?</a></li> <li><spanclass="date">2011-11-11</span><ahref="">学英语送ipad2,45天突破听说</a></li> <li><spanclass="date">2011-11-11</span><ahref="">学外语,上北外!</a></li> </ul> <ulclass="infoList"> <li><spanclass="date">2011-11-11</span><ahref="">名师教作文:3妙招巧写高分</a></li> <li><spanclass="date">2011-11-11</span><ahref="">耶鲁小子:教你备考SAT</a></li> <li><spanclass="date">2011-11-11</span><ahref="">施强:高端专业语言教学</a></li> <li><spanclass="date">2011-11-11</span><ahref="">数理化老师竟也看学习资料?</a></li> <li><spanclass="date">2011-11-11</span><ahref="">【推荐】名校英语方法曝光!</a></li> <li><spanclass="date">2011-11-11</span><ahref="">2012高考“考点”大曝光!!</a></li> </ul> <ulclass="infoList"> <li><spanclass="date">2011-11-11</span><ahref="">澳大利亚八大名校招生说明会</a></li> <li><spanclass="date">2011-11-11</span><ahref="">2012世界大学排名新鲜出炉</a></li> <li><spanclass="date">2011-11-11</span><ahref="">新加坡留学,国际双语课程</a></li> <li><spanclass="date">2011-11-11</span><ahref="">高考后留学日本名校随你选</a></li> <li><spanclass="date">2011-11-11</span><ahref="">教育培训行业优势资源推介</a></li> <li><spanclass="date">2011-11-11</span><ahref="">即刻预约今年最后一场教育展</a></li> </ul> </div> </div> <!--slideTxtBoxE--> <!--slideTxtBoxS--> <divclass="slideTxtBox"> <divclass="hd"> <ul><li><ahref="">教育3</a></li><li><ahref="">培训3</a></li><li><ahref="">出国3</a></li></ul> </div> <divclass="bd"> <ulclass="infoList"> <li><spanclass="date">2011-11-11</span><ahref="">中国打破了世界软件巨头规则</a></li> <li><spanclass="date">2011-11-11</span><ahref="">口语:会说中文就能说英语!</a></li> <li><spanclass="date">2011-11-11</span><ahref="">农场摘菜不如在线学外语好玩</a></li> <li><spanclass="date">2011-11-11</span><ahref="">数理化老师竟也看学习资料?</a></li> <li><spanclass="date">2011-11-11</span><ahref="">学英语送ipad2,45天突破听说</a></li> <li><spanclass="date">2011-11-11</span><ahref="">学外语,上北外!</a></li> </ul> <ulclass="infoList"> <li><spanclass="date">2011-11-11</span><ahref="">名师教作文:3妙招巧写高分</a></li> <li><spanclass="date">2011-11-11</span><ahref="">耶鲁小子:教你备考SAT</a></li> <li><spanclass="date">2011-11-11</span><ahref="">施强:高端专业语言教学</a></li> <li><spanclass="date">2011-11-11</span><ahref="">数理化老师竟也看学习资料?</a></li> <li><spanclass="date">2011-11-11</span><ahref="">【推荐】名校英语方法曝光!</a></li> <li><spanclass="date">2011-11-11</span><ahref="">2012高考“考点”大曝光!!</a></li> </ul> <ulclass="infoList"> <li><spanclass="date">2011-11-11</span><ahref="">澳大利亚八大名校招生说明会</a></li> <li><spanclass="date">2011-11-11</span><ahref="">2012世界大学排名新鲜出炉</a></li> <li><spanclass="date">2011-11-11</span><ahref="">新加坡留学,国际双语课程</a></li> <li><spanclass="date">2011-11-11</span><ahref="">高考后留学日本名校随你选</a></li> <li><spanclass="date">2011-11-11</span><ahref="">教育培训行业优势资源推介</a></li> <li><spanclass="date">2011-11-11</span><ahref="">即刻预约今年最后一场教育展</a></li> </ul> </div> </div> <!--slideTxtBoxE--> </div> </div> <!--parBdE--> </div> <scripttype="text/javascript"> jQuery(".slideTxtBox").slide({effect:"left"}); jQuery("#doubleSlideTxt").slide({titCell:".parHdli",mainCell:".parBdIn",effect:"top",trigger:"click"}); </script> </div> </div> <!--contentE--> </body> </html>
以上就是本文的全部内容了,希望大家能够喜欢。