右下角菜单悬浮效果

最新推荐文章于 2022-10-06 18:10:09 发布

端脑

最新推荐文章于 2022-10-06 18:10:09 发布

阅读量489

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43776742/article/details/103546276

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

右下角菜单悬浮效果

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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;}
#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(minibar.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}
.qf{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(minibar.png) no-repeat -170px 0;}
.but_hide:hover{background-position:-203px 0;}
.but_show{background: url(minibar.png) no-repeat -236px 0;}
.but_show:hover{background-position:-269px 0;}
#al_bottom{width:203px;height: 50px;background:url(minibar.png) no-repeat 0 0;position:absolute;right:-165px;bottom:0;z-index: 20001;}
#qf_box{bottom:-315px;display:none;height: 315px;padding: 0 0 48px;position: absolute;right: 1px;width: 200px; z-index: 20000;}
.bg{background: url(mini_jpgs.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(mini_jpgs.jpg) no-repeat 0 -139px;}
#list_nav{background: url(minibar.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(minibar.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>


</head>
<body>
<div class="page">
	<div id="al_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="qf">Chenny</h2>
	</div>
	<a class="but_show" id="but" href="###"></a>
	<div id="qf_box">
		<div class="bg"></div>
		<div class="nav2_bg"></div>
		<ul id="list_nav">       
			<li><a  class="show" href="#" target="_blank">天气</a></li>
			<li class="tab2"><a href="#" target="_blank">星座</a></li>
			<li class="tab3"><a href="#" target="_blank">排行</a></li>
			<li class="tab4"><a href="#" target="_blank">热点</a></li>
			<li class="tab5"><a href="#" 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="01.gif" class="pic">         
					</div>    
					<span>-1~10C°</span>
					<span>晴</span>
					<span>微风小于3级</span>   
				</div>      
				<div >    
					<div>     
						<strong><em>明天</em> (周三)</strong>           
						<img title="多云" src="02.gif" class="pic">         
					</div>    
					<span>0~11C°</span>
					<span>多云</span>
					<span>北风3-4级</span>   
				</div>      
				<div>    
					<div>     
						<strong><em>后天</em> (周四)</strong>           
						<img title="晴" src="01.gif" class="pic">         
					</div>    
					<span>-1~12C°</span>
					<span>晴</span>
					<span>北风3-4级 转 微风小于3级</span>   
				</div>     
			</div>
		</div>
	</div>
</div>  
</body>
</html>
<script src="./sport.js"></script>
<script type="text/javascript">
     function $(id) {
		 return document.getElementById(id);
	 }
	 // 绑定事件
	 $("but").onclick = function() {
		 startMove($("al_bottom"),0,"right",function() {
			$("qf_box").style.display = "block";
			startMove($("qf_box"),0,"bottom");
		 });
	 }
	 
	 
	 $("btn_close").onclick = function() {
		startMove($("qf_box"),-315,"bottom",function() {
			$("qf_box").style.display = "none";
			startMove($("al_bottom"),-165,"right");
		 });
	 }
	 
</script>

sport.js

/**
 * 
 * @param obj 运动的元素
 * @param target 目标值 
 * @param attr 操作属性 
 * @param callback 回调函数
 */
function startMove(obj,target,attr,callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var current = parseFloat(getStyle(obj,attr));
        var speed = 0;
        if (attr === "opacity") {
            speed = target - current > 0 ? 0.1: -0.1;
        } else {
            speed = (target - current)/10; //    
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        }
            //  
        if (current === target) {
            clearInterval(obj.timer);
            // 上一个动作执行完 进入下一个动作
            if (callback) {
              callback();
            }
        } else {
            if (attr === "opacity") {
                obj.style[attr] = current + speed
            } else {
               obj.style[attr] = current + speed + "px";
            }   
        }
    },20);
}


function getStyle(obj,attr) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(obj,false)[attr];
    } else {
        return obj.currentStyle[attr];
    }
}

返回目录

附加图片

在这里插入图片描述

返回目录

端脑

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
右下角菜单悬浮效果

右下角菜单悬浮效果<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">*{m...
复制链接

扫一扫