js例子

1.子菜单下拉

<!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=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{

    margin:0px auto;

    padding:0px;

    }

#caidanwai{

    width:800px;

    height:40px;

    margin-top:100px;

    }

#meau{

    width:404px;

    height:40px;

    border:1px solid #99F;

    }

.list{

    float:left;

    width:100px;

    height:40px;

    text-align:center;

    line-height:40px;

    vertical-align:middle;

    border-right:1px solid #99F;

    }

.erji{

    width:0px;

    height:0px;

    float:left;

    }

.erjiwai{

    width:100px;

    height:120px;

    border:1px solid #99F;

    position:relative;

    top:41px;

    left:-102px;

    display:none;

    }

.leixing{

    width:100px;

    height:39px;

    text-align:center;

    line-height:40px;

    vertical-align:middle;

    border-bottom:1px solid #99F;

    }

</style>

</head>

<body>

<div id="caidanwai">

    <div id="meau">

        <div class="list" onmouseover="show('chanpin')" onmouseout="hide('chanpin')" >产品中心</div>

            <div class="erji">

                <div class="erjiwai" id="chanpin" onmouseover="xuanzhong(this)" onmouseout="yinc(this)">

                    <div class="leixing">食品</div>

                    <div class="leixing">家电</div>

                    <div class="leixing">手机</div>

                </div>

            </div>

        <div class="list" onmouseover="show('xinwen')" onmouseout="hide('xinwen')">新闻中心</div>

        <div class="erji">

                <div class="erjiwai" id="xinwen" onmouseover="xuanzhong(this)" onmouseout="yinc(this)">

                    <div class="leixing">体育</div>

                    <div class="leixing">娱乐</div>

                    <div class="leixing">军事</div>

                </div>

            </div>

        <div class="list">联系我们</div>

        <div class="list">关于我们</div>

    </div>

</div>

</body>

<script type="text/javascript">

function show(id){//点击显示下拉菜单

    var a=document.getElementById(id);

    a.style.display="block";

    }

function hide(id){//鼠标离开下来菜单隐藏

    var a=document.getElementById(id);

    a.style.display="none";

    }

function xuanzhong(a){

    a.style.display="block";

    }

 function yinc(a){

    a.style.display="none";

    }

</script>

</html>

我的问题有：再打代码时打错单词导致实现不了，还有就是，onmouseover，onmousemove用法有些不熟悉

2.图片轮播

<!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=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{

    margin:0px auto;

    padding:0px;

    }

#wai{

    width:1000px;

    height:500px;

    }

</style>

</head>

<body>

    <div id="wai" >

        <img  class="img" src="try/t0184016d6010089f01.jpg" width="" height="" />

        <img class="img" src="try/t01ec98d422ed9fab4a.jpg" width="" height="" style="display:none"/>

        <img  class="img" src="try/t017f330eeb8de34fc2.jpg" width="" height="" style="display:none"/>

</div>

</body>

<script type="text/javascript">

var img=document.getElementsByClassName("img");

var i=;

huan();

function huan(){

    xianshi();

    if(i>=img.length-){

        i=;

    }else{

        i++;

        }

    window.setTimeout("huan()",);

    }

function xianshi(){

    for(var a=;a<img.length;a++){

        img[a].style.display="none";

        }

    img[i].style.display="block";

    }

</script>

</html>

问题有：尝试用for循环，使用i代表循环次数和图片索引，没有完成

/*function huan(){

for(i=0;i<img.length-1;i++){

    img[i].style.display="block";

    if(i>=img.length-1){

        i=0

        }

    }

img[i].style.display="none";

window.setTimeout("huan()",2000);

}*/

3.选项卡效果

<!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=utf-8" />

<title>无标题文档</title>

<style type="text/css" >

*{

    margin:0px auto;

    padding:0px;

    }

#xuan{

    width:400px;

    height:30px;

    }

.wai{width:100px;

    height:30px;

    margin-top:100px;

    float:left}

.nei{

    width:800px;

    height:500px;

    }

</style>

</head>

<body>

<div id="xuan">

<div class="wai" style="background-color:#06F" onclick="dianji('one')"></div>

<div class="wai" style="background-color:#0F0"  onclick="dianji('two')" ></div>

<div class="wai" style="background-color:#C36" onclick="dianji('three')"></div>

<div class="wai" style="background-color:#FF0" onclick="dianji('four')"></div>

</div>

<div style="clear:both"></div>

<div class="nei"  id="one " style="background-color:#06F"></div>

<div class="nei" id="two" style="background-color:#0F0; display:none"></div>

<div class="nei" id="three" style="background-color:#C36; display:none"></div>

<div class="nei" id="four" style="background-color:#FF0; display:none"></div>

</body>

<script type="text/javascript">

function dianji(id){

    var a=document.getElementsByClassName("nei");

    for(i=;i<a.length;i++){

    a[i].style.display="none";

        }

document.getElementById(id).style.display="block";

    }

</script>

</html>

问题有：当对第一个选项卡点击2次，下面的内容不再显示

4.进度条制作

<!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=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{

margin:0px auto;

padding:0px;

    }

#wai{

    width:300px;

    height:30px;

    border:1px solid #3FF;

    margin-top:100px;

    float:left

    }

#nei{

    width:%;

    height:30px;

    background-color:#F00;

    float:left

    }

#dj{

    margin-top:130px;

    }

</style>

</head>

<body>

<div id="wai">

<div id="nei"></div>

</div>

<input type="button" value="点击" id="dj" onclick="show()" />

</body>

<script type="text/javascript">

var a=;

function show(){

    if(a<){

        a++;

        }

        document.getElementById("nei").style.width=a+'%';

        window.setTimeout("show()",);

            }

</script>

</html>

问题：

 document.getElementById("nei").style.width=a+'%';我第一次在"a+'%'"这样写的，实现不了

        window.setTimeout("show()",5);对于settimeout（）的使用不大清晰
我想过尝试一下设计一个停止按钮，当你按下进度条停止，而进度条可以一直在走

巴特西

js例子

最新文章

热门文章