欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Jquery滑动菜单lavalamp

程序员文章站 2022-05-30 13:57:33
doctype html>         ...

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' src='https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js?ver=1.2.6'></script>
<script type='text/javascript' src='https://shawnster.org/jquery/lavalamp.min.js'></script>
<script type='text/javascript' src='https://shawnster.org/jquery/easing.js'></script>
<script type="text/javascript">


$(function(){$(".lavalamp").lavalamp({ fx: "backout", speed: 333 })});


</script>
    </head>
    <body>
 <p>
       <ul class="lavalamp">
         <li><a target="_blank" href="https://www.topit.me/fashion">fashion | 时尚</a></li>
         <li><a target="_blank" href="https://www.topit.me/art">art | 艺术</a></li>
         <li><a target="_blank" href="https://www.topit.me/photography">photography | 摄影</a></li>
         <li><a target="_blank" href="https://www.topit.me/design">design | 设计</a></li>
         <li><a target="_blank" href="https://www.topit.me/illustration">illustration | 插画</a></li>
         <li><a target="_blank" href="https://www.topit.me/featured">featured | 主题</a></li>
       </ul>
 </p>
    </body>
</html>
 

上一篇： jsp中freemarker 数字格式化详解

下一篇： 喝什么能瘦身，进来看看你就能知道了

推荐阅读