9月 2013 ~ 猛甲茶道互動式創意網頁設計 Tea Road

彈跳下拉式選單導航列標籤JQUERY網頁特效演示範例demo及語法

2013年9月29日星期日晚上9:07 特效及語法 , Css , Html , Java , Jquery 發表意見

彈跳下拉式導航列標籤演示如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh-tw">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content='孟甲商行創意網頁設計,猛甲茶葉行與坪林茶廠產銷合作，由茶農精心烘培製作的頂級台灣茗茶，喉韻渾厚、 茶葉香醇自然回甘！貨真價實的上等好茶等你來品嘗。,網址http://eagle1024.blogspot.com/,信箱roberchen3@gmail.com,聯絡電話：0952916626' name='description'/>
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://demonstration.abgne.tw/jquery/jquery.easing.1.3.js"></script>
<title>孟甲商行</title>
<style type="text/css">
  #mynews ul {
  margin: 0;
  padding: 0;
  list-style: none;
  z-index:999;
  position:Absolute;
 }

#mynews ul li {
  float: left;
 }

#mynews ul li a {
  width: 90px;
  height: 50px;
  display: block;
  line-height: 50px;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  color: white;
 }

#mynews ul li a:hover {
  height: 100px;
  
  }
 #mynews ul li a div {
  color: #fff;
  line-height: 16px;
  font-weight: bold;
  margin-top: 0px;
  padding-top: 3px;
  border-top: 1px dotted #fff;
 }

#mynews .t1{background: #08f2d6 url(02.gif);}
 #mynews .t2{background: #1209f1 url(02.gif);}
 #mynews .t3{background: #a202e2 url(03.gif);}
 #mynews .t4{background: #f4e603 url(04.gif);}
 #mynews .t5{background: #55df07 url(05.gif);}
 #mynews .t6{background: #02a8f3 url(06.gif);}
 #mynews .t7{background: #f6025e url(07.gif);}
</style>
<script type="text/javascript">
 $(function(){
  // 幫 A 連結加上 hover() 事件
  $("#mynews a").hover(function(){ // 當滑鼠移進時..
   // 先停止未完成的動畫再進行新的動畫
   // 展開完整的選項內容
   // 動畫效果加上 easeOutBounce
   $(this).stop().animate({
    height: 120,opacity:0.5
   }, 600, "easeOutBounce");
  }, function(){ // 當滑鼠移出時..
   // 先停止未完成的動畫再進行新的動畫
   // 隱藏選項下方的內容
   // 動畫效果加上 easeOutBounce
   $(this).stop().animate({
    height: 50,opacity:1
   }, 600, "easeOutBounce");
  }).focus(function(){ // 當 A 連結取得焦點時..
   // 讓本身失去焦點
   $(this).blur();
  });
 });
</script>
</head>

~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~

"你是獵人還是獵物？"

Related Posts Plugin for WordPress, Blogger...

自動上下翻轉的橫幅廣告JQUERY網頁特效演示範例demo及語法

2013年9月28日星期六上午11:02 特效及語法 , Css , Html , Java , Jquery 發表意見

入口網站首頁的Banner橫幅廣告，網路T Bar標示品牌及促銷訊息

<body>

<div id="abgneBlock01">
  <div id="player">
   <ul class="list">
    <li><a  href="#"><img height="200" src="http://goo.gl/C4psy7"></a></li>
    <li><a  href="#"><img height="200" src="http://goo.gl/9DAvAH"></a></li>
    <li><a  href="#"><img height="200" src="http://goo.gl/rKVhdD"></a></li>
    <li><a  href="#"><img height="200" src="http://goo.gl/C4psy7"></a></li>
    <li><a  href="#"><img height="200" src="http://goo.gl/9DAvAH"></a></li>
    <li><a  href="#"><img height="200" src="http://goo.gl/rKVhdD"></a></li>
   </ul>
  </div>
 </div>
    
<script type="text/javascript">
 $(function(){
  // 先取得必要的元素並用 jQuery 包裝
  // 再來取得 $slides 的高度及設定動畫時間
  var $block = $('#abgneBlock01'),
   $slides = $('#player ul.list', $block),
   _height = $slides.find('li').height(),
   $li = $('li', $slides),
   _animateSpeed = 400, 
   timer, _speed = 4000;
  
  // 先移到最後一張
  $slides.css({
   top: _height * ($li.length - 1) * -1
  });
  
  // 產生 li 選項
  var _str = '';
  for(var i=0, j=$li.length;i<j;i++){
   // 每一個 li 都有自己的 className = playerControl_號碼
   _str += '<li class="playerControl_' + (i+1) + '">' + (i+1) + '</li>';
  }

// 產生 ul 並把 li 選項加到其中
  // 並幫 li 加上 mouseover 事件
  var $controlLi = $('<ul class="playerControl"></ul>').html(_str).appendTo($slides.parent()).find('li');
  $controlLi.mouseover(function(){
   clearTimeout(timer);

var $this = $(this);
   $this.addClass('current').siblings('.current').removeClass('current');
   // 移動位置到相對應的號碼
   $slides.stop().animate({
    top: _height * ($li.length - $this.index() - 1) * -1
   }, _animateSpeed, function(){
    if(!_isOver) timer = setTimeout(moveNext, _speed);
   });

return false;
  }).eq(0).mouseover();
  
  // 當滑鼠移到 $block 時則停止輪播
  // 移出時則繼續輪播
  var _isOver = false;
  $block.mouseenter(function(){
   clearTimeout(timer);
   _isOver = true;
  }).mouseleave(function(){
   _isOver = false;
   timer = setTimeout(moveNext, _speed);
  });

// 用來控制移動的函式
  function moveNext(){
   var _now = $controlLi.filter('.current').index();
   $controlLi.eq((_now+1) % $controlLi.length).mouseover();
  }
 });
</script>
    
    </body>
</html>

"你是獵人還是獵物？"

大學食堂「炒飯西施」走紅　男生因此愛上吃炒飯

2013年9月27日星期五下午2:19 特效及語法 , Css , Html , Java , Jquery 發表意見

豆腐西施
『炒飯西施』
大學食堂

豆腐西施

古有豆腐西施，現在新浪微博上曝出西南石油大學食堂出了一個「炒飯西施」，還稱男生因此愛上吃炒飯。據網友爆料，此美女出沒在西南石油大學學校二食堂炒飯視窗，除了「炒飯西施」還被戲稱為「最美食堂大媽」。

TOP

『炒飯西施』

『炒飯西施』穿著一整套的『炒飯衣』，繫著繡花格仔圍裙，戴著帽子和口罩，可以看出稍微施了一點粉黛，或撓頭或微笑或抿嘴，狀甚可愛

TOP

大學食堂

古有豆腐西施，現在新浪微博上曝出西南石油大學食堂出了一個『炒飯西施』，還稱男生因此愛上吃炒飯。據網友爆料，此美女出沒在西南石油大學學校二食堂炒飯視窗，除了『炒飯西施』還被戲稱為『最美食堂大媽』。

TOP

<body>

<div class="tab_container">
   <div id="tab1" class="tab_content">
 
<img src="http://image.wangchao.net.cn/yule/1231139567641.jpg" width="500" alt="Happy Birthday">
                <h2>豆腐西施</h2>
    <p>古有豆腐西施，現在新浪微博上曝出西南石油大學食堂出了一個「炒飯西施」，還稱男生因此愛上吃炒飯。據網友爆料，此美女出沒在西南石油大學學校二食堂炒飯視窗，除了「炒飯西施」還被戲稱為「最美食堂大媽」。</p><a style='float:left;margin-left:10px;' href="#">TOP</a>
   </div>
   <div id="tab2" class="tab_content">
    <img src="http://stock.591hx.com/images/hnimg/201309/26/35/9530322168224563259.jpg" width="500" alt="Calculator Widget">
                <h2>『炒飯西施』</h2>
    <p>『炒飯西施』穿著一整套的『炒飯衣』，繫著繡花格仔圍裙，戴著帽子和口罩，可以看出稍微施了一點粉黛，或撓頭或微笑或抿嘴，狀甚可愛</p><a style='float:left;margin-left:10px;' href="#">TOP</a>
   </div>
            
            <div id="tab3" class="tab_content">
    <img src="http://file.cbda.cn/uploadfile/2013/0906/20130906045023502.jpg" width="500" alt="My Card">
                <h2>大學食堂</h2>
    <p>古有豆腐西施，現在新浪微博上曝出西南石油大學食堂出了一個『炒飯西施』，還稱男生因此愛上吃炒飯。據網友爆料，此美女出沒在西南石油大學學校二食堂炒飯視窗，除了『炒飯西施』還被戲稱為『最美食堂大媽』。</p><a style='float:left;margin-left:10px;' href="#">TOP</a>
 
                </div>            
  </div> 
                 
 </div>
 
   
<script type="text/javascript">
 $(function(){
  // 預設顯示第一個 Tab
  var _showTab = 0;
  var $defaultLi = $('ul.tabs li').eq(_showTab).addClass('active');
  $($defaultLi.find('a').attr('href')).siblings().hide();
  
  // 當 li 頁籤被點擊時...
  // 若要改成滑鼠移到 li 頁籤就切換時, 把 click 改成 mouseover
  $('ul.tabs li').click(function() {
   // 找出 li 中的超連結 href(#id)
   var $this = $(this),
    _clickTab = $this.find('a').attr('href');
   // 把目前點擊到的 li 頁籤加上 .active
   // 並把兄弟元素中有 .active 的都移除 class
   $this.addClass('active').siblings('.active').removeClass('active');
   // 淡入相對應的內容並隱藏兄弟元素
   $(_clickTab).stop(false, true).fadeIn().siblings().hide();

return false;
  }).find('a').focus(function(){
   this.blur();
  });
 });
</script>

</body>
</html>

~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~

"你是獵人還是獵物？"

左右滑動式頁籤JQUERY網頁特效演示範例demo及語法

2013年9月27日星期五上午9:23 特效及語法 , Css , Html , Java , Jquery 發表意見

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

天堂特快車

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

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

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

TOP

<!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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUQf6HPAAPqVpkjcBhB4N-uwEB4MFNmFBe-mzIChkTZmSGrkqNUOXa-7gGHxWqNV6AmSowmOLEzJ_z49g0SEBJcyY2oZ-Pr_BgoGXrD297LZD5q1nM0L8zmbfbmGrMrp9yMyRMp8qtEC4/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>

"你是獵人還是獵物？"

滾筒式跑馬燈JQUERY網頁特效演示範例demo及語法

2013年9月27日星期五上午8:47 特效及語法 , Css , Html , Java , Jquery 發表意見

滾動式訊息跑馬燈

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh-tw">
<head>
<meta name="Generator" content="EditPlus" />
<meta name="Author" content="孟甲商行" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>滾動式訊息跑馬燈</title>
<style type="text/css">
 div#abgne_marquee {
  position: relative;
  overflow: hidden;
  width: 445px;
  height: 25px;
  border: 1px solid #ccc;
 }
 div#abgne_marquee ul, div#abgne_marquee li {
  margin: 0;
  padding: 0;
  list-style: none;
 }
 div#abgne_marquee ul {
  position: absolute;
    /* 往後推個 30px */
 }
 div#abgne_marquee ul li a {
  display: block;
  overflow: hidden; /* 超出範圍的部份要隱藏 */
  font-size:12px;
  height: 25px;
  line-height: 25px;
  
  text-decoration: none;
  
 }
 div#abgne_marquee ul li.b1 a {
  background-position: 5px 5px;
 }
 div#abgne_marquee ul li.b2 a {
  background-position: 5px -15px;
 }
 div#abgne_marquee ul li.b3 a {
  background-position: 5px -35px;
 }
 div#abgne_marquee div.marquee_btn {
  position: absolute;
  cursor: pointer;
 }
 
</style>
<script type="text/javascript">
 $(function(){
  // 先取得 div#abgne_marquee ul
  // 接著把 ul 中的 li 項目再重覆加入 ul 中(等於有兩組內容)
  // 再來取得 div#abgne_marquee 的高來決定每次跑馬燈移動的距離
  // 設定跑馬燈移動的速度及輪播的速度
  var $marqueeUl = $('div#abgne_marquee ul'),
   _marqueeUlHtml = $marqueeUl.html(),
   _height = $('div#abgne_marquee').height() * -1,
   scrollSpeed = 600,
   timer,
   speed = 3000 + scrollSpeed,
   direction = 0, // 0 表示往上, 1 表示往下
   _lock = false,
   _showItems = 4, // 一次顯示幾個
   _moveItems = 4; // 一次移動幾個
   
   $("div#abgne_marquee").css("height", _showItems * _height * -1); // 重新設定div的高度
  $("div#abgne_marquee div.marquee_btn").css("top", (_showItems - 1) * _height * -1 / 2); // 重新設定marquee_btn的margin-top

if(_showItems >= $marqueeUl.children('li').length) return;

$marqueeUl.animate({
    top: _now * _height
   }, scrollSpeed, function(){
    // 如果已經移動到第二組時...則馬上把 top 設回到第一組的最後一筆
    // 藉此產生不間斷的輪播

if(_now + _moveItems >= $marqueeli.length / 3 * 2){
     $marqueeUl.css('top', $marqueeli.length / 3 * _height - _height * ($marqueeli.length / 3 * 2 - _now));
    }else if(_now < $marqueeli.length / 3 ){
    
     $marqueeUl.css('top', $marqueeli.length / 3 * _height + (_height* _now));
    }
    _lock = !_lock;
   });
   
   // 再啟動計時器
   timer = setTimeout(showad, speed);
  }
  
  // 啟動計時器
  timer = setTimeout(showad, speed);
 
  $('a').focus(function(){
   this.blur();
  });
 });
</script>
</head>

<body>
<div id="abgne_marquee">
  
  <ul>
<li class="b1"><a href="http://eagle1024.blogspot.tw/2011/03/blog-post.html">【茶心茶】清涼一夏入口沁心甘甜！茶心茶包特價,行動拍檔隨身杯壺買一送一特價.冷泡茶秘訣.</a></li>
<li class="b2"><a href="http://eagle1024.blogspot.tw/2011/03/blog-post.html">【茶心茶】清涼一夏入口沁心甘甜！茶心茶包特價,行動拍檔隨身杯壺買一送一特價.冷泡茶秘訣</a></li>
<li class="b3"><a href="http://eagle1024.blogspot.tw/2011/07/blog-post_1594.html">【買一送茶】清涼一夏入口沁心甘甜！茶心茶包特價,行動拍檔隨身杯壺買一送一特價.冷泡茶秘訣</a></li>
<li class="b4"><a href="http://eagle1024.blogspot.tw/2011/07/blog-post_1594.html">[茶心茶】清涼一夏入口沁心甘甜！茶心茶包特價,行動拍檔隨身杯壺買一送一特價.冷泡茶秘訣</a></li>
<li class="b1"><a href="http://eagle1024.blogspot.tw/2011/03/blog-post.html">【買一送茶】清涼一夏入口沁心甘甜！茶心茶包特價,行動拍檔隨身杯壺買一送一特價.冷泡茶秘訣</a></li>
<li class="b2"><a href="http://eagle1024.blogspot.tw/2011/03/blog-post.html">【茶心茶】清涼一夏入口沁心甘甜！茶心茶包特價,行動拍檔隨身杯壺買一送一特價.冷泡茶秘訣</a></li>
<li class="b3"><a href="http://eagle1024.blogspot.tw/2011/07/blog-post_1594.html">[買一送一】清涼一夏入口沁心甘甜！茶心茶包特價,行動拍檔隨身杯壺買一送一特價.冷泡茶秘訣</a></li>
<li class="b4"><a href="http://eagle1024.blogspot.tw/2011/07/blog-post_1594.html">[買一送一】清涼一夏入口沁心甘甜！茶心茶包特價,行動拍檔隨身杯壺買一送一特價.冷泡茶秘訣</a></li>
</ul>
</div>
</body>
</html>

~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~

"你是獵人還是獵物？"

導航列變換圖文彈跳式頁籤選單 JQUERY網頁特效及語法

2013年9月26日星期四下午5:12 特效及語法 , Css , Html , Java , Jquery 發表意見

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh-tw">
<head>

</body>
</html>

~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~

"你是獵人還是獵物？"

首頁橫幅廣告自動輪播向上擠壓 JQUERY網頁特效演示範例demo及語法

2013年9月24日星期二上午11:00 特效及語法 , Css , Html , Java , Jquery 發表意見

入口網站首頁的Banner橫幅廣告，網路T Bar標示品牌及促銷訊息

~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~

"你是獵人還是獵物？"

圖片的滑出式說明描述JQUERY特效演示範例demo及語法

2013年9月24日星期二上午9:40 特效及語法 , Css , Html , Java , Jquery 發表意見

猛甲茶道

♣[孟甲商行]♣ | 分享與記錄關於Php,Css,Html,Java,Jquery 特效及語法等，也歡迎遇到以上任何問題都可到留言板或來信告知，我們將盡速答覆！

孟甲公司

可描述產品訊息及html語法。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh-tw">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<body>

<div class="abgne_tip_gallery_block">
  <a href="#"><img src="http://goo.gl/C4psy7"  width="450px" title="" alt="" /></a> 
  <div class="caption">
   <h2><a href="#" title="猛甲茶道">猛甲茶道</a></h2>
   <div class="desc" style="padding-right:10px;">
    ♣[孟甲商行]♣ | 分享與記錄關於Php,Css,Html,Java,Jquery 特效及語法等，也歡迎遇到以上任何問題都可到留言板或來信告知，我們將盡速答覆！
   </div>
  </div>
</div>

<br />

<div class="abgne_tip_gallery_block">
  <a href="#"><img src="http://goo.gl/rKVhdD" width="450px" title="" alt="" /></a> 
  <div class="caption">
   <h2><a href="#" title="猛甲茶道">孟甲公司</a></h2>
   <div class="desc">
    可描述產品訊息及html語法。
   </div>
  </div>
</div>  
<script type="text/javascript">
 $(function(){
  // 預設標題區塊 .abgne_tip_gallery_block .caption 的 top
  var _titleHeight = 55;
  $('.abgne_tip_gallery_block').each(function(){
   // 先取得區塊的高及標題區塊等資料
   var $this = $(this), 
    _height = $this.height(), 
    $caption = $('.caption', $this),
    _captionHeight = $caption.outerHeight(true),
    _speed = 200;
   
   // 當滑鼠移動到區塊上時
   $this.hover(function(){
    // 讓 $caption 往上移動
    $caption.stop().animate({
     top: _height - _captionHeight
    }, _speed);
   }, function(){
    // 讓 $caption 移回原位
    $caption.stop().animate({
     top: _height - _titleHeight
    }, _speed);
   });
  });
 });
</script>
</body>
</html>

~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~

"你是獵人還是獵物？"

不間斷的跑馬燈滑鼠移入就會自動停止移動圖片的演示範例DEMO及JavaScript語法

2013年9月20日星期五晚上7:59 特效及語法 , Css , Html , Java , Jquery 發表意見

<body>

<div style="clear:both;margin-left:-20px;margin-right:5px;">
 
        <script language="JavaScript1.2">
var sliderwidth="1000px"
var sliderheight="130px"
var slidespeed=1
slidebgcolor="transparent"

var leftrightslide=new Array()
var finalslide=''

leftrightslide[0]='<a href="http://happyplayer.net/shopping.php" ><img src="http://happyplayer.net/images/2201_1s.jpg" border=0></a>'
leftrightslide[1]='<a href="http://happyplayer.net/shopping.php" ><img src="http://happyplayer.net/images/2201_2s.jpg" border=0></a>'
leftrightslide[2]='<a href="http://happyplayer.net/shopping.php" ><img src="http://happyplayer.net/images/2201_3s.jpg" border=0></a>'
leftrightslide[3]='<a href="http://happyplayer.net/shopping.php" ><img src="http://happyplayer.net/images/2201_4s.jpg" border=0></a>'
leftrightslide[4]='<a href="http://happyplayer.net/shopping.php" ><img src="http://happyplayer.net/images/2201_5s.jpg" border=0></a>'
leftrightslide[5]='<a href="http://happyplayer.net/shopping.php" ><img src="http://happyplayer.net/images/2201_6s.jpg" border=0></a>'
leftrightslide[6]='<a href="http://happyplayer.net/shopping.php" ><img src="http://happyplayer.net/images/2201_7s.jpg" border=0></a>'
leftrightslide[7]='<a href="http://happyplayer.net/shopping.php" ><img src="http://happyplayer.net/images/2201_8s.jpg" border=0></a>'

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(" ")+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-10px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+10+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+10
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+30+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+30+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+30

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+30
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-100px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
    </script>
         
 </div>
</body>
</html>

~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~

"你是獵人還是獵物？"

Tea Road

Monga Shop

101時尚舍~豐富您的居家生活

HAPPY玩家帆布包購物網

統愛眼鏡大批發

公司形象網站+部落格+購物車+網路相簿

延齡國際股份有限公司

孟甲商行~專營南北雜貨茶葉

雅奕國際有限公司~專業經營人力派遣、外勞引進項目

台北市骨節整復職業工會

中華民國兩岸消費者保護協會

響應式網頁媒體查詢 Media Queries 及嵌入內容的基本設定教學

動畫響應式EDM廣告行銷設計

中華整復師總會資源網

中華整復師總會

中華公益慈善總會

A.M.C.T脊骨神經力學公共研究網

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

彈跳下拉式選單導航列標籤JQUERY網頁特效演示範例demo及語法

自動上下翻轉的橫幅廣告JQUERY網頁特效演示範例demo及語法

入口網站首頁的Banner橫幅廣告，網路T Bar標示品牌及促銷訊息

大學食堂「炒飯西施」走紅　男生因此愛上吃炒飯

豆腐西施

『炒飯西施』

大學食堂

左右滑動式頁籤JQUERY網頁特效演示範例demo及語法

天堂特快車

天堂鳥

天使降臨

滾筒式跑馬燈JQUERY網頁特效演示範例demo及語法

導航列變換圖文彈跳式頁籤選單 JQUERY網頁特效及語法

首頁橫幅廣告自動輪播向上擠壓 JQUERY網頁特效演示範例demo及語法

入口網站首頁的Banner橫幅廣告，網路T Bar標示品牌及促銷訊息

圖片的滑出式說明描述JQUERY特效演示範例demo及語法

猛甲茶道

孟甲公司

不間斷的跑馬燈滑鼠移入就會自動停止移動圖片的演示範例DEMO及JavaScript語法

聯絡我們

101時尚舍~豐富您的居家生活

HAPPY玩家帆布包購物網

統愛眼鏡大批發

公司形象網站+部落格+購物車+網路相簿

延齡國際股份有限公司

孟甲商行~專營南北雜貨茶葉

雅奕國際有限公司~專業經營人力派遣、外勞引進項目

台北市骨節整復職業工會

中華民國兩岸消費者保護協會

響應式網頁媒體查詢 Media Queries 及嵌入內容的基本設定 教學

動畫響應式EDM廣告行銷設計

中華整復師總會資源網

中華整復師總會

中華公益慈善總會

A.M.C.T脊骨神經力學公共研究網

入口網站首頁的Banner橫幅廣告，網路T Bar標示品牌及促銷訊息

豆腐西施

『炒飯西施』

大學食堂

天堂特快車

天堂鳥

天使降臨

入口網站首頁的Banner橫幅廣告，網路T Bar標示品牌及促銷訊息

聯 絡 我 們

響應式網頁媒體查詢 Media Queries 及嵌入內容的基本設定教學

聯絡我們