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

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. Velocity(4)——大小写

    Velocity是大小写敏感的.但是为了减少使用者的错误,某些地方存在特殊情况. 比如$foo.bar,首先会被检查是否能匹 配$foo.getbar(),再被检查是否能匹配$foo.getBar() ...

  2. 本图片处理类功能非常之强大可以实现几乎所有WEB开发中对图像的处理功能都集成了，包括有缩放图像、切割图像、图像类型转换、彩色转黑白、文字水印、图片水印等功能

    import java.awt.AlphaComposite; import java.awt.Color; import java.awt.Font; import java.awt.Graphic ...

  3. Java语言的特点

    一. 面向对象:其实是现实世界模型的自然延伸.现实世界中任何实体都可以看作是对象.对象之间通过消息相互作用.另外,现实世界中任何实体都可归属于某类事物,任何对象都是某一类事物的实例.如果说传统的过程式 ...

  4. 数据库中 关于不能用in 不能用exist 等关键字 查询不出现字段的问题

    这是之前在网上见到的一道题，后来心里略微想了想 觉得应该可能，所以就一闪而过了，之前去面试晨光的时候面试者问了我这道问题，当时也只是把自己的想法说了一下，可能因为当时面试的感觉不太好，面试官也没有追究 ...

  5. MVC @Html.TextBox 添加属性和样式

    1.添加属性:@Html.TextBox("CnAddressmodify","", new { maxlength="90" }) 2.添 ...

  6. 夺命雷公狗-----React---13--事件监听

    在react中事件监听直接作为组建的属性来添加即可,就像DOM中的html操作 <!DOCTYPE> <html> <head> <meta charset= ...

  7. Ajax提交整个表单

    //view页面 <script> $(function () { $("#btnAdd").click(function () { var pars = $(&quo ...

  8. ［caffe］linux下安装caffe（无cuda）以及python接口

    昨天在mac上折腾了一天都没有安装成功,晚上在mac上装了一个ParallelDesktop虚拟机,然后装了linux,十分钟就安装好了,我也是醉了＝.＝ 主要过程稍微记录一下: 1.安装BLAS s ...

  9. oracle 面试题

    1.对数据库SQL2005.ORACLE熟悉吗?   SQL2005是微软公司的数据库产品.是一个RDBMS数据库,一般应用在一些中型数据库的应用,不能跨平台.   ORACLE是ORACLE公司的数 ...

  10. find函数

    Python find() 方法检测字符串中是否包含子字符串 str ,如果指定 beg(开始) 和 end(结束) 范围,则检查是否包含在指定范围内,如果包含子字符串返回开始的索引值,否则返回-1. ...