最近写的一个鼠标从上到下滑动，，高大上~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META name="Generator" content="EditPlus">
<META name="Author" content="">
<META name="Keywords" content="">
<META name="Description" content="">
</HEAD>
<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<style type="text/css">
*{margin:0px;padding:0px;font-family:'microsoft yehei','微软雅黑';list-style-type:none;text-decoration:none;}
.dialog2{
background-color: #FFF;
box-shadow: 1px 0 80px 5px #b0b0b0;
height: 360px;
left:0px;
position: relative;
margin:0 auto;
top:0;
width: 600px;
z-index: 102;
}
.dialog_bg{
position:absolute;
width:100%;
height:100%;
background:#000;
opacity:0.5;
filter:Alpha(opacity=60);
-ms-filter(opacity=60);
left:0px;
top:0px;
display:block;
z-index:-9;
}
.close_gd{
width:38px;
height:38px;
position:absolute;
right:15px;
cursor:pointer;
top:10px;
}
.headline{
border-bottom: 1px solid #e8e8e8;
font-size: 18px;
margin:0 auto;
width:570px;
color:#000;
margin-bottom: 10px;
padding: 40px 0px 20px;
}
.mry-item{
position:relative;
margin:0 auto;
width:578px;
top:10px;
height:230px;
}
.mry-item ul li{
float:left;
margin-left:20px;
width:125px;
height:230px;
border:2px solid #FFF;
}
.ite-title{
position:absolute;
width:60px;
height:60px;
line-height:60px;
text-align:center;
margin-left:30px;
font-size:15px;
margin-top:140px;
border-radius:60px;
background:#FFF;/*#E1524A*/
display:inline-block;
opacity:0.8;
filter:Alpha(opacity=80);
-ms-filter(opacity=80);
color:#000;
}
.ite-h2{
width:100%;
font-weight:500;
text-align:center;
padding-right: 5px;
position: relative;
top:45px;
color: #fff;
}
.ite-h2 em{
font-size: 20px;
font-weight: bold;
padding-right: 5px;
position: relative;
}
.ite-h2 span{
font-weight: 700;
position: relative;
color:#FFF;
font-size:13px;
top:0px;
}
input{
position:absolute;
top:0px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#on_ul').mouseover();
$("#inp").click(function(){
$("#dmc").animate({left:25+'%'},"slow");
});
var aNo=document.getElementById('clsgb');
var aDiv=document.getElementById('cls');
var aBtn=document.getElementById('inp');
var aBtn1=document.getElementById('inp1');
var aUl=document.getElementById('on_ul');
var aLi=aUl.getElementsByTagName('li');
var bDiv=aUl.getElementsByTagName('div');
var i=0;
var j=0;
//鼠标单击显示
aBtn.onclick=function(){
aDiv.style.display='block';
}
aBtn1.onclick=function(){
aDiv.style.display='block';
}
//鼠标单击关闭
aNo.onclick=function(){
aDiv.style.display='none';
$('#dmc').css('top','0');
}
//鼠标悬停改变底色
for(i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onmouseover=function(){
this.style.border='2px solid #F25962';
bDiv[this.index].style.background='#F25962';
bDiv[this.index].style.color='#FFF';
}
aLi[i].onmouseout=function(){
this.style.border='2px solid #FFF';
bDiv[this.index].style.background='#FFF';
bDiv[this.index].style.color='#000';
}
}
});
</script>
<BODY>
<!--none-->
<div id="cls" style='display:none;'>
<div class="dialog_bg"></div>
<div id="dmc" class="dialog2">
<div class="close_gd" id="clsgb"><img src="img/false.jpg" rel="nofollow"></div>
<div class="headline"> 尊敬的贵宾， 请选择本次旅行类型： </div>
<div class="mry-item">
<ul id="on_ul">
<li style="margin-left:1px;background:url('img/on1.jpg')no-repeat center center;">
<div class="ite-title" id="tdiv">自由行</div>
<h2 class="ite-h2"><em>￥1898</em><span>/起</span></h2>
</li>
<li style="background:url('img/on2.jpg')no-repeat center center;">
<div class="ite-title" id="tdiv">自发团</div>
<h2 class="ite-h2"><em>￥1898</em><span>/起</span></h2>
</li>
<li style="background:url('img/on3.jpg')no-repeat center center;">
<div class="ite-title" id="tdiv">精品团</div>
<h2 class="ite-h2"><em>￥1898</em><span>/起</span></h2>
</li>
<li style="background:url('img/on4.jpg')no-repeat center center;">
<div class="ite-title" id="tdiv">高端团</div>
<h2 class="ite-h2"><em>￥1898</em><span>/起</span></h2>
</li>
</ul>
</div>
</div>
</div>
<!--none-->
<input type="button" value="按钮" id="inp">
<input type="button" value="按钮1" id="inp1" style="top:50px;">
</BODY>
</HTML>
