JS implements imitation Sina yellow classic sliding door effect code

Home

Web Front-end

JS Tutorial

JS implements imitation Sina yellow classic sliding door effect code_javascript skills

May 16, 2016 pm 03:37 PM

js sliding door

The example in this article describes the JS code to implement the imitation Sina yellow classic sliding door effect. Share it with everyone for your reference. The details are as follows:

This is a sliding door imitated by Sina.com. It is yellow and classic. The operation comfort is really comfortable. It is a portal. You have to modify the length and width yourself. The layout is compact and reasonable. I like the style.

The screenshot of the running effect is as follows:

The online demo address is as follows:

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

The specific code is as follows:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt;
&lt;title&gt;新浪滑动门&lt;/title&gt;
&lt;style type="text/css"&gt;
*{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;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script language="javascript" type="text/javascript"&gt;
function Show_TabADSMenu(tabadid_num,tabadnum){
  for(var i=0;i&lt;4;i++){document.getElementById("tabadcontent_"+tabadid_num+i).style.display="none";}
  for(var i=0;i&lt;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";
}
&lt;/script&gt;
&lt;div class="TabADS"&gt;
&lt;ul&gt;
&lt;li id="tabadmenu_10" onmouseover="setTimeout('Show_TabADSMenu(1,0)',200);" class="TasADSOn"&gt;VB&lt;/li&gt;
&lt;li id="tabadmenu_11" onmouseover="setTimeout('Show_TabADSMenu(1,1)',200);"&gt;ASP&lt;/li&gt;
&lt;li id="tabadmenu_12" onmouseover="setTimeout('Show_TabADSMenu(1,2)',200);"&gt;PHP&lt;/li&gt;
&lt;li id="tabadmenu_13" onmouseover="setTimeout('Show_TabADSMenu(1,3)',200);"&gt;cgi&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="TabADSCon"&gt;
&lt;ul id="tabadcontent_10"&gt;
&lt;li&gt;&lt;a href="#" target="_blank"&gt;基于VC的推箱子游戏&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;ul id="tabadcontent_11" style="display:none;"&gt;
&lt;li&gt;&lt;a href="#" target="_blank"&gt;VB批量更改文件名(重命名)程序&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;ul id="tabadcontent_12" style="display:none;"&gt;
&lt;li&gt;&lt;a href="#" target="_blank"&gt;VC++ 五子棋游戏进阶版源码&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;ul id="tabadcontent_13" style="display:none;"&gt;
&lt;li&gt;&lt;a href="#" target="_blank"&gt;精美多模式DELPHI闹钟程序&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn