zoukankan html css js c++ java

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="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="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>

查看全文

相关阅读:
js禁止页面回退,刷新,右键代码
 asp.net网站中的Gridview循环判断数据是否被选中
 Gridview中同时选中并删除多个数据
 asp.net中在后台更换控件图片的代码
 关于gcd的8题
 flash AIR 通过BitmapData生成图片到android Camera相册
 flash AIR 通过BitmapData生成图片到本地
 C的随机数
 xcode svn设置事项
 拒绝session丢失利用DIV层实现对模态窗口的模拟

原文地址：https://www.cnblogs.com/xingyue1988/p/6052749.html

HTML DOM部分---做竖向横向的下拉导航 下拉菜单 图片轮播（圆点、箭头） 选项卡 进度条；

HTML DOM部分---做竖向横向的下拉导航下拉菜单图片轮播（圆点、箭头）选项卡进度条；