注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

牧野流星

每个人心中都有一个梦想..........

 
 
 

日志

 
 

JQ模拟网易云课堂头像下拉层头像  

2015-09-11 12:47:50|  分类: JS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
网易云课堂效果
JQ模拟网易云课堂头像下拉层头像 - 过客 - 牧野流星
我做的效果
 
JQ模拟网易云课堂头像下拉层头像 - 过客 - 牧野流星

鼠标放到头像上,显示下拉层,很多地方都有用到。
网上的代码也挺多。最初的时候,我是用css控制的。用css也能做到,但是体验很不好。鼠标放到头像上,下拉层显示,移动鼠标,下拉层就消失了,因为头像和下面的div有间隔。而且移动鼠标不能偏移,否则下面的层又会消失。
如图:
JQ模拟网易云课堂头像下拉层头像 - 过客 - 牧野流星
 
我的解决办法是用js控制下拉层延迟隐藏。如果鼠标偏移了头像层,一定时间后如果鼠标不在下拉层,就隐藏下拉层。
以下是代码:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="jquery-1.9.1.min.js"></script>
<style>
.face {
width:100px;
margin-bottom:2px;
border:1px solid #f00;
}
.name .info {
position: relative;
}
.name .set {
border:1px solid #f00;
}
</style>
</head>
<body>
<div class="name">
<div class="info">
<div class="face"><img src="avatar11_100.jpg" height="50" width="50"></div>
<div class="set j-nav-set x-hide" style="display:none;">
<ul>
<li><a href="{:U('Account/index')}">会员中心</a></li>
<li><a href="{:U('Account/user')}">会员设置</a></li>
<li><a href="{:U('User/logout')}">退出</a></li>
</ul>
</div>
</div>
</div>

<script>
$(function(){
$(".name .face").hover(function(){
$(".name .set").css("display","block");
},function(){
setTimeout(function(){
var isFocus=$(".name .set").is(":hover");
if(true==isFocus || $(".name .face").is(":hover")){
$(".name .set").css("display","block");
}else{
$(".name .set").css("display","none");
}
},"500");
});
$(".name .set").hover(function(){
$(".name .set").css("display","block");
},function(){
$(".name .set").css("display","none");
});

})
$(function(){
var s = "";
if(s){
var tab_nav = $(".u-mounav a[href*='"+s+"']");
tab_nav.addClass("current");
var html = tab_nav.html()+'<span class="arr"></span>';
tab_nav.html(html);
}
})
</script>

</body>
</html>



  评论这张
 
阅读(369)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018