JS melaksanakan kemahiran kesan kod_javascript kesan pintu gelangsar klasik kuning Sina kuning-tutorial js-php.cn

JS melaksanakan kemahiran kesan kod_javascript kesan pintu gelangsar klasik kuning Sina kuning

WBOY

Lepaskan： 2016-05-16 15:37:50

asal

1678 orang telah melayarinya

Contoh dalam artikel ini menerangkan kod JS untuk melaksanakan kesan pintu gelangsar klasik kuning Sina tiruan. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini adalah pintu gelangsar yang ditiru oleh Sina.com. Keselesaan operasinya sangat selesa. Anda perlu mengubahsuai sendiri suka gaya.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-f-sina-jd-move-style-demo/

Kod khusus adalah seperti berikut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新浪滑动门</title>
<style type="text/css">
*{font:12px "宋体";margin:0;padding:0;}
ul{list-style: none;}
a{text-decoration: none;}
a:hover{text-decoration: underline;}
.TabADS{width:160px;}
.TabADS ul{width:160px; height:24px;background:#fff;}
.TabADS li{width:40px; float:left; height:18px; padding:6px 0 0 0; background:url(images/sinahome_ws_013.gif) no-repeat right #e4e4e4; text-align:center; color:#333; cursor:pointer;}
.TabADS .TasADSOn{background:url(images/sinahome_ws_012.gif) no-repeat right #ffe4a6; text-align:center; color:#333; font-weight:bold; cursor:pointer;}
.TabADSCon{background:#FFD77B;padding:5px;width:150px;}
.TabADSCon li{text-align:left; line-height:20px;}
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
function Show_TabADSMenu(tabadid_num,tabadnum){
  for(var i=0;i<4;i++){document.getElementById("tabadcontent_"+tabadid_num+i).style.display="none";}
  for(var i=0;i<4;i++){document.getElementById("tabadmenu_"+tabadid_num+i).className="";}
  document.getElementById("tabadmenu_"+tabadid_num+tabadnum).className="TasADSOn";
  document.getElementById("tabadcontent_"+tabadid_num+tabadnum).style.display="block";
}
</script>
<div class="TabADS">
<ul>
<li id="tabadmenu_10" onmouseover="setTimeout('Show_TabADSMenu(1,0)',200);" class="TasADSOn">VB</li>
<li id="tabadmenu_11" onmouseover="setTimeout('Show_TabADSMenu(1,1)',200);">ASP</li>
<li id="tabadmenu_12" onmouseover="setTimeout('Show_TabADSMenu(1,2)',200);">PHP</li>
<li id="tabadmenu_13" onmouseover="setTimeout('Show_TabADSMenu(1,3)',200);">cgi</li>
</ul>
</div>
<div class="TabADSCon">
<ul id="tabadcontent_10">
<li><a href="#" target="_blank">基于VC的推箱子游戏</a></li>
</ul>
<ul id="tabadcontent_11" style="display:none;">
<li><a href="#" target="_blank">VB批量更改文件名(重命名)程序</a></li>
</ul>
<ul id="tabadcontent_12" style="display:none;">
<li><a href="#" target="_blank">VC++ 五子棋游戏进阶版源码</a></li>
</ul>
<ul id="tabadcontent_13" style="display:none;">
<li><a href="#" target="_blank">精美多模式DELPHI闹钟程序</a></li>
</ul>
</div>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu pengaturcaraan JavaScript semua orang.