html+js+jquery实现两侧悬浮信息框

最新推荐文章于 2023-05-09 10:42:27 发布

ProjectNo

最新推荐文章于 2023-05-09 10:42:27 发布

阅读量1.1k

点赞数 1

分类专栏：前端文章标签：悬浮信息框两侧导航栏

本文链接：https://blog.csdn.net/projectNo/article/details/78416434

版权

前端专栏收录该内容

17 篇文章 4 订阅

订阅专栏

这里写图片描述

需要引入自己的jquery的js包
<html>
	<head>
        <meta charset="utf-8">
        <meta name="author" content="wg">
		<title>Jquery-左侧悬浮信息框</title>
		<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
		<style type="text/css">
			label{
				margin-left: 10px;
				font-size:13px;
			}
			
		</style>

		<script type="text/javascript">
		//显示隐藏信息框
		function hideOrShow(){
			if($("#msg").css("height")=="220px"){//用div高度判断信息框是最大还是最小
			$("#msg").animate({height:'26px',width:'26px'},500);
				$("#inMsg").hide();
				$("#pullImg").attr('src',"pullUp.png");
				
			}else if($("#msg").css("height")=="26px"){
				$("#msg").animate({width:'240px',height:'220px'},500);
				$("#inMsg").show();
				$("#pullImg").attr('src',"pullDown.png");
			}
		}

		</script>
	</head>
	<body>
		<div style="font-size: 14px;float:left;position:absolute;left:0px;top:200px;z-index:9999;">
			<div style="height:26px;width:26px; background: #f5f5f5;-webkit-box-shadow:  0 10px 6px -6px #777;
			-z-box-shadow:  0 10px 6px -6px #777;box-shadow: 0 10px 6px -6px #777;font-size: 14px;" id="msg">
				<img src="pullUp.png" onclick="hideOrShow()" id = "pullImg">
				
				<div id = "inMsg" style="display:none;">
					
					<label style="margin-left: 65px; font-size: 18px;" id = "msgTitle" >购物车</label></br></br>
					<label >商品：大衣</label></br>
					<label >数量：1</label></br>
					<label >价格：￥499</label></br>
				
				</div>
			</div>
		</div>
	</body>
</html>

ProjectNo

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html+js+jquery实现两侧悬浮信息框

需要引入自己的jquery的js包&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="author" content="wg"&gt; &lt;title&gt;Jquery-左侧悬浮信息框&lt;/title
复制链接

扫一扫