1、引用jQuery.js 和 jquery.SuperSlide.js

因为SuperSlide是基于jQuery的插件，所以前提必须先引用jQuery，再引用SuperSlide

<head>

    <script type="text/javascript" src="../jquery1.42.min.js"></script>

    <script type="text/javascript" src="../jquery.SuperSlide.2.1.1.js"></script>

</head>

2、编写HTML

以下是默认的HTMl结构，分别是 ".hd" 里面包含ul， ".bd" 里面包含ul

<div class="slideTxtBox">

    <div class="hd">

        <ul><li>教育</li><li>培训</li><li>出国</li></ul>

    </div>

    <div class="bd">

        <ul>

            <li><a href="http://www.SuperSlide2.com" target="_blank">SuperSlide2.0正式发布！</a></li>

            ...

        </ul>

        <ul>

            <li><a href="http://www.SuperSlide2.com" target="_blank">名师教作文：３妙招巧写高分</a></li>

            ...

        </ul>

        <ul>

            <li><a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a></li>

            ...

        </ul>

    </div>

</div>

3、编写CSS，为HTML赋予样色

认真检查您的css，保证兼容大部分浏览器前提下再调用SuperSlide

.slideTxtBox{ width:450px; border:1px solid #ddd; text-align:left;  }

.slideTxtBox .hd{ height:30px; line-height:30px; background:#f4f4f4; padding: 20px; border-bottom:1px solid #ddd;  position:relative; }

.slideTxtBox .hd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px;   }

.slideTxtBox .hd ul li{ float:left; padding: 15px; cursor:pointer;  }

.slideTxtBox .hd ul li.on{ height:30px;  background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }

.slideTxtBox .bd ul{ padding:15px;  zoom:;  }

.slideTxtBox .bd li{ height:24px; line-height:24px;   }

.slideTxtBox .bd li .date{ float:right; color:#;  }

4、调用SuperSlide

在本例中，请在 “.slideTxtBox” div结束后立刻调用 SuperSlide，这样会得到最好的效果，避免整个页面加载后再调用 SuperSlide；
因为是默认HTML结构，所以参数都为默认值，不用填写titCell、mainCell等。

<script type="text/javascript">jQuery(".slideTxtBox").slide(); </script>

原文地址 http://www.superslide2.com/howToUse.html

更多详情 http://down.admin5.com/demo/code_pop/18/562/

SuperSlidev2.1滑动门的更多相关文章

  1. asp.net实现数据库版动态网页滑动门

    前端: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="滑动门.aspx.c ...

  2. slidedoor滑动门特效

    slidedoor滑动门特效 exportWidth:暴露门的宽度 width imagesWidth:单张图片的宽度width 每道门每次偏移量 translate=imagesWidth-expo ...

  3. Javascript学习笔记2.2 Javascript与DOM选项卡（滑动门）案例详解

    学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> < ...

  4. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

  5. JS滑动门,JQuery滑动门

    <a href="#" id="one1" onmouseover="setTab('one',1,2)" class="h ...

  6. css滑动门制作圆角按钮

    之前做项目的时候,基本都是将圆角背景图切成三块,故而每次用的标签都超级多,a标签中总是包含三个span,然后里面还得放按钮,导航冗余标签极多. 事实上是之前理解的滑动门的精髓不够到位. 现在有两种方式 ...

  7. 代码简洁的滑动门（tab）jquery插件

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...

  8. HTML+CSS技术实现网页滑动门效果

    一.什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果 二.实 ...

  9. 从零开始学 Web 之 CSS（五）可见性、内容移除、精灵图、属性选择器、滑动门

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

随机推荐

  1. Android下载更新的安装包以及九宫格界面

    继上篇博客,我接下来做的是一个九宫格界面,但是对之前的Splash页面我还有要说的就是,当出现网络异常.json解析异常或者没有更新的时候,我们都必须要跳转到我们的主页面,因为Splash页面仅是展示 ...

  2. VSS提示"Could not find the Visual SourceSafe Internet Web Service connection information for the specified database

    转自:http://www.cnblogs.com/qqflying/archive/2007/12/18/1004051.html VSS连接错误提示: ====================== ...

  3. 【代码笔记】iOS-浮点数处理并去掉多余的0

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. ...

  4. assign、retain、copy使用异同

    1 三者的区别 首先,引用计数的概念:表示对象被引用的次数.当引用计数为 0 的时候,系统就会发送dealloc消息来释放内存. assign:用于基本数据类型,没有引用计数,因此不存在增加或减少引用 ...

  5. IOS contentOffset该如何理解

    contentOffset是哪个点??? 首先从字面理解:内容偏移 我可是查了词典的!!! 对于contentOffset有的时候我们会产生错误理解. 我不想在这里介绍错误的理解避免不必要的混淆. 我 ...

  6. UITextField 的限制输入金额(可为小数的正确金额)

    要判断输入金额为正确金额的方法有两个,一个是用正则表达式,另一个就是用textfield的代理方法 有时候难免遇到这样的需求,不符合规则的金额就不让输入时,那用这种方法比较合理 如果设置输入键盘为De ...

  7. Java开发第一步：JDK 7 安装及配置

    JDK 7 安装及配置1. 打开网页http://www.oracle.com 下载对应平台的合适 JDK. 2. 双击下载的 exe,如 jdk-7u7-windows-i586.exe.3. 进入 ...

  8. MySQL 数据库双向镜像、循环镜像(复制)

    在MySQL数据库镜像的贴子中,主数据库A 的数据镜像到从数据库B,是单向的,Zen Cart网店的数据读写都必须在数据库A进行,结果会自动镜像到数据库B中.但是对数据库B的直接操作,不会影响数据库A ...

  9. Java Security：Java加密框架(JCA)简要说明

    加密服务总是关联到一个特定的算法或类型,它既提供了密码操作(如Digital Signature或MessageDigest),生成或供应所需的加密材料(Key或Parameters)加密操作,也会以 ...

  10. 烂泥：CentOS命令学习之tar打包与解压

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. tar命令一般是做打包和解压使用,有关tar命令的使用.我们可以通过帮助文档进行查看,如下: tar –help man tar tar有几个比较重要的 ...