网页特效工具

来源：互联网发布：如何避免无聊闲谈知乎编辑：程序博客网时间：2024/06/09 03:37

下载地址：http://www.superslide2.com/index.html

1、引用jQuery.js 和 jquery.SuperSlide.js

因为SuperSlide是基于jQuery的插件，所以前提必须先引用jQuery，再引用SuperSlide

?
1
2
3
4
5
<head>
    <scripttype="text/javascript"src="../jquery1.42.min.js"></script>
    <scripttype="text/javascript"src="../jquery.SuperSlide.2.1.1.js"></script>
</head>

2、编写HTML

以下是默认的HTMl结构，分别是 ".hd" 里面包含ul， ".bd" 里面包含ul

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<divclass="slideTxtBox">
    <divclass="hd">
        <ul><li>教育</li><li>培训</li><li>出国</li></ul>
    </div>
    <divclass="bd">
        <ul>
            <li><ahref="http://www.SuperSlide2.com"target="_blank">SuperSlide2.0正式发布！</a></li>
            ...
        </ul>
        <ul>
            <li><ahref="http://www.SuperSlide2.com"target="_blank">名师教作文：３妙招巧写高分</a></li>
            ...
        </ul>
        <ul>
            <li><ahref="http://www.SuperSlide2.com"target="_blank">澳大利亚八大名校招生说明会</a></li>
            ...
        </ul>
    </div>
</div>

3、编写CSS，为HTML赋予样色

认真检查您的css，保证兼容大部分浏览器前提下再调用SuperSlide

?
1
2
3
4
5
6
7
8
.slideTxtBox{ width:450px;border:1pxsolid #ddd;text-align:left;  }
.slideTxtBox .hd{ height:30px;line-height:30px;background:#f4f4f4;padding:020px; border-bottom:1pxsolid #ddd; position:relative; }
.slideTxtBox .hd ul{float:left;position:absolute;left:20px;top:-1px;height:32px;   }
.slideTxtBox .hd ul li{float:left;padding:015px; cursor:pointer;  }
.slideTxtBox .hd ul li.on{height:30px; background:#fff;border:1pxsolid #ddd;border-bottom:2pxsolid #fff; }
.slideTxtBox .bd ul{padding:15px;  zoom:1;  }
.slideTxtBox .bd li{height:24px;line-height:24px;   }
.slideTxtBox .bd li .date{float:right;color:#999;  }

4、调用SuperSlide

在本例中，请在 “.slideTxtBox” div结束后立刻调用 SuperSlide，这样会得到最好的效果，避免整个页面加载后再调用 SuperSlide；
因为是默认HTML结构，所以参数都为默认值，不用填写titCell、mainCell等。

?
1
<scripttype="text/javascript">jQuery(".slideTxtBox").slide(); </script>

0 0