鼠标滑过弹出层

来源：互联网发布：淘宝与03年的非典编辑：程序博客网时间：2024/04/29 15:14

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

.tc-con{ width:400px; padding:20px; height:400px; background:#9FF; z-index:9;position: fixed; display:none;}
.tc-con .con{ height:360px;}
.tc-con .con p{ display:none;}
.tc-con .close{ height:20px; text-align:right;cursor:pointer;}
.tc-con .next{ width:200px; height:20px; text-align:right;cursor:pointer; float:left;}
.tc-con .prev{ width:200px; height:20px; text-align:left;cursor:pointer; float:left;}

.mark {width:100%;height:100%;float:left; background:#000; position: fixed;left:0;top:0;display:none; z-index:8; opacity:0.6;filter:alpha(opacity=60);}

</style>
<script>
$(document).ready(function(){
//弹出
$(".tc li").mouseover(function(){
  //$(".tc-con").fadeIn(400);
  $(".tc-con").slideDown(400);
  var index=$(this).index();
  $(".mark").show();
  $(".tc-con p").eq(index).show();
  $(".tc-con").show().css({"top":"150px","left":($(window).width()-$(".tc-con").width())*0.5 });

});
//下一个
$(".tc-con .next").click(function(){
   var p=$(".tc-con p");
   var len=p.length;
    for(var i=0; i<len; i++){
     if (p.eq(i).css("display") == "block" && i==len-1)
      {
      p.eq(0).show().siblings().hide();
      break;
      }else if(p.eq(i).css("display") == "block")
      {
      p.eq(i+1).show().siblings().hide();
      break;
      }
   }
});
//上一个
$(".tc-con .prev").click(function(){
   var p=$(".tc-con p");
   var len=p.length;
    for(var i=0; i<len; i++){
     if (p.eq(i).css("display") == "block" && i==0)
      {
      p.eq(len-1).show().siblings().hide();
      break;
      }else if(p.eq(i).css("display") == "block")
      {
      p.eq(i-1).show().siblings().hide();
      break;
      }
   }
});
//关闭
$(".close").click(function(){
  $(".mark").hide();
  $(".tc-con").hide();
  $(".tc-con p").hide();
});
});
</script>
</head>

<body>

<div class="tc-con">
<div class="prev">   上一个</div>
<div class="next">下一个   </div>

    <div style="clear:both;"></div>
        <div class="con">
            <p>11111111111弹出层内容弹出层内容弹出层内容弹出层内容弹出层内容弹出层内容弹出层内容弹1</p>
             <p>2222222222222弹出层内容弹出层内容弹出层内容弹出层内容弹出层内容弹出层内容弹出层内容弹2</p>
              <p>333333333弹出层内容弹出层内容弹出层内容弹出层内容弹出层内容弹出层内容弹出层内容弹3</p>
              <p>44444444444444弹出层内容弹出层内容弹出层内容弹出层内容弹出层内容弹出层内容弹出层内容弹4</p>
        </div>
        <div class="close">关闭   </div>



    </div>
</div>
<div class="mark"></div>

</body>
</html>

0 0