首页
所有分类
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 相关文章推荐
JS获取scrollHeight问题想到的标准问题
May 27 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
js 动态加载事件的几种方法总结
Dec 25 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
vue单页应用加百度统计代码（亲测有效）
Jan 31 Javascript
JavaScript交换两个变量方法实例
Nov 25 Javascript
浅谈javascript如何获取文件后缀名
Aug 07 Javascript
浅谈react useEffect闭包的坑
Jun 08 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
排名(1) matplotlib(7) 窗口函数(3) redis shake(1) 分析统计(1) 条形图(1) 可视化动图(1) 数据同步(1) 阿里云(6) ipyvizzu(1)
You might like
php将金额数字转化为中文大写
2015/07/09 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
php的扩展写法总结
2019/05/14 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
python基础教程之循环介绍
2014/08/29 Python
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
python抓取文件夹的所有文件
2018/02/27 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
python编写猜数字小游戏
2019/10/06 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
关于python中导入文件到list的问题
2020/10/31 Python
英国拖鞋购买网站：Bedroom Athletics
2020/02/28 全球购物
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
体育教师自我鉴定
2014/02/12 职场文书
党日活动总结
2014/05/07 职场文书
幼师求职自荐信
2014/05/31 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
罚站检讨书
2015/01/29 职场文书
六一活动主持词
2015/06/30 职场文书
深入理解Vue的数据响应式
2021/05/15 Vue.js