需要引入自己的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>
html+js+jquery實現兩側懸浮信息框
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
由淺入深在實踐中玩轉Zabbix，解決剩下20%的監控需求！
本文整理自Zabbix中級認證專家李銘栓（滿分學員）在Zabbix Meetup廣州站的演講。 掌握這幾種監控方式解決80%的監控問題，剩下的20%如何實現？這裏有答案！ 幾點經驗分享： 1