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

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. asp.net mvc4 System.Web.Optimization找不到引用

    在MVC4的开发中,如果创建的项目为空MVC项目,那么在App_Start目录下没有BundleConfig.cs项的内容,在手动添加时在整个库中都找不到:System.Web.Optimizatio ...

  2. tomcat server需要重启的时刻

    1.修改了web project的任何配置文件,都需要重启tomcat 2.修改了任何java class文件,都需要重启tomcat server 3.在项目中添加了任何的文件,包括配置文件.jav ...

  3. struts2实现文件上传、多文件上传和文件下载

    总结的两个问题,就是struts2上传下载的时候对属性名配置要求非常严格: 第一:上传的时候 private File file; private String fileContentType; pr ...

  4. webApp 开发技术要点总结

    如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切.接触 webkit webapp的开发已经有一段时间了,现把一些技巧分享给大家 ...

  5. js setInterval

    var monitorInterval = null;    //检索cs 是否处理完成 开始: monitorInterval = setInterval(function () { CheckCS ...

  6. ajax获取其他网站接口信息

    MXS&Vincene  ─╄OvЁ  &0000023─╄OvЁ  MXS&Vincene MXS&Vincene  ─╄OvЁ:今天很残酷,明天更残酷,后天很美好, ...

  7. 编译openssl

    windows: 下载openssl-1.0.1h.tar.gz文件 32位: 在解压的包中,有INSTALL.W32文件,按照文件提示安装 64位: 在解压的包中,有INSTALL.W64文件,按照 ...

  8. 机器学习实战-边学边读python代码(4)

    程序2-4 分类器针对约会网站的测试代码(4) def datingClassTest():hoRatio = 0.10 //将文件读入内存矩阵datingDataMat,datingLabels = ...

  9. Spring整合Hibernate。。。。

    环境搭建,在eclipse中导入spring和hibernate框架的插件,和导入所有使用到的架包 首先,hibernate的创建: 建立两个封装类,其中封装了数据库中表的属性,这儿只写属性,gett ...

  10. pickle与shelve

    pickle Example 写入文件 import pickle integers = [1, 2, 3, 4, 5] with open('pickle-example.p', 'wb') as ...