web前端学习--仿QQ空间留言板功能

主要技术要点:

     css:利用position属性和margin属性实现基本布局。

    jq/js:留言板功能使用prepend实现最新的留言在顶部显示。

   其中易出错的地方已经在源代码中有注释了,欢迎大家批评指正。

  点击打开链接



防QQ空间留言板功能html页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>漠丶叹尘的空间</title>
    	<link rel="icon" sizes="any" mask href="http://qzonestyle.gtimg.cn/qzone/v8/img/Qzone.svg">
    	<link rel="stylesheet" type="text/css" href="css/qqZone.css">
</head>
<body>
    <div class="header">
        This is the head nav
    </div>
    <div class="topInfo">
        <span class="edit">编辑</span>
    	<div class="zoneName">
    		<h2>漠丶叹尘 的空间</h2>
    		<p>知我者,谓我心忧。不知我者,谓我何求。</p>
    	</div>
    	<div class="support">
    		<img src="image/support_1.png" alt="赞">
    		<span class="num">7</span>
    	</div>
    	<div class="tips">7人赞过</div>
    	<!-- bottom nav -->
    	<div class="top_bottom">
    	   <div class="photo">
    	   	  <img src="http://qlogo3.store.qq.com/qzone/1262283870/1262283870/100?1481718124">   
    	   </div>
    	      <div class="uploadphoto">修改头像</div>
    	   <div class="container">
    	   	  <ul class="section">
    			<li>主页</li>
    			<li>日志</li>
    			<li>相册</li>
    			<li>留言板</li>
    			<li>说说</li>
    			<li>个人档</li>
    			<li>音乐</li>
    			<li>更多</li>
    		</ul>
    	   </div>
    	</div>
    </div>
    <!-- 下面实现留言板功能 -->
    <div class="mainframe">
    	<div class="title">留言板</div>
    	<div class="message">主人寄语</div>
    	<div class="info">
    		这是主人留下的寄语~
    	</div>
    	<div class="content" contenteditable="true"></div>
    	<input type="button" name="submit" value="发表" class="subbtn">
    	<div class="numofmessage">留言(0)</div>
    	<!-- 下面是留言区 -->
    	<div class="msgFrame">
    	   <!--  <div class="content_1">
    	         <img class="name" src="http://qlogo3.store.qq.com/qzone/1262283870/1262283870/100?1481718124" alt="photo">
    	         <div class="mainInfo">
    		         <div class="userId"><a href="#">zipple</a></div>
    		         <div class="conInfo">
    				       这是一条留言。
    		            </div>
    		         <div class="time">2016-12-19  23:46:11</div>
    		    </div> -->

    	    </div>
         </div>
    </div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
   $(".zoneName").hover(function(){
   	   $(".edit").show();
   },function(){
   	   $(".edit").delay(500).hide(0);//延时执行
   })
   //鼠标响应事件
   $(".support").mouseover(function(e){
   	   var left=e.pageX;
   	   var top=e.pageY;
   	   top=top-41;//这里是因为这个元素的父元素使用了margin-top属性,使得top值偏移了41像素。
   	   top=top+25;//加上鼠标自己的高度
   	   console.log(left+"px"+"   top:"+top)
   	   $(".tips").css({"left":left+"px","top":top+"px"});
   	   // $(".tips").delay(800).show(0);加了延时执行后会使得鼠标响应事件不灵敏
   	   // $(".tips").show("slow");
   	   $(".tips").fadeIn();
   })
   /*
    *鼠标离开事件,其中leave是指离开当前元素,而out包括其子元素
   */
   // $(".support").mouseout(function(){
   // 	   $(".tips").hide();
   // })
   $(".support").mouseleave(function(){
   	   console.log("leave");
   	   // $(".tips").css("display","none");
   	   // $(".tips").hide("slow");
   	    $(".tips").fadeOut();
   })
   //修改头像
   $(".photo").hover(function(){
   	   $(".uploadphoto").delay(800).show(0);
   },function(){
   	   $(".uploadphoto").hide();
   }) 
   $(".uploadphoto").hover(function(){
   	   if ($(this).is(":visible")) {
          console.log("visible")
   	   }
   	   else
   	   $(".uploadphoto").show();
   })
   //创建一个div
    function creatDiv(className,closeName,left,top){
          var div =$('<div style="left:' + left + 'px; top:' + top + 'px;"></div>');     
          div.addClass(className);
          $('body').append(div);
          left+=360;
          var close=$('<div style="left:' + left + 'px; top:' + top + 'px;"></div>'); 
          close.addClass(closeName);
          $('body').append(close);
      }     
   $(".uploadphoto").click(function(){
   	   var className='dialog';
   	   var closeName="close";
   	   console.log("点击上传");
   	   creatDiv(className,closeName,500,200);   
   	   $(".close").bind("click",function(){
   	   	      	  $(".dialog").remove();
   	              $(".close").remove();
   	              console.log("关闭成功");
   	              $(".uploadphoto").hide();
   	   });
   })
   //下面是错误的尝试,直接绑定一个函数名称可能导致该函数直接执行!
   // $(".close").bind("click",closeDialog());
   // function closeDialog(){
   // 	  $(".dialog").remove();
   // 	  $(".close").remove();
   // 	  console.log("关闭");
   // }


   //接下来储存留言数据
   var count=0;
   $(".subbtn").click(function(){
   	 var text= $(".content").text();
   	 var time=getCurrentTime();
   	 if(text==""){
   	 	alert("您还没有输入任何内容!");
   	 }
   	 else{
   	 	loadmessage(text,'zipple',time);
   	 	count++;
   	 	console.log('success!');
   	 	$(".content").text("");
   	 	$(".numofmessage").text("留言("+count+")");
   	 }
   })
   function loadmessage(message,id,time){
      	//创建content_index
      	//包含img.name + mainInfo
      	//.userId .conInfo .time
      	var contentDiv='<div class="content_1">';
      	   contentDiv+='<img class="name" src="http://qlogo3.store.qq.com/qzone/1262283870/1262283870/100?1481718124" alt="photo">';
      	   contentDiv+='<div class="mainInfo">'
      	   contentDiv+=' <div class="userId"><a href="#">';
      	   contentDiv+=id;
      	   contentDiv+='</a></div> <div class="conInfo">';
      	   contentDiv+=message;
      	   contentDiv+='</div> <div class="time">';
      	   contentDiv+=time;
      	   contentDiv+='</div> </div> </div>'
           $(".msgFrame").prepend(contentDiv);
   }
   function getCurrentTime(){
   	   var today=new Date();
   	   var y=today.getFullYear();
   	   var mh=today.getMonth();
   	   mh++;
   	   var d=today.getDate();
   	   var h=today.getHours();
   	   var m=today.getMinutes();
   	   var s=today.getSeconds();
   	   m=checkTime(m)
       s=checkTime(s)
       var time=y+"-"+mh+"-"+d+"  "+h+":"+m+":"+s;
       return time;
   }
   function checkTime(i){
       if(i<10)
         i="0"+i
       return i
    }

</script>
</html>
CSS样式表:

*{
	margin: 0;
	padding: 0;
}
body{
	background-image: url("http://i.gtimg.cn/qzone/space_item/orig/5/97349_bg1.png");
    font-family: punctuation,"PingFangSC-Regular","Microsoft Yahei","sans-serif";
    height: 1000px;
}
.header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 41px;
	background: #001e3b;
	text-align: center;
	line-height: 41px;
	font-size: 16px;
	color: grey;
	z-index: 100;
}
.topInfo{
	width: 100%;
	height: 300px;
    background-repeat: no-repeat;
    /*background-position: -276px 42px;*/
    margin-top: 41px;
    background-position:-275px top;
    background-attachment: scroll;
    background-image: url("http://i.gtimg.cn/qzone/space_item/orig/5/97349_top.jpg");
    position: relative;
}
.edit{
	position: absolute;
	left: 417px;
	/*width: 100%;*/
	height: 18px;
	background:#54B3E3;
	color: white;
	font-size: 14px;
    display: none;
}
.zoneName{
    position: absolute;
    top: 20px;
    left: 185px;
    color: white;
    width: 280px;
    height: 60px;
}
.zoneName h2{
    font-size: 28px;
    font-weight: normal;
}
.zoneName p{
	font-size: 14px;
	margin-top: 3px;
}
.support{
	width: 58px;
	height: 33px;
	position: absolute;
	right: 183px;
	top: 50px;
	background-color: rgba(0,0,0,.4);
	border-radius: 18px;
	color: white;
	line-height: 30px;
	cursor: pointer;
}

.support img{
	width: 18px;
	height: 18px;
	margin-top: 7px;
	margin-left: 13px;
}
.num{
	margin-top: -33px;
	width: 18px;
	height: 18px;
	margin-left: 40px;
	display: block;
	margin-bottom:2px;
	cursor: pointer;
}
.tips{
	width: 60px;
	height: 20px;
	font-size: 12px;
	background-color: white;
	color: black;
	text-align: center;
	line-height: 20px;
	position: absolute;
	left: 0;
	right: 0;
	display: none;
}
.top_bottom{
	width: 100%;
	height: 50px;
	background-image: url("http://i.gtimg.cn/qzone/space_item/orig/5/97349_menu_bg.png");
    position: absolute;
    bottom: 0;
}
.photo{
	width: 128px;
	height: 128px;
	position: absolute;
	left: 185px;
	top: -96px;
	padding: 1px;
}
.photo img{
	width: 120px;
	height:120px;
	border: #FFF 3px solid;
	border-radius: 2px;
	display: block;
}
.uploadphoto{
	width: 100px;
	height: 20px;
	font-size: 12px;
	color: #eee;
	background-color: rgba(0,0,0,.8);
	text-align: center;
	line-height: 20px;
	position: absolute;
	left: 200px;
	top: 8px;
	display: none;
	cursor: pointer;
}

.dialog{
	width: 400px;
	height: 300px;
	z-index: 100;
	position: fixed;
	background-image:url("../image/upload.png");
	background-color: white;
	background-repeat: no-repeat;
	background-position: center;
}

.close{
	width: 40px;
	height: 40px;
	z-index: 1000;
	position: fixed;
	background-image:url("../image/close.png");
	background-size: 100% 100%;
	/*background-color: red;*/
	cursor: pointer;
}
.container{
	width: 980px;
	margin: 0 auto;
	height: 100%;
	line-height: 50px;
}
.top_bottom ul.section{
	list-style: none;
	margin-left: 165px;
	float: left;
}
.top_bottom ul.section li{
	float: left;
	/*margin-right: 28px;*/
	font-size: 16px;
	color: #eee;
	font-weight: normal;
	/*font-family: Lucida Console, Monaco, Courier New, mono, monospace;*/
	font-family: Tahoma, Helvetica, Arial, sans-serif;
	cursor: pointer;
}
.top_bottom ul.section li:hover{
	color: #36648B;
}
ul.section li:nth-child(1){
	margin-right: 20px
}
ul.section li:nth-child(2){
	margin-right: 20px
}
ul.section li:nth-child(3){
	margin-right: 15px
}
ul.section li:nth-child(4){
	margin-right: 20px
}
ul.section li:nth-child(5){
	margin-right: 17px
}
ul.section li:nth-child(6){
	margin-right: 15px
}
ul.section li:nth-child(7){
	margin-right: 18px
}


.mainframe{
	width: 900px;
	height: 2703px;
	margin:20px auto;
	background-color:#24639D;
	color:#EDEFF0;
    font-family: Tahoma, Helvetica, Arial, sans-serif;
}
.title{
	width: 858px;
	height: 52px;
	margin:0 auto;
	line-height: 52px;
	font-family: 微软雅黑,Tohoma;
	font-size: 14px;
	color: #2b9de6;
	/*border-color: #1f70bb;*/
	border-bottom: 2px solid #1f70bb;
}
.title:hover{
	color:#70CCFF;
}
.message{
	width: 858px;
	height: 35px;
	margin: 0 auto;
	line-height: 35px;
	color: #eee;
	border-bottom: 2px solid #1f70bb;
	font-family:微软雅黑, Tohoma;
}
.info{
	width: 858px;
	height: 140px;
	color: #EDEFF0;
	margin: 0 auto;
	line-height: 40px;
	border-bottom: 2px solid #1f70bb;
	font-size: 12px;
}
.content{
	width: 858px;
	height: 100px;
	word-break: break-all;
	margin: 0 auto;
	border: 2px solid #1f70bb;
	border-top: 0px;
	background-color: #e2e2e2;
	color: black;
	text-indent: 2px;
	font-size: 14px;
}
.subbtn{
	width: 72px;
	height: 28px;
	line-height: 28px;
	font-size: 14px;
	border-radius: 2px;
	background-color: #46B2EF;
	color: #FFFFFF;
    border: 1px solid #3686B3;
    cursor:pointer;
    margin-left: 20px;
    margin-bottom: 50px;
}
.subbtn:hover{
	background-color: #1a88cf;
}
.numofmessage{
	width: 858px;
	height: 20px;
	color: #EDEFF0;
	margin: 0 auto;
	line-height: 20px;
	border-bottom: 2px solid #1f70bb;
	font-family:微软雅黑, Tohoma;
}
.msgFrame{
	width: 858px;
	height: 2200px;
	margin: 0 auto;
}
.content_1{
	width: 858px;
	height: 190px;
	color: #EDEFF0;
	margin: 0 auto;
	border-bottom: 2px solid #1f70bb;
}
.name{
	width: 50px;
	height: 50px;
	margin: 20px 20px;
	border-radius: 5px;
}
a{
	color: #70CCFF;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
.mainInfo{
	width: 766px;
	height: 143px;
	float: right;
	margin-top: 20px;
}
.userId{
   width: 100%;
   height: 20px;
   font-size: 14px;
}
.conInfo{
   width: 100%;
   height: 100px;
   margin-top: 12px;
   font-size: 12px;
}
.time{
   width: 100%;
   height: 20px;
   font-size: 12px;
   margin-bottom: 20px;
   color: #8AB8E3;
}


  

  • 19
    点赞
  • 87
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值