SuperSlide标签切换、焦点图多种组合插件
更新时间：2015年3月15日 19:19 点击：1655
此款插件包含在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:
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; 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">
</head>
<body>
<body>
<!-- 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">2011-11-11</span><a href="">中国打破了世界软件巨头规则</a></li>
<li><span class="date">2011-11-11</span><a href="">口语：会说中文就能说英语！</a></li>
<li><span class="date">2011-11-11</span><a href="">农场摘菜不如在线学外语好玩</a></li>
<li><span class="date">2011-11-11</span><a href="">数理化老师竟也看学习资料？</a></li>
<li><span class="date">2011-11-11</span><a href="">学英语送ipad2,45天突破听说</a></li>
<li><span class="date">2011-11-11</span><a href="">学外语，上北外！</a></li>
</ul>
<ul class="infoList">
<li><span class="date">2011-11-11</span><a href="">名师教作文：３妙招巧写高分</a></li>
<li><span class="date">2011-11-11</span><a href="">耶鲁小子：教你备考SAT</a></li>
<li><span class="date">2011-11-11</span><a href="">施强：高端专业语言教学</a></li>
<li><span class="date">2011-11-11</span><a href="">数理化老师竟也看学习资料？</a></li>
<li><span class="date">2011-11-11</span><a href="">【推荐】名校英语方法曝光！</a></li>
<li><span class="date">2011-11-11</span><a href="">2012高考“考点”大曝光!!</a></li>
</ul>
<ul class="infoList">
<li><span class="date">2011-11-11</span><a href="">澳大利亚八大名校招生说明会</a></li>
<li><span class="date">2011-11-11</span><a href="">2012世界大学排名新鲜出炉</a></li>
<li><span class="date">2011-11-11</span><a href="">新加坡留学，国际双语课程</a></li>
<li><span class="date">2011-11-11</span><a href="">高考后留学日本名校随你选</a></li>
<li><span class="date">2011-11-11</span><a href="">教育培训行业优势资源推介</a></li>
<li><span class="date">2011-11-11</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">2011-11-11</span><a href="">中国打破了世界软件巨头规则</a></li>
<li><span class="date">2011-11-11</span><a href="">口语：会说中文就能说英语！</a></li>
<li><span class="date">2011-11-11</span><a href="">农场摘菜不如在线学外语好玩</a></li>
<li><span class="date">2011-11-11</span><a href="">数理化老师竟也看学习资料？</a></li>
<li><span class="date">2011-11-11</span><a href="">学英语送ipad2,45天突破听说</a></li>
<li><span class="date">2011-11-11</span><a href="">学外语，上北外！</a></li>
</ul>
<ul class="infoList">
<li><span class="date">2011-11-11</span><a href="">名师教作文：３妙招巧写高分</a></li>
<li><span class="date">2011-11-11</span><a href="">耶鲁小子：教你备考SAT</a></li>
<li><span class="date">2011-11-11</span><a href="">施强：高端专业语言教学</a></li>
<li><span class="date">2011-11-11</span><a href="">数理化老师竟也看学习资料？</a></li>
<li><span class="date">2011-11-11</span><a href="">【推荐】名校英语方法曝光！</a></li>
<li><span class="date">2011-11-11</span><a href="">2012高考“考点”大曝光!!</a></li>
</ul>
<ul class="infoList">
<li><span class="date">2011-11-11</span><a href="">澳大利亚八大名校招生说明会</a></li>
<li><span class="date">2011-11-11</span><a href="">2012世界大学排名新鲜出炉</a></li>
<li><span class="date">2011-11-11</span><a href="">新加坡留学，国际双语课程</a></li>
<li><span class="date">2011-11-11</span><a href="">高考后留学日本名校随你选</a></li>
<li><span class="date">2011-11-11</span><a href="">教育培训行业优势资源推介</a></li>
<li><span class="date">2011-11-11</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">2011-11-11</span><a href="">中国打破了世界软件巨头规则</a></li>
<li><span class="date">2011-11-11</span><a href="">口语：会说中文就能说英语！</a></li>
<li><span class="date">2011-11-11</span><a href="">农场摘菜不如在线学外语好玩</a></li>
<li><span class="date">2011-11-11</span><a href="">数理化老师竟也看学习资料？</a></li>
<li><span class="date">2011-11-11</span><a href="">学英语送ipad2,45天突破听说</a></li>
<li><span class="date">2011-11-11</span><a href="">学外语，上北外！</a></li>
</ul>
<ul class="infoList">
<li><span class="date">2011-11-11</span><a href="">名师教作文：３妙招巧写高分</a></li>
<li><span class="date">2011-11-11</span><a href="">耶鲁小子：教你备考SAT</a></li>
<li><span class="date">2011-11-11</span><a href="">施强：高端专业语言教学</a></li>
<li><span class="date">2011-11-11</span><a href="">数理化老师竟也看学习资料？</a></li>
<li><span class="date">2011-11-11</span><a href="">【推荐】名校英语方法曝光！</a></li>
<li><span class="date">2011-11-11</span><a href="">2012高考“考点”大曝光!!</a></li>
</ul>
<ul class="infoList">
<li><span class="date">2011-11-11</span><a href="">澳大利亚八大名校招生说明会</a></li>
<li><span class="date">2011-11-11</span><a href="">2012世界大学排名新鲜出炉</a></li>
<li><span class="date">2011-11-11</span><a href="">新加坡留学，国际双语课程</a></li>
<li><span class="date">2011-11-11</span><a href="">高考后留学日本名校随你选</a></li>
<li><span class="date">2011-11-11</span><a href="">教育培训行业优势资源推介</a></li>
<li><span class="date">2011-11-11</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>
</div>
</div>
<!-- content E -->
</body>
</html>
以上就是本文的全部内容了，希望大家能够喜欢。
下一篇: javascript实现数独解法
相关文章
jQuery Mobile开发中日期插件Mobiscroll使用说明
这篇文章主要介绍了jQuery Mobile开发中日期插件Mobiscroll使用说明,需要的朋友可以参考下...2016-03-03- 1、先讲讲JQuery的概念，JQuery首先是由一个 America 的叫什么 John Resig的人创建的，后来又很多的JS高手也加入了这个团队。其实 JQuery是一个JavaScript的类库，这个类库集合了很多功能方法，利用类库你可以用简单的一些代...2014-05-31
- 在页面开发中，经常遇到需要用户输入日期的操作。通常的做法是，提供一个文本框（text）,让用户输入，然后，编写代码验证输入的数据，检测其是否是日期类型。这样比较麻烦，同时，用户输入日期的操作也不是很方便，影响用户体验。如果使...2015-10-30
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
这篇文章主要介绍了vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下...2021-02-20- 一个简单的jQuery分页插件，兼容AMD规范和requireJS./** * jQuery分页插件 * */;(function (factory) { if (typeof define === "function" && define.amd) { // AMD模式 define([ "jquery" ], factory); } els...2015-11-08
- 这篇文章主要为大家分享了Bootstrap教程JS插件滚动监听学习笔记，内容很详细，感兴趣的小伙伴们可以参考一下...2016-05-20
- 通过jquery.cookie.js插件可以快速实现“点击获取验证码后60秒内禁止重新获取（防刷新）”的功能效果图：先到官网（http://plugins.jquery.com/cookie/）下载cookie插件，放到相应文件夹，代码如下：复制代码 代码如下: <!DOCTYPE ht...2015-03-15
- 这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下...2017-06-15
- 这篇文章主要介绍了jquery自定义插件开发之window的实现过程的相关资料,需要的朋友可以参考下...2016-05-09
- 这篇文章主要介绍了vue中使用swiper 插件出错问题及解决办法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-08-22
- 这篇文章主要给大家介绍了关于vue中jsonp插件的使用方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-09-10
jquery pagination分页插件使用详解（后台struts2）
这篇文章主要为大家详细介绍了jquery pagination 分页插件的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 ...2017-01-26- Query架构的开发人员能够创建一个插件代码来扩展其功能，从而能够产生一些最好的插件，让你的网站或任何给定的项目达到一个全新的水平。 ...2016-04-27
- 这篇文章主要为大家详细介绍了jquery插表单件form使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-01-23
- 这篇文章主要介绍了C# 如何设置label（标签）控件的背景颜色为透明，帮助大家更好的理解和使用c#，感兴趣的朋友可以了解下...2020-12-08
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
这篇文章主要介绍了matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel()),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-23解决jquery插件：TypeError:$.browser is undefined报错的方法
首先先说一说$.browser browser就是用来获取浏览器基本信息的。 jQuery 从 1.9 版开始，移除了 $.browser 和 $.browser.version ， 取而代之的是 $.support 。 在更新的 2.0 版本中，将不再支持 IE 6/7/8。 以后，如果用户需...2015-11-24- 这篇文章主要介绍了C#删除UL LI中指定标签里文字的方法,涉及C#针对页面HTML元素进行正则匹配与替换的相关操作技巧,需要的朋友可以参考下...2020-06-25
- 用灵动标签(e:loop)可以实现各种幻灯效果，本节讲解制作幻灯的基本方法。 如本站JS焦点图频道里的大部分幻灯图片效果都可以用灵动标签调用的。 ...2015-12-30
- ZeroClipboard 是国外大神开发的一个用于剪贴板复制的 JS 插件，它是基于 Flash 来实现跨浏览器的复制功能的。当我们使用 ZeroClipboard 的时候，它会悄悄隐藏一个小小的 Flash 影片(swf)，不会对我们的用户界面造成影响。我们只需要借助它实现复制功能就行了。...2016-03-30