仿土豆网右下角弹出悬浮导航菜单效果

7个月前 (05-06 16:29)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

漂亮实用的右下角悬浮、自动伸缩隐藏效果导航菜单，这个是仿土豆网上面的悬浮菜单，该悬浮菜单特效兼容当前主流浏览器。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>仿土豆网右下角弹出悬浮导航菜单效果_武鸣人</title>
<style type="text/css">
*{margin:0;padding:0;font: 12px/1.25 tahoma,arial,宋体,sans-serif;}
li{list-style:none;}
a{text-decoration:none;}
body{width:100%;height:100%;background:#000;_position:relative;overflow:hidden;}
.page{position:fixed;_position:absolute;right:0;bottom:0;}
#wwwwumingren_bottom{width:203px;height: 50px;background:url(/img/20240506_www_wuming_ren_2.png) no-repeat 0 0;position:absolute;right:-165px;bottom:0;z-index: 20001;}
#nav{height: 22px;margin: 5px 0 0 43px;width: 125px;}
#nav li{float: left;width: 25px;}
#nav li a{display: block;height: 22px;width: 25px;}
#nav li .show,#nav li a:hover{background: url(/img/20240506_www_wuming_ren_2.png) no-repeat 0 -51px;}
#nav .li_1 .show,#nav .li_1 a:hover{background-position:-25px -51px}
#nav .li_2 .show,#nav .li_2 a:hover{background-position:-50px -51px}
#nav .li_3 .show,#nav .li_3 a:hover{background-position:-75px -51px}
#nav .li_4 .show,#nav .li_4 a:hover{background-position:-100px -51px}
.wwwwumingren{color: #FFFFFF;height: 16px;margin: 4px 0 0 8px;overflow: hidden;width: 160px;}
#but{ bottom: 0;display: block;height: 50px;position: absolute;right: 0;width: 33px;z-index:20002;}
.but_hide{background: url(/img/20240506_www_wuming_ren_2.png) no-repeat -170px 0;}
.but_hide:hover{background-position:-203px 0;}
.but_show{background: url(/img/20240506_www_wuming_ren_2.png) no-repeat -236px 0;}
.but_show:hover{background-position:-269px 0;}
#wuming_ren_box{bottom:-315px;display:none;height: 315px;padding: 0 0 48px;position: absolute;right: 1px;width: 200px; z-index: 20000;}
.bg{background: url(/img/20240506_www_wuming_ren_3.jpg) no-repeat 0 0;height: 315px;opacity: 0.9;position: absolute;right: 0;top: 0;width: 200px;}
.nav2_bg{bottom: 48px;height: 176px;left: 0;position: absolute;width: 34px;background: url(/img/20240506_www_wuming_ren_3.jpg) no-repeat 0 -139px;}
#list_nav{background: url(/img/20240506_www_wuming_ren_2.png) no-repeat scroll 0 -255px transparent;height: 139px;left: 0;position: absolute;top: 2px;width: 34px;}
#list_nav a{ color: #FFFFFF;display: block;height: 27px;line-height: 25px;text-align: center;text-decoration: none;}
#list_nav .show{color: #FF9900;}
#list_nav a:hover{color:#FFFF00;}
.clos{ background: url(/img/20240506_www_wuming_ren_2.png) no-repeat 0 -76px ;cursor: pointer;height: 9px;position: absolute;right: 10px;top: 14px;width: 9px;}
.box_right{color: #FFFFFF;
    height: 285px;
    overflow: hidden;
    position: absolute;
    right: 6px;
    top: 28px;
    width: 150px;}
</style>
<script type="text/javascript">
function startmove_wuming_ren(obj, json, fnEnd)
{//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
if(obj.timer)
{
clearInterval(obj.timer);
}
obj.timer=setInterval(function (){
domove_wwwwumingren(obj, json, fnEnd);
}, 30);
var oDate=new Date();
if(oDate.getTime()-obj.lastMove>30)
{
domove_wwwwumingren(obj, json, fnEnd);
}
}
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj, false)[attr];
}
}
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function domove_wwwwumingren(obj, json, fnEnd)
{
var iCur=0;
var attr='';
var bStop=true;//假设运动已经该停止了
for(attr in json)
{
if(attr=='opacity')
{
iCur=parseInt(100*parseFloat(getStyle(obj, 'opacity')));
}
else
{
iCur=parseInt(getStyle(obj, attr));
}
if(isNaN(iCur))
{
iCur=0;
}
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(parseInt(json[attr])!=iCur)
{
bStop=false;
}
if(attr=='opacity')
{
obj.style.filter="alpha(opacity:"+(iCur+iSpeed)+")";
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+'px';
}
}
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
if(bStop)
{
clearInterval(obj.timer);
obj.timer=null;
if(fnEnd)
{
fnEnd();
}
}
obj.lastMove=(new Date()).getTime();
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
<script type="text/javascript">
window.onload=function ()
{
 var oBtn=document.getElementById('but');
 var oBottom=document.getElementById('wwwwumingren_bottom');
 var oBox=document.getElementById('wuming_ren_box');
 var oBtnClose=document.getElementById('btn_close');
 
 var initBottomRight=parseInt(getStyle(oBottom, 'right'));
 var initBoxBottom=parseInt(getStyle(oBox, 'bottom'));
 
 oBtn.onclick=openHandler;
 oBtnClose.onclick=closeHandler;
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
 function openHandler()
 {
  startmove_wuming_ren(oBottom, {right: 0}, function (){
   oBox.style.display='block';
   startmove_wuming_ren(oBox, {bottom: 0});
  });
  oBtn.className='but_hide';
  oBtn.onclick=closeHandler;
 }
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
 function closeHandler()
 {
  startmove_wuming_ren(oBox, {bottom: initBoxBottom}, function (){
   oBox.style.display='none';
   startmove_wuming_ren(oBottom, {right: initBottomRight}, function (){
    oBtn.className='but_show';
   });
  });
  oBtn.onclick=openHandler;
 }
};
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div class="page">
 <div id="wwwwumingren_bottom">
  <ul id='nav'>
   <li><a href="###"></a></li>
   <li class='li_1'><a href="###"></a></li>       
   <li class='li_2'><a href="###"></a></li>       
   <li class='li_3'><a href="###"></a></li>       
   <li class='li_4'><a href="###"></a></li>      
  </ul>
  <h2 class="wwwwumingren"><a href="https://www.wuming.ren" target="_blank">武鸣人</a> <a href="https://www.wuming.ren" target="_blank">www.wuming.ren</a></h2>
 </div>
 <a class="but_show" id="but" href="###"></a>
 <div id="wuming_ren_box">
  <div class="bg"></div>
  <div class="nav2_bg"></div>
  <ul id="list_nav">       
   <li><a  class="show" href="https://www.wuming.ren" target="_blank">天气</a></li>
   <li class="tab2"><a href="https://www.wuming.ren" target="_blank">星座</a></li>
   <li class="tab3"><a href="https://www.wuming.ren" target="_blank">排行</a></li>
   <li class="tab4"><a href="https://www.wuming.ren" target="_blank">热点</a></li>
   <li class="tab5"><a href="https://www.wuming.ren" target="_blank">直播</a></li>
  </ul>
  <a class='clos' id="btn_close"></a>
  <div class="box_right">  
   <div>北京</div>      
    <div>    
     <div>     
      <strong><em>今天</em> (周二)</strong>           
      <img title="晴" src="/img/20240506_www_wuming_ren_4.gif" class="pic">         
     </div>    
     <span>-1~10C°</span>
     <span>晴</span>
     <span>微风小于3级</span>   
    </div>      
    <div >    
     <div>     
      <strong><em>明天</em> (周三)</strong>           
      <img title="多云" src="/img/20240506_www_wuming_ren_5.gif" class="pic">         
     </div>    
     <span>0~11C°</span>
     <span>多云</span>
     <span>北风3-4级</span>   
    </div>      
    <div>    
     <div>     
      <strong><em>后天</em> (周四)</strong>           
      <img title="晴" src="/img/20240506_www_wuming_ren_4.gif" class="pic">         
     </div>    
     <span>-1~12C°</span>
     <span>晴</span>
     <span>北风3-4级 转 微风小于3级</span>   
    </div>     
   </div>
  </div>
 </div>
</div>  
</body>
</html>


赞0
踩0
☆收藏0

本文来自武鸣人网站，转载请注明出处

本文地址：https://www.wuming.ren/a/892.html

右下角悬浮
回帖

仿土豆网右下角弹出悬浮导航菜单效果 期待您的回复！

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息