左右滑動式頁籤JQUERY網頁特效演示範例demo及語法 ~ 猛甲茶道互動式創意網頁設計 Tea Road

天堂特快車
天堂鳥
天使降臨

天堂特快車

大禹嶺位於花蓮、臺中、南投三縣交會處，介於合歡山和畢祿山之間。大禹嶺海拔2565公尺，舊名合歡啞口，由於開鑿時艱難險阻不亞於大禹治水，蔣經國總統特別將此地命名為大禹嶺。。
天堂鳥

新幾內亞的雨林裡，有種鳥類叫天堂鳥，各類天堂鳥的外型都非常特別，會在全身上下不同的部位長出「飾羽」，有的是螺旋狀，有的是線絲狀，有的則像披肩一樣。然而天堂鳥之中就屬「薩克森王天堂鳥」最有霸氣，身長22公分的牠，在雙眼後方竟然有兩條50公分長的飾羽，造型如同京劇、電玩中「呂布」的翎子。
天使降臨

情人無多　會否有天使幫我若我自信也被撕破　怎可不理我如情人難如初　賜一個天使給我好事將近！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type="text/css">
 #abgne-block-20120327 {
  width: 540px;
 }
 #abgne-block-20120327 ul, #abgne-block-20120327 li {
  list-style: none;
  margin: 0;
  padding: 0;
 }
 #abgne-block-20120327 .tabs li {
  float: left;
  margin: 0 0 -1px 5px;
  border: 1px solid #ddd;
  background: #fafafa;
  height: 32px;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
 }
 #abgne-block-20120327 .tabs li.active {
  background: #fff;
  padding-bottom: 1px;
  border-bottom: none;
 }
 #abgne-block-20120327 .tabs li.hover{
  background: #f5f5f5; 
 }
 #abgne-block-20120327 .tabs span {
  display: block;
  float: left;
  overflow: hidden;
  padding: 7px 15px 5px 15px;
  
 }
 #abgne-block-20120327 .tab_container {
  clear: both;
  border: 1px solid #DDD;
  background: #fff;
  overflow: hidden;
  border-radius: 5px;
 }
 #abgne-block-20120327 .tab_container ul {
 position: relative;
 height:300px;
overflow: hidden;
 }
 #abgne-block-20120327 .tab_container .tab_content li {
  position: absolute;
  width: 540px;
  height: 100%;
  padding: 15px;
  margin-top: 10px;
  background: #fff;
  
 }
 #abgne-block-20120327 .tab_container .tab_content li img {
  display: block;
  float: left;
  margin-right: 15px;
 }
 #abgne-block-20120327 .tab_container .tab_content li h3 {
  font-size: 22px;
  line-height: 22px;
  margin: 5px 0 15px;
 }
  #abgne-block-20120327 .tab_container .tab_content li p {
  
  margin-right:20px;
 }

</style>
</head>

<body>
 <div id="abgne-block-20120327">
  <ul class="tabs">
   <li><span>天堂特快車</span></li>
   <li><span>天堂鳥</span></li>
   <li><span>天使降臨</span></li>
  </ul>
  <div class="tab_container">
   <ul class="tab_content">
    <li>
     <img src="http://goo.gl/9DAvAH" width="350px;" alt="Happy Birthday">
     <h3 >天堂特快車</h3>
     <p>大禹嶺位於花蓮、臺中、南投三縣交會處，介於合歡山和畢祿山之間。大禹嶺海拔2565公尺，舊名合歡啞口，由於開鑿時艱難險阻不亞於大禹治水，蔣經國總統特別將此地命名為大禹嶺。
。</p>
    </li>
    <li>
     <img src="http://2.bp.blogspot.com/-AbjfXmYql_E/UkTvRK1JddI/AAAAAAAAFAo/g1fyt3t7_d4/s320/d195864.jpg" alt="Calculator Widget">
     <h3>天堂鳥</h3>
     <p>新幾內亞的雨林裡，有種鳥類叫天堂鳥，各類天堂鳥的外型都非常特別，會在全身上下不同的部位長出「飾羽」，有的是螺旋狀，有的是線絲狀，有的則像披肩一樣。然而天堂鳥之中就屬「薩克森王天堂鳥」最有霸氣，身長22公分的牠，在雙眼後方竟然有兩條50公分長的飾羽，造型如同京劇、電玩中「呂布」的翎子。</p>
    </li>
    <li>
     <img src="http://goo.gl/rKVhdD" width="350px;" alt="My Card">
     <h3 >天使降臨</h3>
     <p>情人無多　會否有天使幫我 若我自信也被撕破　怎可不理我 如情人難如初　賜一個天使給我 好事將近！ </p>
    </li>
   </ul>
<a style='float:right;margin-right:10px;' href="#">TOP</a>
  </div>
 </div>

// 若被滑鼠移上去的 li 是目前顯示的頁籤就不做任何動作
   if($this.hasClass('active')) return;

$this.toggleClass('hover');
  }).click(function(){ // 當滑鼠點擊 .tabs li 時
   // 先取出被點擊及目前顯示的頁籤與索引
   var $active = $tabsLi.filter('.active').removeClass('active'), 
    _activeIndex = $active.index(),  
    $this = $(this).addClass('active').removeClass('hover'), 
    _index = $this.index(), 
    isNext = _index > _activeIndex;
   
   // 如果被點擊的頁籤就是目前已顯示的頁籤, 則不做任何動作
   if(_activeIndex == _index) return;
   
   // 依索引大或小來決定移動的位置
   $tab_contentLi.eq(_activeIndex).stop().animate({
    left: isNext ? -_width : _width
   }).end().eq(_index).css('left', isNext ? _width : -_width).stop().animate({
    left: 0
   });
  });
  
  // 先把預設要顯示的頁籤加上 .active 樣式及顯示相對應的內容
  $tabsLi.eq(_default).addClass('active');
  $tab_contentLi.eq(_default).siblings().css({
   left: _width
  });
 });
</script>

</body>
</html>

響應式網頁架站只要6,888元起|[RWD]響應式網站，自適應網頁，讓SEO搜尋引擎最佳化你的網站

"你是獵人還是獵物？"

Related Posts Plugin for WordPress, Blogger...

Tea Road

Monga Shop

猛甲茶道互動式創意網頁設計 Tea Road