欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

SuperSlide标签切换、焦点图多种组合插件_jquery

程序员文章站 2022-04-18 22:06:49
...
此款插件包含在SuperSlide标签切换、焦点图多种组合插件,SuperSlide 是致力于实现网站统一特效调用的函数，能解决大部分标签切换、焦点图切换等效果，还能多个slide组合创造更多的效果。（兼容ie内核(包括无敌的 ie6)、webkit内核、ff、opera等主流浏览器）。适用于网站统一插件库其中包含了网站常用的大部分js效果。文件中包含使用详解。

js调用：

复制代码 代码如下:

jQuery(".slideTxtBox").slide( {effect:"left"} );
jQuery("#doubleSlideTxt").slide( { titCell:".parHd li",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 .parHd li{ width:14px; padding:5px 5px 5px 5px; line-height:16px; border:1px solid #baccdf; border-left:0;
margin-bottom:5px; background:#fff; color:#b5c4d3; cursor:pointer; margin-left:1px; }
#doubleSlideTxt .parHd li.on{ background:#dbeefd; font-weight:bold; color:#367399; border-right:3px solid #4e98c6;
margin-left:0px; position:relative; z-index:100; padding:5px 10px 5px 10px;}
#doubleSlideTxt .parBd{ position:relative; z-index:0; width:440px; left:0px; border:1px solid #baccdf; padding:6px; background:#dbeefd;}
#doubleSlideTxt .parBd .slideTxtBox{ background:#fff; width:400px; border:0; padding:20px; }
#doubleSlideTxt .parBd .slideTxtBox .hd{ background:#fff; }

HTML:

复制代码 代码如下:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
http://www.w3.org/1999/xhtml">>




Super Slide














  • 栏目一

  • 栏目二

  • 栏目三




















































以上就是本文的全部内容了，希望大家能够喜欢。

相关标签： SuperSlide 标签切换 焦点图

上一篇： 求教关于PDO使用的问题

下一篇： javascript数组操作（包含删除、增加、截取、合并等）用法实例总结

推荐阅读