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="">名师教作文:3妙招巧写高分</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="">名师教作文:3妙招巧写高分</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="">名师教作文:3妙招巧写高分</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 相关文章推荐
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
浅谈javascript的分号的使用
May 12 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
Jun 27 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 Javascript
JS+CSS实现过渡特效
Jan 02 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
You might like
PHP+MYSQL的文章管理系统(一)
2006/10/09 PHP
php的hash算法介绍
2014/02/13 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
详解js异步文件加载器
2016/01/24 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
python中的闭包用法实例详解
2015/05/05 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
python环境下安装opencv库的方法
2020/03/05 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
python 将Excel转Word的示例
2021/03/02 Python
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
自荐书模板
2013/12/15 职场文书
加拿大探亲邀请信
2014/01/28 职场文书
2014年清明节寄语
2014/04/03 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
对公司的意见和建议
2015/06/04 职场文书
红色经典观后感
2015/06/18 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android