0
点赞
收藏
分享

微信扫一扫

基于jQ的特效插件:SuperSlide

官网:http://www.superslide2.com/index.html
GitHub:https://github.com/nicinabox/superslides

引用jQuery.js 和 jquery.SuperSlide.js

<head>
  <script type="text/javascript" src="../jquery1.42.min.js"></script>
  <script type="text/javascript" src="../jquery.SuperSlide.2.1.1.js"></script>
</head>

编写HTML

<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">名师教作文:3妙招巧写高分</a>
      </li>
      ...
    </ul>
    <ul>
      <li>
        <a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a>
      </li>
      ...
    </ul>
  </div>
</div>

编写CSS,为HTML赋予样色

.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:1;  
}
.slideTxtBox .bd li{ 
  height:24px; 
  line-height:24px;   
}
.slideTxtBox .bd li .date{ 
  float:right; 
  color:#999;  
}

调用SuperSlide

因为是默认HTML结构,所以参数都为默认值,不用填写titCell、mainCell等。

<script type="text/javascript">
  jQuery(".slideTxtBox").slide(); 
</script>

使用参数

举报

相关推荐

0 条评论