導航列 變換圖文 彈跳式頁籤選單 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 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> <script type="text/javascript" src="http://hala999.net/js/jquery.easing.1.3.js"></script> <title>孟甲商行</title> <style type="text/css"> #menu { margin: 20px 0 0; padding: 0; height: 62px; /* 選單圖片的高 */ list-style: none; overflow: hidden; width: 432px; /* 98 * 4 + 5 * 8 */ border-bottom: 1px solid #ccc; } #menu li { float: left; padding: 0 5px; } #menu li a { display: block; width: 98px; /* 選單圖片的寬 */ height: 62px; /* 選單圖片的高 */ line-height: 62px; /* ie suck */ text-indent: -9999px; margin-top: 31px; /* 需要設定為圖片寬/2 */ background-repeat: no-repeat; } #menu li a:hover { margin-top: 1px; /* 當滑鼠移到選單上時*/ } /* 幫每一個 A 連結都加入不同選單圖片 */ .home {background:url(http://goo.gl/c1YH4E);} .car {background:url(http://goo.gl/f91IAE);} .good {background:url(http://goo.gl/cdHu0w);} .query {background:url(http://goo.gl/OIWBfh);} </style> <script type="text/javascript"> $(function(){ // 幫 A 連結加上 hover() 事件 $("#menu li a").hover(function(){ // 當滑鼠移進時.. // 先停止未完成的動畫再進行新的動畫 // 變更 margin-top $(this).a().animate({ marginTop: 1 }, 200); }, function(){ // 當滑鼠移出時.. // 先停止未完成的動畫再進行新的動畫 // 變更 margin-top // 動畫效果加上 easeOutBounce $(this).hover().animate({ marginTop: 31 }, 200, "easeOutBounce"); }).focus(function(){ // 當 A 連結取得焦點時.. // 讓本身失去焦點 $(this).blur(); }); }); </script> </head> <body> <ul id="menu"> <li><a href="#" class="home">首頁</a></li> <li><a href="#" class="car">購物車</a></li> <li><a href="#" class="good">推薦商品</a></li> <li><a href="#" class="query">訂單查詢</a></li> </ul> </body> </html>

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

閱讀更多

"你是獵人還是獵物？"

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <meta http-equiv="Content-Language" content="zh-tw"> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <title>Jquery</title> <script type="text/javascript" src="http://hala999.net/js/jquery-1.2.1.pack.js"></script> <script type="text/javascript" > $(document).ready(function(){ var divname='#show'; var myindex=divname+' img'; var mysize=$(myindex).size(); var myend=mysize-1; var myfirst=divname+' img:eq(0)'; var mylast=divname+' img:eq('+myend+')'; var temp; doshow(); function doshow(){ temp=$(myfirst).clone(); $(myfirst).animate({ width: "500px", height: "0px" }, 3000,function(){ $(myfirst).remove(); $(divname).append(temp); $(mylast).attr({height:"375px"}); setTimeout(doshow,300); $(divname).mouseover(function(){ $(divname).stop(); clearTimeout(0); },function(){ //doit(); }); }); } }); </script> <style type="text/css"> html { background-color:#9FA0A0; } img{ border:1px black } .img { position:absolute; clip:rect(0px 502px 377px 0px) } </style> </head> <body> <div id=show class=img><a href="#"><img border="0" src="http://goo.gl/C4psy7"></a><img border="0" src="http://goo.gl/j1Cu3e"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFXvGJ8xxE9pYPjOsote6DOIupx9XmpO2BiEI61SMMVGJT0g8pjM0zllAdVXHkB185CVg4oAb78cHSMJXJrMly0ybuSe0ezC7Jsl3JSjeVWXft5u610EZMqsfcoioUOvDBIaqoBc7xDy0/s500/4.3.1.jpg"><img border="0" src="http://goo.gl/j1Cu3e"></div> </body> </html>

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

閱讀更多

"你是獵人還是獵物？"

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

猛甲茶道

♣[孟甲商行]♣ | 分享與記錄關於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" /> <title>孟甲公司</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <style type="text/css"> .abgne_tip_gallery_block { margin: 0; padding: 0; width: 450px; height: 250px; overflow: hidden; position: relative; } .abgne_tip_gallery_block img { position: absolute; border: 0; } .abgne_tip_gallery_block .caption { position: absolute; top: 195px; /* .abgne_tip_gallery_block 的高 - 想顯示 title 的高(這邊是設 55) */ width: 450px; /* .abgne_tip_gallery_block 的寬 - .caption 的左右 padding */ padding: 15px 10px 20px; cursor: pointer; color: #fff; background: url(http://goo.gl/8nT7pc) repeat;opacity:0.7; } .abgne_tip_gallery_block .caption h2 { margin: 0; padding: 0px 0px 15px; } .abgne_tip_gallery_block .caption h2 a { text-decoration: none; color: #fc6; } .abgne_tip_gallery_block .caption h2 a:hover { text-decoration: underline; } </style> </head> <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語法

<!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> </head> <body> <div style="clear:both;margin-left:-20px;margin-right:5px;"> <!-- slideshow starts --> <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> <!-- Slideshow ends --> </div> </body> </html>

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

閱讀更多

"你是獵人還是獵物？"