今天又接触到另一个新的前端插件，心情美美哒~

SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新，官网地址：http://www.superslide2.com/index.html。话不多说，看使用方法+效果：

1.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结构，分别是 ".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样式，使得页面美观一点：

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

.slideTxtBox .hd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 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:0 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:#999;  }

4.调用SuperSlide：

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

5.效果：实现类似于标签页的切换效果：

其他特效还包括：导航、焦点图、tab切换、图片滚动、文字滚动等

SuperSlide的更多相关文章

  1. 使用SuperSlide 实现标签切换

    小颖之前还写过一篇jquery实现标签切换的文章  jquery实现Tab选项卡菜单 今天小颖逛博客园时看到了用SuperSlide 实现标签切换的文章,所以小颖就自己试了下,试了后发现SuperSl ...

  2. 多功能前台交互效果插件superSlide

    平时我们常用的"焦点图/幻灯片""Tab标签切换""图片滚动""无缝滚动"等效果要加载n个插件,又害怕代码冲突又怕不兼容 ...

  3. Superslide插件无效的问题

    用Superslide像往常那样导入JQ和SuperSlide后,首页焦点图不会变,就像SuperSlide失效了一样,为什么??? 排查了一圈最后发现是JS导入顺序的问题,必须先导入JQ,再导入Su ...

  4. 温故而知新 兼容性较强的轮播器superslide.js

    官网: http://www.superslide2.com/index.html demo: http://www.superslide2.com/demo.html API: http://www ...

  5. PHP在yii2中封装SuperSlide 幻灯片编写自己的SuperSlideWidget的例子

    因为近期给朋友公司做个门户网站,把荒置了6.7年的PHP又重新拾起,发现PHP这些年兴旺多了,很多新的东西看的不明不白,研究了几个框架ZendFramework.thinkphp.Symfony.yi ...

  6. jquery.SuperSlide.2.1.2--轮播（兼容到IE7 适用于整屏）

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

  7. 网站开发，推荐使用SuperSlide 插件-Tab标签切换，图片滚动，无缝滚动，焦点图

    SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...

  8. 学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）

    SuperSlide 2  轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...

  9. SuperSlide轮播插件滚动高度或宽度不对的问题解决

    声明:本文由w3h5原创,转载请注明出处:<SuperSlide轮播插件滚动高度或宽度不对的问题解决> SuperSlide 是一款比较实用的轮播插件,网站上常用的“焦点图/幻灯片”“Ta ...

随机推荐

  1. js match() 方法

    方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配.

  2. EBS R12.2 创建应用层的启动和关闭脚本

    Create the following files to start and stop R12. application tier. Change the apps and weblogic pas ...

  3. C#实现鸽巢排序

    /// <summary> /// 鸽巢排序 /// 创建一个长度大于等于待排序数组array元素中最大值的标记数组mark, /// 将数组array中元素值个数映射到mark数组中. ...

  4. delphi的webBrowser操作HTML研究

    测试例子: 外网电脑D:\TEST\delphiTest\webbrowsetest 参考文档: delphi 操作WebBrowser 元素值 http://hi.baidu.com/kinglik ...

  5. redmine设置

    接上篇. 1.redmine新版本已经比较强大了,可以定制所有字段(含标准字段和自定义字段)的读写属性.这里为了避免字段过多影响用户感受,希望增加功能将不相关的字段屏蔽,下载插件Workflow Hi ...

  6. linux查看修改线程默认栈空间大小（ulimit -s）

    linux查看修改线程默认栈空间大小 ulimit -s 1.通过命令 ulimit -s 查看linux的默认栈空间大小,默认情况下 为10240 即10M 2.通过命令 ulimit -s 设置大 ...

  7. Centos6版本升级

    1.查看当前版本 [root@IDC-D-1699 docker]# cat /etc/issue CentOS release 6.8 (Final) Kernel \r on an \m 2.升级 ...

  8. Android Layout XML属性

    转载自并做少量添加:http://www.cnblogs.com/playing/archive/2011/04/07/2008620.html Layout对于迅速的搭建界面和提高界面在不同分辨率的 ...

  9. 2016.8.16 Java培训第一天

    1. 十进制转换二进制 31/2=15余1  15/2=7余1 7/2=3余1 3/2=1余1    31的二进制结果为11111 35/2=17余1  17/2=8余1  8/2=4余0 4/2=2 ...

  10. 【Linux命令与工具】ps命令

    Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态的显示进程信 ...