需要引入自己的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>
两侧悬浮信息框
猜你喜欢
转载自blog.csdn.net/projectNo/article/details/78416434
今日推荐
周排行