`

车窗升降js效果

 
阅读更多

<!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>

<link rel="stylesheet" type="text/css" href="css/style.css"/>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

</head>

<script type="text/javascript"> 

 

var stat = 0;

$(function(){

var bl_b=$("#bl_b");

$('#down').click(function(){

if(!$("#bl_b").is(":animated")){

stat=0;

}

if(stat==0){

bl_b.animate({marginTop:'80px',opacity:'1'},5000);

 

}

 

 

});

 

$('#up').click(function(){

if(!$("#bl_b").is(":animated")){

stat=1;

}

if(stat==1){

 

bl_b.animate({marginTop:'',opacity:'1'},5000);

 

}

 

});

});

 

 

 

 

function xianshi(){

 

 

arrows.style.display='block';

 

 

}

 

</script>

 

<body>

<div id="container_ck">

    <ul class="left">

    <li id="anniu_1" onclick="xianshi()"><img src="img/cckz/ck1.png" width="66" height="241" /></li>

        <li><img src="img/cckz/ck2.png" width="66" height="241" /></li>

        <li><img src="img/cckz/ck3.png" width="66" height="241" /></li>

        <li><img src="img/cckz/ck4.png" width="66" height="241" /></li>

  </ul>

    <ul class="right">

    <li class="li_1">

            <img class="bl_1" id="bl_b" src="img/cckz/c_1_b.png" width="258" height="102" /> 

       <img class="chemen_1" src="img/cckz/c_1_m.png" width="230" height="230" /> 

        </li>

        <li class="li_2">

            <img class="bl_2" id="bl_b" src="img/cckz/c_2_b.png" width="258" height="102" /> 

       <img class="chemen_2" src="img/cckz/c_2_m.png" width="230" height="230" /> 

        </li>

        <li class="li_3">

            <img class="bl_3" id="bl_b" src="img/cckz/c_3_b.png" width="258" height="102" /> 

       <img class="chemen_3" src="img/cckz/c_3_m.png" width="230" height="230" />         

        </li>

        <li class="li_4">

            <img class="bl_4" id="bl_b" src="img/cckz/c_4_b.png" width="258" height="102" /> 

       <img class="chemen_4" src="img/cckz/c_4_m.png" width="230" height="230" /> 

        </li>

    </ul>

    <div class="arrows" id="arrows" style="display:none;">    

    <button id="up" class="arrows_up" ></button>

<button id="down" class="arrows_down" ></button>

    </div>

 <map name="Map" id="Map">

   <area shape="rect" coords="9,12,74,75" href="009确定故障（9）.html" />

 </map>  

</div> 

 

 

</body>

</html>

 

分享到：
| jQuery事件之鼠标事件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics