首页
所有分类
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 相关文章推荐
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
js html实现计算器功能
Nov 13 Javascript
JS实现移动端可折叠导航菜单（现代都市风）
Jul 07 Javascript
详解js中的几种常用设计模式
Jul 16 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 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
RustDesk(1) 蓝牙耳机(1) 蓝牙(1) win7(2) 鸿蒙(2) 华为(1) 鸿蒙3.0(1) 虚拟键盘(1) Debian(1) 声卡驱动(1)
You might like
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
JavaScript库 开发规则
2009/01/31 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
详解Node 定时器
2018/02/26 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
微信小程序网络层封装的实现（promise, 登录锁）
2019/05/08 Javascript
Python正则表达式的使用范例详解
2014/08/08 Python
python调用fortran模块
2016/04/08 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
python获取引用对象的个数方式
2019/12/20 Python
python的列表List求均值和中位数实例
2020/03/03 Python
python 读取二进制 显示图片案例
2020/04/24 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
西班牙在线宠物商店：zooplus.es
2017/02/24 全球购物
法国面料和小百货在线商店：Mondial Tissus
2019/03/23 全球购物
木马的传播途径主要有哪些
2016/04/08 面试题
生产部厂长职位说明书
2014/03/03 职场文书
售后客服工作职责
2014/06/16 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
公司回复函格式
2015/07/14 职场文书
高中体育课教学反思
2016/02/16 职场文书
初二物理教学反思
2016/02/19 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python