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

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. ReentrantLock的实现语义与使用场景

    简介 ReentrantLock(重入锁)就是支持可重进入的锁,它表示该锁能支持一个线程对资源的重复加锁.另外还支持获取锁的公平和非公平选择ReentrantLock的实现不仅可以替代隐式的synch ...

  2. java学习：Hibernate入门

    相对微软的linq-to-sql或EF框架而言,"Hibernate对于eclipse的集成开发“ 新手并不容易掌握,下面是新手上路的步骤: 一.准备工作: 1.先下载eclipse (官网 ...

  3. .Net 中HashTable，HashMap 和 Dictionary<key,value> 和List<T>和DataTable的比较

    参考资料 http://www.cnblogs.com/MichaelYin/archive/2011/02/14/1954724.html http://zhidao.baidu.com/link? ...

  4. logstash5.x配置

    logstash --help --可以通过此命令看到所有命令 -f, --path.config --配置文件路径 -e, --config.string --可直接运行的配置字符串 -w, --p ...

  5. cxf(3.1.1) 客户端异常 请使用 @XmlType.name 和 @XmlType.namespace 为类分配不同的名称。

    最近项目使用webService 于是就使用了最新版本 3.1.1 . cxf 客户端调用时老是出现这个错误,综合网上各种资料修改如下,问题解决 "@XmlType.name 和 @XmlT ...

  6. 查看Linux内核版本命令

    一.查看Linux内核版本命令(两种方法): .cat /proc/version .uname -a 二.查看Linux系统版本的命令(3种方法): .lsb_release -a即可列出所有版本信 ...

  7. 如何生成DLL文件

    1.打开项目工程,点击Rebuild 2.Rebuild成功后,打开该项目所在文件目录 3.在路径里,在bin->Debug文件下可以看到刚生成成功的dll文件.

  8. 【java报错】Could not instantiate listener

    这个错误以前出现过好几次,莫名其妙的出现,莫名其妙的解决掉...昨天好好的,今天又出现了,记下来 2015-03-03 09:38:45.105:INFO:oejs.Server:jetty-8.1. ...

  9. SVN错误及处理

    SVN无法读取current修复方法 Can't read file : End of file found 文件:repository/db/txn_current.repository/db/cu ...

  10. Android 性能分析工具dumpsys的使用(自己增加一部分在后面)

    Android提供的dumpsys工具可以用于查看感兴趣的系统服务信息与状态,手机连接电脑后可以直接命令行执行adb shell dumpsys 查看所有支持的Service但是这样输出的太多,可以通 ...