首页 > 代码库 > 最近写的一个鼠标从上到下滑动，，高大上~

最近写的一个鼠标从上到下滑动，，高大上~

2024-07-23 01:02:35   219人阅读

<!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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/按钮" id="inp">
  <input type="button" value="http://www.mamicode.com/按钮1" id="inp1" style="top:50px;">
 </BODY>
</HTML>

最近写的一个鼠标从上到下滑动，，高大上~


联系
我们