码迷,mamicode.com
首页 > 其他好文 > 详细

弹出层(动态实现弹出层的自由控制)

时间:2016-08-26 10:34:11      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:

实现效果如图:

技术分享

 

鼠标悬浮到“张三”时,弹出张三信息,当鼠标仅从下面与张三结合部分移过来,弹出信息不消失,离开弹出框或离开张三,弹出框消失;

1.准备一个触发的超链接,一个弹出html(html标签)

  <a href="#" class="info_name">张三</a>         

  <div class="info">张三</div>  //div样式自己调,div的外框与a标签尽量接近(防止事件中断)

2.写js弹出代码: 

      <script type="text/javascript">

var variable1=false;     //定义两个标量
var variable2=true;
$(function(){


$(".info_name").mouseover(function(){
$(".info").show();
variable1=false;
});

$(".info").mouseover(function(){
$(".info").show();
variable2=false;
});

$(".info_name").mouseleave(function(){
variable1=true;
if(variable1&&variable2){
$(".info").hide();
}
});
$(".info").mouseleave(function(){
variable2=true;
if(variable1&&variable2){
$(".info").hide();
}
});
});

</script>

 

上面的div可以动态的设置在a标签旁边

     

 

 

 

弹出层(动态实现弹出层的自由控制)

标签:

原文地址:http://www.cnblogs.com/xiaoliuindex/p/5809244.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!