Home >Web Front-end >JS Tutorial >JS CSS implements simple sliding door effect code_javascript skills

JS CSS implements simple sliding door effect code_javascript skills

WBOYOriginal: 2016-05-16 15:38:111611browse

The example in this article describes how to implement a simple sliding door effect code using JS CSS. Share it with everyone for your reference. The details are as follows:

After reading a lot of information about sliding doors and sliding menus, I finally came up with a decent sliding door. Although it doesn’t look very good, it is compatible with Firefox. Seniors please don’t laugh. I’ll ask you for more in the future. Everyone criticizes.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-css-simple-hdtx-demo-codes/

The specific code is as follows:

<!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=gb2312" />
<title>学习练手写下个简易的滑动门</title>
<style>
*{
margin:0px;
padding:0px;
font-size:9pt;
}
#tab{width:400px;
height:auto;
margin:0 auto;
}
ul{list-style:none; margin-left:20px;}
li{ float:left;height:30px;background:url(15.jpg);margin:0 5px;text-align:center;line-height:30px;color:#293863;width:60px; position:relative;bottom:-3px;}/*margin;那里调节各个li之间的距离,position是保证下边框的出现*/
.dise{display:block;}
.undise{display:none;}
.fff{background:
url(images/tr.jpg);}
#all{clear:left; width:400px;}
#all div{width:400px;background-color:#F2F5FA;text-align:left;line-height:20px; height:200px;
border:1px #CCCDCD solid; }/*一定要设border*/
}
</style>
</head>
<script language="javascript">
function g(o){return document.getElementById(o);}
function showdiv(i){
for(j=1;j<=3;j++){
g("div"+j).className="undise"//将三个都设为undise，以便将来可以设置显示的那个；
g("li"+j).className=""//消除原来所有li的属性
}
g("div"+i).className="dise"
g("li"+i).className="fff"
}
function showdiv1(i){
for(j=4;j<=6;j++){
g("div"+j).className="undise"//将三个都设为undise，以便将来可以设置显示的那个；
g("li"+j).className=""//消除原来所有li的属性
}
g("div"+i).className="dise"
g("li"+i).className="fff"
}
</script>
<body>
 <div div id="tab">
  <ul>
  <li id="li1" class="fff"><span onmouseover="showdiv(1)">世界的中国</span></li>
  <li id="li2"><span onmouseover="showdiv(2)">网页特效</span></li>
  <li id="li3"><span href="#" onmouseover="showdiv(3)">脚本代码</span></li>
  </ul>
 <div id="all">
  <div id="div1" class="dise">学习型源码下载站。</div>
  <div id="div2" class="undise">精选网页特效，应有尽有~</div>
  <div id="div3" class="undise">高质量脚本代码资源随您下载！</div> 
 </div>
 </div>
</body>
</html>

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

Statement：

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

Previous article：jQuery EasyUI realizes the effect of graying out the right-click menu_jqueryNext article：jQuery EasyUI realizes the effect of graying out the right-click menu_jquery

See more

JS CSS implements simple sliding door effect code_javascript skills

Related articles