- <!doctype html>
- <html lang="zh">
- <head>
- <meta charset="utf-8">
- <title>xuyaoxiang</title>
- <style>
- body{margin:0px;padding:0px;}
- .lavaLamp{
- position: relative; /*--重要--*/
- background-color: white;
- margin: 0px 0; /*--对IE很重要--*/
- line-height:28px;
- height:28px;
- }
- .lavaLamp li{
- float: left; /*--重要--*/
- list-style: none;
- }
- .lavaLamp li.back{
- width:9px;
- background-color:#F66;
- height: 28px; /*--较为重要--*/
- z-index: 1; /*--较为重要--*/
- position: absolute; /*--重要--*/
- }
- .lavaLamp li a{
- color:#4F4F4F;
- z-index: 2; /*--较为重要;如修改,数值必须大过上一个 z-index --*/
- font-variant:small-caps;
- text-decoration:none;
- position: relative; /*--重要--*/
- margin: auto 10px;
- }
- </style>
- <script type='text/javascript' src1='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js?ver=1.2.6'></script>
- <script type='text/javascript' src1='http://shawnster.org/jQuery/lavalamp.min.js'></script>
- <script type='text/javascript' src1='http://shawnster.org/jQuery/easing.js'></script>
- <script type="text/javascript">
- $(function(){$(".lavaLamp").lavaLamp({ fx: "backout", speed: 333 })});
- </script>
- </head>
- <body>
- <div>
- <ul class="lavaLamp">
- <li><a target="_blank" href="http://www.topit.me/fashion">Fashion | 时尚</a></li>
- <li><a target="_blank" href="http://www.topit.me/art">Art | 艺术</a></li>
- <li><a target="_blank" href="http://www.topit.me/photography">Photography | 摄影</a></li>
- <li><a target="_blank" href="http://www.topit.me/design">Design | 设计</a></li>
- <li><a target="_blank" href="http://www.topit.me/illustration">Illustration | 插画</a></li>
- <li><a target="_blank" href="http://www.topit.me/featured">Featured | 主题</a></li>
- </ul>
- </div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/240620134247.html
来源: http://www.codesnippet.cn/detail/240620134247.html