首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMarch 14, 2015

此款插件包含在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>

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

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

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript中的null和undefined解析
Apr 14 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
JS面试题---关于算法台阶的问题
Jul 26 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
JS 自执行函数原理及用法
Aug 05 Javascript
解决vue scoped scss 无效的问题
Sep 04 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 #Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 #Javascript
node.js [superAgent] 请求使用示例
Mar 13 #Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 #Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 #Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
Mar 13 #Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 #Javascript
HDR(1) vuex(1) 曝光融合(1) 高动态范围(1) InputStream(1) axios(1) Vue3(1) OutputStream(1) persistedstate(1) Set接口(1)
You might like
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
javascript html5移动端轻松实现文件上传
2020/03/27 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
2016/07/20 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
Python中非常实用的一些功能和函数分享
2015/02/14 Python
Python实现的Excel文件读写类
2015/07/30 Python
浅谈Python中的私有变量
2018/02/28 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
对python判断是否回文数的实例详解
2019/02/08 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
Otiumberg官网：英国半精致珠宝品牌
2021/01/16 全球购物
波兰运动鞋网上商店：Distance.pl
2020/07/30 全球购物
会计电算化学生个人的自我评价
2014/02/08 职场文书
人事部岗位职责范本
2014/03/05 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
酒店节能降耗方案
2014/05/08 职场文书
工厂搬迁方案
2014/05/11 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
2014年质检工作总结
2014/11/26 职场文书
民主评议党员个人总结
2015/02/13 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python
python实现简单的聊天小程序
2021/07/07 Python