HTML DOM部分---做竖向横向的下拉导航 下拉菜单 图片轮播（圆点、箭头） 选项卡 进度条；
1，竖向下拉导航 鼠标单击打开 再打击关闭
<style> *{ margin:0px auto; padding:0px;} div{ width:100px; height:50px; background-color:#900; border:1px solid #000; text-align:center; vertical-align:middle; line-height:50px;} #biao{ cursor:pointer;} li{ width:100px; height:25px; background-color:#0F0; border:1px solid #F00; list-style:none; text-align:center; vertical-align:middle; line-height:25px; } </style> </head> <body> <div id="biao" onclick="biao(1)">标题1</div> <ul id="nei1" style=" display:none;"> <li>内容1</li> <li>内容2</li> <li>内容3</li> </ul> <div id="biao" onclick="biao(2)">标题2</div> <ul id="nei2" style=" display:none;"> <li>内容1</li> <li>内容2</li> <li>内容3</li> </ul> <div id="biao" onclick="biao(3)">标题3</div> <ul id="nei3" style=" display:none;"> <li>内容1</li> <li>内容2</li> <li>内容3</li> </ul> </body> </html> <script> function biao(n) { if(document.getElementById("nei"+n).style.display=="none") { document.getElementById("nei"+n).style.display="block"; } else{ document.getElementById("nei"+n).style.display="none"; } } </script>
2.横向下拉导航 鼠标放上显示 鼠标移开 关闭
<style> *{ margin:0px auto; padding:0px;} #aa{ width:100px; height:125px; float:left} #biao{ width:100px; height:50px; background-color:#900; border:1px solid #000; text-align:center; vertical-align:middle; line-height:50px;} #biao{ cursor:pointer;} #nei1{ display:none;} #nei2{ display:none;} #nei3{ display:none;} #nei4{ display:none;} #nei5{ display:none;} li{ width:100px; height:25px; background-color:#0F0; border:1px solid #F00; list-style:none; text-align:center; vertical-align:middle; line-height:25px; } </style> </head> <body> <div id="aa"> <div id="biao" onmouseover="biao(1)" onmouseout="biao1(1)">标题1</div> <ul id="nei1"> <li>内容1</li> <li>内容2</li> <li>内容3</li> </ul> </div> <div id="aa"> <div id="biao" onmouseover="biao(2)" onmouseout="biao1(2)">标题2</div> <ul id="nei2"> <li>内容1</li> <li>内容2</li> <li>内容3</li> </ul> </div> <div id="aa"> <div id="biao" onmouseover="biao(3)" onmouseout="biao1(3)">标题3</div> <ul id="nei3"> <li>内容1</li> <li>内容2</li> <li>内容3</li> </ul> </div> <div id="aa"> <div id="biao" onmouseover="biao(4)" onmouseout="biao1(4)">标题4</div> <ul id="nei4"> <li>内容1</li> <li>内容2</li> <li>内容3</li> </ul> </div> <div id="aa"> <div id="biao" onmouseover="biao(5)" onmouseout="biao1(5)">标题5</div> <ul id="nei5"> <li>内容1</li> <li>内容2</li> <li>内容3</li> </ul> </div> </body> </html> <script> function biao(n) { document.getElementById("nei"+n).style.display="block"; } function biao1(n) { document.getElementById("nei"+n).style.display="none"; } </script>
3.下拉菜单
<style type="text/css"> *{ margin:0px auto; padding:0px} #xiala{ width:200px; height:40px; border:1px solid #999;text-align:center; line-height:40px; vertical-align:middle;} #xiala:hover{ cursor:pointer} .list{ width:200px; height:40px; text-align:center; line-height:40px; vertical-align:middle; border:1px solid #999; border-top-width:0px; display:none} .list:hover{ cursor:pointer; background-color:#63C; color:white;} </style> </head> <body> <br /> <div style="width:500px; height:500px;"> <div id="xiala" onclick="showa()"></div> <div class="list" onclick="xuan(this)">山东</div> <div class="list" onclick="xuan(this)">北京</div> <div class="list" onclick="xuan(this)">上海</div> <div class="list" onclick="xuan(this)">深圳</div> <div class="list" onclick="xuan(this)">广州</div> </div> <script type="text/javascript"> function showa() { var list = document.getElementsByClassName("list"); for(var i=0; i<list.length;i++) { list[i].style.display = "block"; } } function xuan(a) { var nr = a.innerHTML; document.getElementById("xiala").innerHTML=nr; var list = document.getElementsByClassName("list"); for(var i=0; i<list.length;i++) { list[i].style.display = "none"; } } </script>
4.图片轮播 加图片下方圆点 利用让图片显示与隐藏的思想做轮播
<style type="text/css"> *{ margin:0px auto; padding:0px} #tp{ width:100%; height:350px} .img{ display:none} #dian{ width:200px; height:15px; position:relative; top:-25px} .yuan{ width:13px; height:13px; float:left; margin-left:20px; border:2px solid #F00;border-radius:100px; background-color:#FFF} .yuan:hover{ cursor:pointer} </style> </head> <body> <div id="tp"> <img style="display:block" class="img" src="../1027汉企实训/项目/图片/借鉴图片.jpg" width="100%" height="350" /> <img class="img" src="../1027汉企实训/项目/图片/拒绝雾霾.jpg" width="100%" height="350" /> <img class="img" src="../1027汉企实训/项目/图片/雾霾.jpg" width="100%" height="350" /> <img class="img" src="../1027汉企实训/项目/图片/雾霾原因.jpg" width="100%" height="350" /> <img class="img" src="../1027汉企实训/项目/图片/原因1.jpg" width="100%" height="350" /> </div> <div id="dian"> //写图片下方圆点 <div bs="0" class="yuan" onclick="xianshi(this,'0')"></div> <div bs="1" class="yuan" onclick="xianshi(this,'1')"></div> <div bs="2" class="yuan" onclick="xianshi(this,'2')"></div> <div bs="3" class="yuan" onclick="xianshi(this,'3')"></div> <div bs="4" class="yuan" onclick="xianshi(this,'4')"></div> </div> <script type="text/javascript"> //图片索引 var sy = 0; //间隔调用 window.setInterval("Huan()",3000); //调一下换一个 function Huan() { var img = document.getElementsByClassName("img"); sy++; //索引加1 //判断是否到了最后一张 if(sy>=img.length) { sy=0; } //让所有隐藏 for(var i=0;i<img.length;i++) { img[i].style.display="none"; } //让下一张显示 img[sy].style.display="block"; //换圆点的样式 var yuan = document.getElementsByClassName("yuan"); for(var j=0;j<yuan.length;j++) { if(yuan[j].getAttribute("bs")==sy) { yuan[j].style.borderColor = "green"; } else { yuan[j].style.borderColor = "red"; } } } function xianshi(t,s) { sy=s; var img = document.getElementsByClassName("img"); //让所有隐藏 for(var i=0;i<img.length;i++) { img[i].style.display="none"; } //让下一张显示 img[s].style.display="block"; //改自身样式 var yuan = document.getElementsByClassName("yuan"); for(var j=0;j<yuan.length;j++) { yuan[j].style.borderColor="red"; } t.style.borderColor="green"; } </script> </body>
利用更换外框背景的思想，做轮播
<style> *{ margin:0px auto; padding:0px; font-style:"微软雅黑"；} #waikuang{ width:760px; height:350px; background-repeat:no-repeat; border:1px solid #C00; background-image:url(../../%E9%A1%B9%E7%9B%AE/%E5%9B%BE%E7%89%87/%E5%8E%9F%E5%9B%A01.jpg)} .page{ top:200px; background-color:#000; background-position:center; background-repeat:no-repeat; opacity:0.4; width:30px; height:60px;border:1px solid #C00;} #p1{ background-image:url(../../%E9%A1%B9%E7%9B%AE/%E7%AE%AD%E5%A4%B4/%E5%B7%A6.png); float:left; margin:150px 0px 0px 10px;} #p2{ background-image:url(../../%E9%A1%B9%E7%9B%AE/%E7%AE%AD%E5%A4%B4/%E5%8F%B3.png);float:right; margin:150px 10px 0px 0px;} </style> </head> <body> <div id="waikuang"> <div class="page" id="p1" onclick="dodo(-1)"></div> <div class="page" id="p2" onclick="dodo(1)"></div> </div> </body> </html> <script> var jpg=new Array(); jpg[0]="url(../../%E9%A1%B9%E7%9B%AE/%E5%9B%BE%E7%89%87/%E5%80%9F%E9%89%B4%E5%9B%BE%E7%89%87.jpg)"; jpg[1]="url(../../%E9%A1%B9%E7%9B%AE/%E5%9B%BE%E7%89%87/%E6%8B%92%E7%BB%9D%E9%9B%BE%E9%9C%BE.jpg)"; jpg[2]="url(../../%E9%A1%B9%E7%9B%AE/%E5%9B%BE%E7%89%87/%E9%9B%BE%E9%9C%BE.jpg)"; var wk=document.getElementById("waikuang"); var biao=0; var n=0; function huan() { biao++; if(biao==jpg.length) { biao=0; } wk.style.backgroundImage=jpg[biao]; if(n==0) { window.setTimeout("huan()",3000); } } function dodo(m) { n=1; biao=biao+m; if(biao<0) { biao=jpg.length-1; } else if(biao>=jpg.length) { biao=0; } wk.style.backgroundImage=jpg[biao]; } window.setTimeout("huan()",3000) </script>
5选项卡
<style type="text/css"> *{ margin:0px auto; padding:0px} #fenlei{ width:500px; height:35px;} .xiang{ float:left; width:100px; height:35px; text-align:center; line-height:35px; vertical-align:middle;} .xiang:hover{ cursor:pointer} .xuanxiang{ width:500px; height:300px; display:none} #guonei{ background-color:#63C; display:block} #guoji{ background-color:#3C9} #tiyu{ background-color:#C36} #yule{ background-color:#FF6} </style> </head> <body> <br /> <div id="fenlei"> <div class="xiang" style="background-color:#63C" onclick="showa('guonei')">国内新闻</div> <div class="xiang" style="background-color:#3C9" onclick="showa('guoji')">国际新闻</div> <div class="xiang" style="background-color:#C36" onclick="showa('tiyu')">体育新闻</div> <div class="xiang" style="background-color:#FF6" onclick="showa('yule')">娱乐新闻</div> </div> <div id="guonei" class="xuanxiang"> </div> <div id="guoji" class="xuanxiang"> </div> <div id="tiyu" class="xuanxiang"> </div> <div id="yule" class="xuanxiang"> </div> <script type="text/javascript"> function showa(d) { var div = document.getElementById(d); var suoyou = document.getElementsByClassName("xuanxiang"); for(var i=0;i<suoyou.length;i++) { suoyou[i].style.display = "none"; } div.style.display = "block"; } </script>
6进度条
<style type="text/css"> *{ margin:0px auto; padding:0px} #kuang{ width:200px; height:10px; border:1px solid #60F;} #jindu{ height:10px; background-color:#F03; float:left} </style> </head> <body> <br /> <div id="kuang"> <div id="jindu" style="width:0px"></div> </div> <script type="text/javascript"> window.setTimeout("jindu()",30); //调一下进度前进1% function jindu() { //获取进度div的宽度 var div = document.getElementById("jindu"); //获取到的是字符串"0px" var str = div.style.width; //处理字符串获取数字 var cd = str.substr(0,str.length-2); //判断长度是否到最大值 if(cd<200) { //将长度转为整数加2 var cd = parseInt(cd)+2; //让进度的DIV长度变为cd div.style.width = cd+"px"; //调用自身 window.setTimeout("jindu()",30); } } </script>
7.横向选项卡，下拉显示的内容有选中状态
<style> *{ margin:0px auto; padding:0px;} #aa{ width:100px; height:125px; float:left} #biao{ width:100px; height:50px; background-color:#900; border:1px solid #000; text-align:center; vertical-align:middle; line-height:50px;} #biao{ cursor:pointer;} #nei1{ display:none;} #nei2{ display:none;} li{ width:100px; height:25px; background-color:#66F; border:1px solid #F00; list-style:none; text-align:center; vertical-align:middle; line-height:25px; } </style> </head> <body> <div id="aa"> <div id="biao" onmouseover="biao(1)" onmouseout="biao1(1)">标题1</div> <ul id="nei1" onmouseover="biao(1)" onmouseout="biao1(1)"> <li class="nr" onmouseover="bian(this)" onmouseout="huifu()">内容1</li> <li class="nr" onmouseover="bian(this)" onmouseout="huifu()">内容2</li> <li class="nr" onmouseover="bian(this)" onmouseout="huifu()">内容3</li> </ul> </div> <div id="aa"> <div id="biao" onmouseover="biao(2)" onmouseout="biao1(2)">标题2</div> <ul id="nei2" onmouseover="biao(2)" onmouseout="biao1(2)"> <li class="nr" onmouseover="bian(this)" onmouseout="huifu()">内容1</li> <li class="nr" onmouseover="bian(this)" onmouseout="huifu()">内容2</li> <li class="nr" onmouseover="bian(this)" onmouseout="huifu()">内容3</li> </ul> </div> </body> </html> <script> function biao(n) { document.getElementById("nei"+n).style.display="block"; } function biao1(n) { document.getElementById("nei"+n).style.display="none"; } function bian(d) { //清 var list = document.getElementsByClassName("nr"); for(var i=0;i<list.length;i++) { if(list[i].getAttribute("bs")!="1") { list[i].style.backgroundColor = "#66F"; } } //选 d.style.backgroundColor = "#F33"; } function huifu() { var list = document.getElementsByClassName("nr"); for(var i=0;i<list.length;i++) { if(list[i].getAttribute("bs")!="1") { list[i].style.backgroundColor = "#66F"; } } } </script> </body> </html>
8，div+css模拟做下拉列表
<style type="text/css"> * { margin:0px; padding:0px; } body { font-fwbily: Arial, Helvetica, sans-serif; font-size: 12px; } .cur { cursor:pointer; display:block; color:#788F72; width:71px; height:22px; line-height:22px; padding:0px 0px 0px 2px; } .wb { border: 0px; color:#788F72; cursor: pointer; background: url(http://www.codefans.net/jscss/demoimg/201111/icon_111.jpg) no-repeat center center; border:1px #ccc solid; display:block; cursor:pointer; width:73px; height: 19px; margin:10px 0px 0px 10px; padding:3px 0px 0px 2px; } .kuang { border: 1px #999999 solid; width:73px; margin-left:10px; } </style> </head> <body> <input onclick="hide('cc')" type="text" value="请选择" id="wb" class="wb" /> <div id="cc" style="display: none " class="kuang"> <div id="a1" onclick="dj('测试一')" onMouseOver="bgcolor('a1')" onMouseOut="nocolor('a1')" class="cur">测试一</div> <div id="a2" onclick="dj('测试二')" onMouseOver="bgcolor('a2')" onMouseOut="nocolor('a2')" class="cur">测试二</div> <div id="a3" onclick="dj('测试三')" onMouseOver="bgcolor('a3')" onMouseOut="nocolor('a3')" class="cur">测试三</div> <div id="a4" onclick="dj('测试四')" onMouseOver="bgcolor('a4')" onMouseOut="nocolor('a4')" class="cur">测试四</div> <div id="a5" onclick="dj('测试五')" onMouseOver="bgcolor('a5')" onMouseOut="nocolor('a5')" class="cur">测试五</div> <div id="a6" onclick="dj('测试六')" onMouseOver="bgcolor('a6')" onMouseOut="nocolor('a6')" class="cur">测试六</div> </div> </body> </html> <script type="text/javascript" > function aa(bb){ return document.getElementById(bb); } function hide(bb) {aa(bb).style.display = aa(bb).style.display == "none" ? "" : "none";} function dj(v) { document.getElementById('wb').value=v; hide('cc') } function bgcolor(id){ document.getElementById(id).style.background="#F7FFFA"; document.getElementById(id).style.color="#000"; } function nocolor(id){ document.getElementById(id).style.background=""; document.getElementById(id).style.color="#788F72"; } </script>
9.js做大图轮播
<style> ul{ margin: 0; padding: 0; list-style: none; } .sliderWrap{ width: 200px; height: 112px; overflow: hidden; margin: 0 auto; } .sliderWrap ul{ position: relative; width: 1000px; transition: left .5s ease; left: 0; } .sliderWrap li{ position: relative; float: left; } .sliderWrap ul li img{ width: 100%; } </style> </head> <body> <div class="sliderWrap"> <ul id="slider"> <li><img src="file/2017031316082714872975652365568.JPG" alt=""></li> <li><img src="file/2017031316082714872975652365568.JPG" alt=""></li> <li><img src="file/2017031316082714872975652365568.JPG" alt=""></li> <li><img src="file/2017031316082714872975652365568.JPG" alt=""></li> </ul> </div> <input type="button" value="click me" id="next"/> <script> /** * 图片轮播 * @type {Element} */ var btn = document.getElementById("next"); var dom = document.getElementById("slider"); var liArr = dom.getElementsByTagName("li"); var curWidth = 200; var ulWidth = curWidth * liArr.length; var show = []; var circle = []; var goAway = "translate(-" + curWidth +"px, 0) translateZ(0px)"; var goIn = "translate(0, 0) translateZ(0px)"; var goPre = "translate(" + curWidth +"px, 0) translateZ(0px)"; //保证所有li在ul中能在一行内放下 dom.style.width = ulWidth + "px"; for(var i = 0, len = liArr.length; i < len; i++){ var curLi = liArr[i]; curLi.setAttribute("data-index", i); curLi.style.width = curWidth + "px"; if(i == 0){ curLi.style.left = 0; show.push(curLi); }else{ curLi.style.left = - curWidth * i + "px"; if(i > 1){ translate(curLi, goAway, '') circle.push(curLi); }else{ show.push(curLi); translate(curLi, goPre, ''); } } } circle.reverse(); btn.onclick = function(){ //已展示的图片滚粗 var showFirst = show.shift(); translate(showFirst, goAway, "300ms"); //正在展示的图片 translate(show[0], goIn, "300ms"); circle.splice(0, 0, showFirst); //准备好下一个将要展示的图片 var nextPre = circle.pop(); translate(nextPre, goPre, "0ms"); show.push(nextPre); }; function translate(dom, goType, time){ dom.style.transform = dom.style.webkitTransform = dom.style.mozTransform = dom.style.msTransform = dom.style.oTransform = goType; dom.style.transitionDuration = dom.style.webkitTransitionDuration = dom.style.mozTransitionDuration = dom.style.msTransitionDuration = dom.oTransitionDuration = time; } </script> </body> </html>
