SuperSlidev2.1滑动门

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

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

asp.net实现数据库版动态网页滑动门
前端: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="滑动门.aspx.c ...
slidedoor滑动门特效
slidedoor滑动门特效 exportWidth:暴露门的宽度 width imagesWidth:单张图片的宽度width 每道门每次偏移量 translate=imagesWidth-expo ...
Javascript学习笔记2.2 Javascript与DOM选项卡（滑动门）案例详解
学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> < ...
jquery插件之tab标签页或滑动门
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...
JS滑动门,JQuery滑动门
<a href="#" id="one1" onmouseover="setTab('one',1,2)" class="h ...
css滑动门制作圆角按钮
之前做项目的时候,基本都是将圆角背景图切成三块,故而每次用的标签都超级多,a标签中总是包含三个span,然后里面还得放按钮,导航冗余标签极多. 事实上是之前理解的滑动门的精髓不够到位. 现在有两种方式 ...
代码简洁的滑动门（tab）jquery插件
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...
HTML+CSS技术实现网页滑动门效果
一.什么是滑动门大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果二.实 ...
从零开始学 Web 之 CSS（五）可见性、内容移除、精灵图、属性选择器、滑动门
大家好,这里是「 Daotin的梦呓」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

随机推荐

你真的了解UIApplication吗？
一:首先查看一下关于UIApplication的定义 NS_CLASS_AVAILABLE_IOS(2_0) @interface UIApplication : UIResponder //获得单例 ...
豆瓣FM 歌词跟随插件
一直在用豆瓣FM,发现老是没有歌词很不方便,今天找了下.找到一个不错的插件. 插件原文地址:http://www.douban.com/group/topic/47559280/ 插件下载地址:htt ...
(转) 一步一步学习ASP.NET 5 (五）- TypeScript
转发:微软MVP 卢建晖的文章,希望对大家有帮助.原文:http://blog.csdn.net/kinfey/article/details/44568971 编者语 : 人总会多次犯错,历史上告 ...
更换mysql数据目录后出现ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2) 的解决办法
服务器上的mysql默认数据目录为/var/lib/mysql/,同时服务器的/空间不是很大,而近期又有大量的日志需要导入进行分析,时常搞得/的空间捉襟见肘,晚上一狠心就想把mysql的数据目录转移到 ...
Linux Found a swap file by the name filename
在Linux中使用vi命令编辑mysql_backup.sh时遇到下面提示信息 E325: ATTENTION Found a swap file by the name ".mysql_b ...
mysql online ddl
大家知道,互联网业务是典型的OLTP(online transaction process)应用,这种应用访问数据库的特点是大量的短事务高并发运行.因此任何限制高并发的动作都是不可接受的,甚至 ...
使用dig查询dns解析
原文地址:使用dig查询dns解析作者:chenwenming 一般来说linux下查询域名解析有两种选择,nslookup或者dig,而在使用上我觉得dig更加方便顺手. 如果是在debian下的 ...
JQuery 世界时间
根据表格的时间显示表格的时间,本机的时间,韩国的时间 <%@ Page Language="C#" AutoEventWireup ="true" Cod ...
ReactNative之坑爹的在线安装
编译一个github上ReactNative应用,根据说明只有3步: npm installreact-native run-androidenjoy 但几个步骤实在是一波三折充满着坎坷,一点都不en ...
/proc/interrupts 统计2.6.38.8与3.10.25差异
eth4进，eth5出 linux-3.10.25 67: 2 3 2 3 PCI-MSI-edge eth468: ...