首页
所有分类
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分割字符串并放入数组的函数
Jul 04 Javascript
dtree 网页树状菜单及传递对象集合到js内，动态生成节点
Apr 14 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
微信小程序 UI与容器组件总结
Feb 21 Javascript
Vue.js中的图片引用路径的方式
Jul 28 Javascript
JS返回顶部实例代码
Aug 09 Javascript
React Native自定义控件底部抽屉菜单的示例
Feb 08 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 Javascript
JavaScript数组排序功能简单实现
May 14 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
Sqlite(2) android studio(3) 多线程(6) Spring-Retry(1) 安卓(1) 多维数组(1) 移动开发(2) IDEA(2) Spring Boot(5) OpenLayer(1)
You might like
PHP中创建并处理图象
2006/10/09 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
深入理解Python3 内置函数大全
2017/11/23 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
GitHub 热门：Python 算法大全,Star 超过 2 万
2019/04/29 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
python中return的返回和执行实例
2019/12/24 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
英国天然抗衰老护肤品品牌：Nakin Skin Care
2019/04/16 全球购物
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
办公室综合文员岗位职责范本
2014/02/13 职场文书
法院授权委托书范文
2014/08/02 职场文书
教师节标语大全
2014/10/07 职场文书
赔偿协议书
2015/01/27 职场文书
六一儿童节开幕词
2015/01/29 职场文书
公司员工管理制度
2015/08/04 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
python实现Thrift服务端的方法
2021/04/20 Python